Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/setsun/react-model-viewer
3D model viewer / animation player in React & Three.js
https://github.com/setsun/react-model-viewer
3d animation react react-three-fiber threejs webgl
Last synced: about 6 hours ago
JSON representation
3D model viewer / animation player in React & Three.js
- Host: GitHub
- URL: https://github.com/setsun/react-model-viewer
- Owner: setsun
- License: mit
- Created: 2019-05-20T02:14:27.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-03-26T10:40:23.000Z (8 months ago)
- Last Synced: 2024-10-18T07:07:09.972Z (about 1 month ago)
- Topics: 3d, animation, react, react-three-fiber, threejs, webgl
- Language: TypeScript
- Homepage: https://setsun.github.io/react-model-viewer
- Size: 1.9 MB
- Stars: 35
- Watchers: 4
- Forks: 6
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
### Install
```
# 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
### Example
http://setsun.github.io/react-model-viewer/?path=/story/react-model-viewer--gtlf-sonic
### API
`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 = () => (
);
```
### Coming Soon
- [ ] 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)