开发语言 ecmascript vue.js typescript 前端 vue3.0+three.js 光源的设置不生效的问题

在做开发时，遇到了设置光源但是不生效的问题。

经过查资料发现我设置的材质为MeshBasicMaterial基本材质，不接收光源。

解决办法：需要设置为MeshLambertMaterial，并将mesh设置为可接受光和阴影。

代码如下：

1、设置光源

// 环境光

light = new THREE.AmbientLight(0xffffff);

light.position.set(0, 0, 0);

scene.add(light);

// 点光源

light2 = new THREE.PointLight(0xffffff, 1);

light2.position.set(0, 350, 100);

light2.castShadow = true;//表示这个光是可以产生阴影的

light2.shadow.camera.near = 1;

light2.shadow.camera.far = 5000;

scene.add(light2);

2、设置模型

let geometry = new THREE.BoxGeometry(2000, 30, 1600);

// const material1 = new THREE.MeshBasicMaterial({ color: 0x64B5D6 });

// 将MeshBasicMaterial修改为MeshLambertMaterial

const material1 = new THREE.MeshLambertMaterial({ color: 0x64B5D6 });

const material2 = new THREE.MeshLambertMaterial({ map: texture1, side: THREE.DoubleSide, color: 0xCED0D1 });

// 左右上下前后

let materialArry = [material1, material1, material2, material1, material1, material1];

const mesh = new THREE.Mesh(geometry, materialArry);

mesh.castShadow = true; // cast投射，方块投射阴影

mesh.receiveShadow = true; // 物体接收阴影

scene.add(mesh);

这样设置以后，设置的模型就会有阴影效果和光源了。

精彩链接

评论可见，请评论后查看内容，谢谢！！！

您阅读本篇文章共花了：

金钥匙