/react-3d-viewer

A 3D model viewer component based on react.js 一个基于react.js的组件化3d模型查看工具

Primary LanguageJavaScript

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

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/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