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-viewer
Use 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 |