react-model-viewer

A 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

$3

``

main package

npm i react-model-viewer

peer 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

!example

$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.)
- [ ] Render props for headless component rendering (BYOS - bring your own styles)