setsun / react-model-viewer

3D model viewer / animation player in React & Three.js

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.

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 = () => (
  <ModelViewer type="gtlf" src={modelPath} />
);

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)