3D Model Viewer
Interactive 3D model viewer supporting STL, OBJ, GLTF, and GLB formats. Overlay scalar data on model vertices using color mapping, making it possible to visualize simulation results and sensor data directly on your 3D geometry.
Category: 3d · Maturity: stable
Installation
npx @plexus/cli add 3d-model-viewerDependencies
This component requires Three.js and React Three Fiber:
npm install three @react-three/fiber @react-three/dreiUsage
import { ModelViewer } from '@plexus/ui'
function StressAnalysis({ modelUrl, stressData }) {
return (
<ModelViewer
src={modelUrl}
vertexColors={stressData}
colorScale="turbo"
colorRange={[0, 500]}
showColorbar
colorbarLabel="Stress (MPa)"
width={800}
height={600}
/>
)
}Supported Formats
| Format | Extension | Notes |
|---|---|---|
| STL | .stl | Binary and ASCII. No materials. |
| OBJ | .obj | With .mtl material files. |
| GLTF | .gltf | JSON format with embedded or external assets. |
| GLB | .glb | Binary GLTF. Single-file, includes textures. |
Performance
| Spec | Value |
|---|---|
| Max data points | 1,000,000+ vertices |
| Target FPS | 60 |
| Typical memory | ~200 MB |
| Renderer | Three.js (WebGL2) |
Aerospace Use Cases
- FEA stress analysis — Overlay finite element analysis results on structural models with color-mapped stress, strain, or displacement
- Thermal imaging overlay — Map temperature sensor data onto a 3D CAD model to visualize hot spots
- Structural inspection — View 3D scans of components with defect locations highlighted by color