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是一个数组)文章来源：https://www.toymoban.com/news/detail-689636.html
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,
}
],
}
}然后看一下模型是不是变亮了呢。文章来源地址https://www.toymoban.com/news/detail-689636.html
到了这里，关于vue-3d-model设置的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
