English| 简体中文

react-3d-viewer

A 3D model viewer component based on react.js. Demo located at https://dwqdaiwenqi.github.io/react-3d-viewer/site/

Features

• Component-Based
• Update UI using .setState() method
• Support gltf,obj,mtl,json,dae model formats - other formats will be added in the future.
• Provied <DirectionLight/> and <AmbientLight/> light components - other components will be provided in the future.

Usage

Get react-3d-viewer through npm or cdn:

npm i react-3d-viewer

• https://unpkg.com/[email protected]/dist/scripts/react-3d-viewer.js

Work with module bundler

import {OBJModel} from 'react-3d-viewer'

render(){
  return(
    <div>
      <OBJModel src="./a.obj" texPath=""/>
    </div>
  )
}

import {Tick,MTLModel} from 'react-3d-viewer'

render(){
  return(
    <div>
     <MTLModel 
        enableZoom = {false}
        position={{x:0,y:-100,z:0}}
        rotation={this.state.rotation}
        texPath="./src/lib/model/"
        mtl="./src/lib/model/freedom.mtl"
        src="./src/lib/model/freedom.obj"
     />
    </div>
  )
}
componentWillMount(){
    this.tick.animate = false
}
componentDidMount(){
  this.tick = Tick(()=>{
    var {rotation} = this.state
    rotation.y += 0.005
    this.setState({rotation})

  })
}

import {DAEModel,DirectionLight } from 'react-3d-viewer'

render(){
  return(
    <div>
     <DAEModel 
        src={'./src/lib/model/Ruins_dae.dae'}
        onLoad={()=>{
          // ...
        }}
      >
        <DirectionLight color={0xff00ff}/>
      </DAEModel>
    </div>
  )
}
 

HTML

<script src="https://unpkg.com/[email protected]/dist/scripts/react-3d-viewer.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<div id="example"></div>
<script >
  // It's not recommended to use this way.
  ReactDOM.render(
    React.createElement('div',{ style: { width: 600, margin: '0px auto' } },
    React.createElement(React3DViewer.JSONModel, {
      src:'./src/lib/model/kapool.js'
    })
  )
  ,document.getElementById('example'));
</script>

To view a demo,click here.

Properties

How it works

The <FormatModel> creates a camera, scene, light source and a WebGL renderer.The DOM returned by the renderer (a <canvas> element) is added to the document and configured to fill the viewport. Scene is rendered in real time. In the componentDidUpdate method, the changes of props are detected and the attributes of objects are changed.

License

MIT