1.1.1 • Published 4 years ago
react-3d-model-viewer v1.1.1
react-3d-model-viewer 
A React component to view 3D models in either stl or 3mf formats using three.js. Demo
Features
- 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).
Usage
Install react-3d-model-viewer through npm
npm i react-3d-model-viewerUse ModelViewer component
import ModelViewer from 'react-3d-model-viewer'Properties
| 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 |