react-3d-viewer

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="./a.obj" texPath=""/>
    </div>
  )
}

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

render(){
  return(
    <div>
     <MTLModel 
        enableZoom = {false}
        position=
        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/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

Property | Type | Default | Description :———————–|:————–|:————–|:——————————– width | number | 500 | The width of container height | number | 500 | The height of container texPath | string | ‘’ | Set the base path for the img file onLoad | function | undefined | A function to be called after the loading is successfully completed onProgress | function | undefined | A function to be called while the loading is in progress enableKeys | boolen | true | Enable or disable the use of keyboard controls enableRotate | boolen | true | Enable or disable horizontal and vertical rotation of the camera enableZoom | boolen | true | Enable or disable zooming of the camera enabled | boolen | true | Whether or not the controls are enabled src | string | undefined | The path of the file mtl | string | undefined | The path of the .mtl file anitialias | boolen | true | Whether to perform antialiasing position | object | {x:0,y:0,z:0} | Object’s position rotation | object | {x:0,y:0,z:0} | Object’s rotation

License

MIT