react-3d-viewer

English | 简体中文

react-3d-viewer

一个基于react.js的组件化3d模型查看工具. Demo请戳 http://dwqdaiwenqi.github.io/react-3d-viewer/site/

特征

• 组件化的
• .setState()方法更新UI
• 支持 gltf、obj、mtl、json、dae 模型格式 - 其他格式以后支持
• 提供 <DirectionLight/> and <AmbientLight/> 组件 - 其他灯光组件以后提供

---

使用

从npm或cdn上获取react-3d-viewer

npm i react-3d-viewer

• https://unpkg.com/react-3d-viewer@latest/dist/scripts/main.js

Commonjs

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

render(){
  return(
    <div>
      <OBJModel src="./a.obj"/>
    </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}
        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})

  })
}

HTML

<script src="https://unpkg.com/react-3d-viewer@latest/dist/scripts/main.js"></script>
<script src="https://unpkg.com/react@latest/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.production.min.js"></script>
<div id="example"></div>
<script >
  // 别这么做。。。
  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>

更多Demo，这儿

属性

属性名	类型	默认值	描述
width	number	500	容器宽
height	number	500	容器高
onLoad	function	undefined	函数加载完成后调用
onProgress	function	undefined	函数加载过程中调用
enableKeys	boolen	true	启用或不启用键盘控制
enableRotate	boolen	true	启用或不启用相机的水平和垂直方向旋转
enableZoom	boolen	true	Enable or disable zooming (dollying) of the camera
enabled	boolen	true	是否启用控制
src	string	undefined	文件的路径
mtl	string	undefined	.mtl文件的路径
anitialias	boolen	true	是否启用抗锯齿
position	object	{x:0,y:0,z:0}	对象的坐标
rotation	object	{x:0,y:0,z:0}	对象的旋转

如何工作的

<FormatModel>组件创建了相机、场景、灯光和WebGL渲染器。它往文档中添加了一个填满了视口的DOM节点(<canvas>元素)。 内部scene是实时渲染的，在componentDidUpdate中检测props，改变对象的属性。

License

MIT