vue-3d-model设置

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,
            }
        ],
    }
}

然后看一下模型是不是变亮了呢。