A 3D model viewer / animation player component
npm install react-model-viewerA 3D model viewer & animation player for React.
Supports:
- GTLF, OBJ formats
- Loading progress bar for asset files
- Animation progress bar for 3D animations
- Animation clip selection
- Orbit camera controls
- Play, pause, seek, & loop controls
- Playback speed controls
main package
npm i react-model-viewerpeer dependencies
npm i react react-dom three
`Bundle size: https://bundlephobia.com/result?p=react-model-viewer
$3
http://setsun.io/react-model-viewer/?path=/story/react-model-viewer--gtlf-sonic$3
react-model-viewer is meant to interface seamlessly with three.js model loaders for loading 3D assets (GTLFLoader, OBJLoader, etc).Additionally it supports animations via
THREE.AnimationMixer if the model includes them.`tsx
import ModelViewer from 'react-model-viewer';const modelPath = 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Duck/glTF/Duck.gltf';
const App = () => (
);
`$3
- [ ] Animation timestamps / frames
- [ ] Better support for
OBJ and switching out MTL textures.
- [ ] Support for other loaders (FBX, COLLADA`, etc.)