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/react-3d-viewer@latest/dist/scripts/react-3d-viewer.js

Work with module bundler

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

render(){
  return(
    <div>
      <OBJModel src="https://github.com/dwqdaiwenqi/react-3d-viewer/raw/master/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="https://github.com/dwqdaiwenqi/react-3d-viewer/raw/master/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/react-3d-viewer@latest/dist/scripts/react-3d-viewer.js"></script>
<script src="https://unpkg.com/react@16.4.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.4.1/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

License

MIT