A 3D viewer library for CAD-like models with edge display
npm install lambda360viewA React component library for displaying 3D CAD-like models with edge rendering, built with react-three-fiber.
- 📦 Load hierarchical 3D model data (vertices, normals, triangles, edges)
- 🎨 Per-part color and transparency support
- ✏️ Edge line rendering for CAD-style visualization
- 🖱️ Built-in orbit controls (rotate, zoom, pan)
- 📐 Automatic camera positioning based on bounding box
- ⚛️ Pure React + TypeScript implementation
``bash`
npm install lambda360view
This library requires React 18+ as a peer dependency:
`bash`
npm install react react-dom
`tsx
import { Lambda360View } from 'lambda360view';
import type { ModelData } from 'lambda360view';
// Your model data
const model: ModelData = {
version: 3,
name: "myModel",
id: "/myModel",
parts: [
{
id: "/myModel/part1",
name: "part1",
type: "shapes",
shape: {
vertices: new Float32Array([...]),
normals: new Float32Array([...]),
triangles: new Uint32Array([...]),
edges: new Float32Array([...]),
},
color: "#ff6600",
loc: [[0, 0, 0], [0, 0, 0, 1]], // [position, quaternion]
}
],
bb: { xmin: -10, xmax: 10, ymin: -10, ymax: 10, zmin: -10, zmax: 10 },
};
function App() {
return (
backgroundColor="#f0f0f0"
edgeColor="#000000"
showEdges={true}
width="100vw"
height="100vh"
/>
);
}
`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| model | ModelData | required | The 3D model data to display |backgroundColor
| | string | "#1a1a2e" | Canvas background color |edgeColor
| | string | "#000000" | Color for edge lines |showEdges
| | boolean | true | Whether to render edges |width
| | string \| number | "100%" | Container width |height
| | string \| number | "100%" | Container height |className
| | string | - | Additional CSS class |style
| | CSSProperties | - | Additional inline styles |
The library accepts a hierarchical model format with the following structure:
`typescript
interface ModelData {
version: number;
name: string;
id: string;
parts: Part[];
bb: BoundingBox;
}
interface Part {
id: string;
name: string;
type: string;
shape?: ShapeData;
color?: string;
alpha?: number;
loc?: [[number, number, number], [number, number, number, number]];
parts?: Part[]; // Nested child parts
}
interface ShapeData {
vertices: Float32Array; // [x1, y1, z1, x2, y2, z2, ...]
normals: Float32Array; // [nx1, ny1, nz1, ...]
triangles: Uint32Array; // Triangle indices
edges: Float32Array; // Line segment pairs for edges
}
`
See the examples directory for a complete Next.js example displaying a hexapod robot model.
`bash``Run the example
npm install
npm run build
cd examples && npm run dev
MIT