VUE2+THREE.JS模型阴影设定

如何让物体产生阴影效果呢？

1.场景中所有的物体都必须是感光材质（MeshLambertMaterial），然后是光源的设定，支持阴影的光源有pointLight，spotlight，directionallight，环境光AmbientLight是无法产生阴影的。

2.设定模型阴影,要考虑哪些物体要产生阴影,哪些物体要接收阴影

例如:你有一个模型,需要地板接收阴影,地板上的设备要产生阴影

1.渲染器中启动阴影

renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.hadowMapEnabled = true;

2.用太阳光设定阴影属性

//增加太阳光
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.name = "directionalLight";
directionalLight.position.set(8000, 8000, -2000);
scene.add(directionalLight);
// shadowmap的区域，值越大阴影质量越好
directionalLight.castShadow = true;
directionalLight.shadow.mapSize.width = 2048;
directionalLight.shadow.mapSize.height = 2048;
const cam = directionalLight.shadow.camera;
// 方向光投影近点、远点更新
cam.near = 1000;
cam.far = 40000;
// 方向光投影边界更新
cam.top = 8000;
cam.bottom = -8000;
cam.left = -8000;
cam.right = 8000;

可以使用光投影相机辅助线,来查看相机照射范围CameraHelper

//光投影相机
 const cameraHelper = new THREE.CameraHelper(cam);
 scene.add(cameraHelper);
 cameraHelper.visible = true;

3.地板接收阴影,其余的产生阴影

 var loader = new FBXLoader()
    loader.load(`three/${path}.fbx`, (fbx) => {
      const receiveModel = ['地板'];
      fbx.traverse((obj) => {
        //阴影
        if (receiveModel.includes(obj.name)) {
          obj.receiveShadow = true;//接收阴影
        } else {
          obj.castShadow = true;//产生阴影
          obj.receiveShadow = false;//接收阴影
        }
      });
    },
})