3d渲染逐渐进入到产品中,最近用到了一款vue的3d渲染组件——vue-3d-model。
根据官方文档引入成功之后,发现我的3d模型一面是亮的,另一面是黑的。由于没有设置灯光,导致模型渲染出来比较暗。下面看具体操作
vue模板:(这里以obj模型为例,主要是那个lights属性)
<div class="img-box">
<model-obj @on-load="onLoad" :lights="lights" v-if="sample.file3d!=null" :src="sample.file3d" :mtl="sample.fileMtl"></model-obj>
</div>
js:(注意这里定义的lights是一个数组)
data () {
return {
lights: [//3d模型灯光
{
type: 'HemisphereLight',
position: { x: 0, y: 1, z: 0 },
skyColor: 0xffffff,
// groundColor: 0xFF0000, 此代码为灯光后颜色
intensity: 1,
},
{
type: 'DirectionalLight',
position: {x: 1, y: 1, z: 1},
color: 0xffffff,
intensity: 0.8,
}
],
}
}
然后看一下模型是不是变亮了呢。