react-3d-viewer-bg v1.0.4

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/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 >
  // 别这么做。。。
  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，这儿

属性

如何工作的

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

License

MIT