A React component to view 3D models in either stl or 3mf formats using three.js. Demo
-
React component
-
Three.js WebGL renderer
-
Three.js STL Loader
-
Three.js 3MF Loader
Note - Remains dependent on my fork of Three.js which has a branch to expose some orbit controls methods to provide a means of initial positioning (Three.js r104 incorporated a pull request to modularize STL Loader in Three's examples/jsm (which this fork also previously added).
Install react-3d-model-viewer through npm
npm i react-3d-model-viewerUse ModelViewer component
import ModelViewer from 'react-3d-model-viewer'| Property | Type | Default | Description |
|---|---|---|---|
| url | string | './test_model.stl' | The url of the STL file |
| width | string | '100%' | The width of the canvas |
| aspectgRatio | string | '56.125%' | The aspect ratio of the canvas |
| color | string | '#fdd017' | The model display color |
| backgroundColor | string | '#eaeaea' | The canvas color |
| rotate | boolean | true | Animate the rotation of the model |
| rotationSpeeds | number list | [0.01, 0.01, 0] | A vector of rotation speeds |
| initControlPosition | number list | [0, 0, 1.0] | radians up, radians left, dolly out |