lambda360view

Live Demo

A React component library for displaying 3D CAD-like models with edge rendering, built with react-three-fiber.

Features

• 📦 Load GLB binary models directly from ArrayBuffer
• ✏️ Edge line rendering for CAD-style visualization using orphan accessors
• 🖱️ Built-in orbit controls (rotate, zoom, pan)
• 📐 Automatic camera positioning based on bounding box
• 📏 Distance and point annotations support
• 🔄 Seamless model switching without flickering or resetting camera state
• 🎛️ Built-in View Menu (Isometric, Front, Top, etc.) and Axis Helper
• ⚛️ Pure React + TypeScript implementation

Installation

npm install lambda360view

Peer Dependencies

This library requires React 18+ and Three.js as peer dependencies:

npm install react react-dom three @react-three/fiber @react-three/drei

Usage

import { useState, useEffect } from 'react';
import { Lambda360View } from 'lambda360view';

function App() {
  const [model, setModel] = useState<ArrayBuffer | null>(null);

  useEffect(() => {
    // Load GLB file as ArrayBuffer
    fetch('/my-model.glb')
      .then((res) => res.arrayBuffer())
      .then((buffer) => setModel(buffer));
  }, []);

  return (
    <Lambda360View
      model={model}
      center={!model ? <div>Loading model...</div> : undefined}
      backgroundColor="#f0f0f0"
      edgeColor="#000000"
      showEdges={true}
      showViewMenu={true}
      orthographic={true}
      axisUp="Z"
      style={{ width: '100vw', height: '100vh' }}
    />
  );
}

Props

Lambda360View inherits all standard React.HTMLAttributes<HTMLDivElement> props (such as style, className, onClick, etc.) and accepts the following specific props. (Note: Because the root element of this component is a <div />, any standard HTML attributes passed to Lambda360View will be applied directly to that root div.)

Prop	Type	Default	Description
model	ArrayBuffer | null	required	GLB binary data to load directly, or null for empty state
nodeCenter	React.ReactNode	-	React node to display in the center (e.g. loading spinner, error message)
nodeFooter	React.ReactNode	-	Footer content to display at the bottom
backgroundColor	string	"#1a1a2e"	Canvas background color
edgeColor	string	"#000000"	Color for edge lines
showEdges	boolean	true	Whether to render edges
axisUp	'Y' | 'Z' | 'X'	'Y'	Up axis of the model coordinate system
axisGround	'X' | 'Y' | 'Z'	-	Align model so that the bounding box minimum on this axis is at 0
axisCenter	Axis[]	-	Center the model on these axes (e.g. ['X', 'Z'])
orthographic	boolean	false	Use orthographic camera instead of perspective
showViewMenu	boolean	false	Show built-in view control menu bar
annotations	Annotation[]	-	Array of point/distance annotations to display

Annotations

You can pass an array of annotations to display labels or measurements on the 3D model:

import type { Annotation } from 'lambda360view';

const annotations: Annotation[] = [
  {
    type: 'point',
    position: [152, 100, 44],
    label: 'Material: SUS304',
  },
  {
    type: 'distance',
    start: [-152, -87, -62],
    end: [152, -87, -62],
    label: '304mm',
  }
];

GLB Specification Requirements

For the edge rendering to work correctly, the GLB file must follow our specific structure. Please refer to the detailed GLB Specification document.

Key requirements:

• Edges must be stored as an orphan accessor (FLOAT, VEC3) containing line segment pairs
• The root extras object must contain edgeAccessor pointing to the correct accessor index:

  {
    "extras": {
      "edgeAccessor": 3
    }
  }

Example

See the examples directory for a complete Next.js example displaying a hexapod robot model.

# Run the example
make -C examples generate run

License

MIT

Author

lzpel