English | 简体中文

react-3d-viewer

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

特征

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

使用

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

npm i react-3d-viewer

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

Commonjs

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/[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 >
  // 别这么做。。。
  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 | 容器高 | | texPath | string | '' | 设置图片的路径 | onLoad | function | undefined | 函数加载完成后调用 | onProgress | function | undefined | 函数加载过程中调用 | | enableKeys | boolen | true | 启用或不启用键盘控制 | | enableRotate | boolen | true | 启用或不启用相机的水平和垂直方向旋转 | | enableZoom | boolen | true | 启用或不启用相机的缩放 | | 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