3D Model Viewer

Interactive 3D model viewer with vertex color overlay support for stress/thermal/fatigue visualization. Supports STL, OBJ, GLTF, and GLB formats. Use cases: FEA stress analysis, thermal imaging overlays, CAD model inspection, structural health monitoring, component fatigue visualization.

Installation

Copy and paste the following code into your project.

npx @plexusui/cli add 3d-model-viewer

Manual Installation

1. Copy the component code from components/3d-model-viewer.tsx

2. Install dependencies:

npm install react@latest

3. Copy any required primitive components

Examples

Basic 3D Model

Simple cube model with default material settings. Drag to rotate, scroll to zoom.

Wireframe Mode

Model rendered in wireframe mode for mesh inspection and topology analysis.

Color Scale Options

Compare different color scales for data visualization. Each scale has different perceptual properties.

Composable API (Primitive)

Using primitive components for full control over the 3D scene composition.

Show GridShow Axes

File Upload

Load STL or OBJ files from disk. Supports binary and ASCII STL formats.

Choose file (.stl, .obj)

Upload an STL or OBJ file to visualize. Supports CAD exports, 3D scans, and 3D printing models.

API Reference

3D model viewer with support for STL/OBJ files and vertex color visualization for engineering analysis

ModelViewer

Prop	Type	Default	Description
modelUrl	string	undefined	URL to load the 3D model from (alternative to modelData)
modelType	"stl" \| "obj" \| "gltf" \| "glb"	"stl"	Type of 3D model format
modelData	ArrayBuffer \| Float32Array	undefined	Model data as binary buffer (alternative to modelUrl)
vertexColors	number[]	undefined	Per-vertex color values (0-1 range) for data visualization like stress/temperature
colorScale	(value: number) => string	viridis	Color scale function mapping normalized values (0-1) to hex colors
minValue	number	0	Minimum value for color scale normalization
maxValue	number	100	Maximum value for color scale normalization
width	number \| string	800	Viewer width in pixels or CSS units
height	number \| string	600	Viewer height in pixels or CSS units
showGrid	boolean	true	Show ground grid for spatial reference
showAxes	boolean	false	Show XYZ axes helper
cameraPosition	[number, number, number]	[3, 3, 3]	Initial camera position [x, y, z]
backgroundColor	string	"#111111"	Background color (hex)
autoRotate	boolean	false	Enable automatic model rotation
wireframe	boolean	false	Render model as wireframe
metalness	number	0.5	Material metalness (0-1). Higher values appear more metallic
roughness	number	0.5	Material roughness (0-1). Lower values appear more glossy/reflective
className	string	""	CSS class name for the container element

Primitive Components

Use for custom composition and full control over the 3D scene

Prop	Type	Default	Description
ModelViewer.Root	component	-	Root container with context provider. Accepts all ModelViewerProps plus optional children
ModelViewer.Canvas	component	-	The 3D canvas with camera and controls. Use within ModelViewer.Root
ModelViewer.Scene	component	-	Scene containing the model, lighting, grid, and axes

Utility Functions

Helper functions for generating test models

Prop	Type	Default	Description
generateCubeSTL()	() => ArrayBuffer	-	Generate a simple cube STL for testing and demos
generateBeamSTL(divisions)	(divisions?: number) => { buffer: ArrayBuffer; stressValues: number[] }	-	Generate a beam STL with simulated stress distribution for FEA visualization demos

Loading example...