/react-3d-model-viewer

A react component to view 3d models.

Primary LanguageJavaScript

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