English | 简体中文

react-3d-viewer 

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

特征

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

使用

从npm或cdn上获取react-3d-viewer
``js
npm i react-3d-viewer
`
* https://unpkg.com/react-3d-viewer@latest/dist/scripts/react-3d-viewer.js

$3

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

render(){
return(

)
}
`

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

render(){
return(

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

)
}
componentWillMount(){
this.tick.animate = false
}
componentDidMount(){
this.tick = Tick(()=>{
var {rotation} = this.state
rotation.y += 0.005
this.setState({rotation})

})
}
`

`js
import {DAEModel,DirectionLight } from 'react-3d-viewer'

render(){
return(

src={'./src/lib/model/Ruins_dae.dae'}
onLoad={()=>{
// ...
}}
>

)
}

`

$3

`html

`

更多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} | 对象的旋转 |

如何工作的

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

License

MIT