项目作者: raycaster-io

项目描述 :
3D model viewer / animation player in React & Three.js
高级语言: TypeScript
项目地址: git://github.com/raycaster-io/react-model-viewer.git
创建时间: 2019-05-20T02:14:27Z
项目社区:https://github.com/raycaster-io/react-model-viewer

开源协议:MIT License

下载


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

  1. # main package
  2. npm i react-model-viewer
  3. # peer dependencies
  4. 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

example

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.

  1. import ModelViewer from 'react-model-viewer';
  2. const modelPath = 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Duck/glTF/Duck.gltf';
  3. const App = () => (
  4. <ModelViewer type="gtlf" src={modelPath} ></ModelViewer>
  5. );

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)