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

Use 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