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);

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