工厂(模拟太阳光阴影)

真实生活中物体在太阳光下往往是有影子的，在threejs你可以通过平行光阴影模拟太阳光阴影。

工厂设置平行光阴影

首先你可以先回顾一下前面讲解的11.2 平行光阴影计算，设置工厂3D场景的平行光阴影流程是一样的。

和前面设置一样，允许光源和渲染器光源投影计算。

directionalLight.castShadow = true;
renderer.shadowMap.enabled = true; 

• .castShadow设置产生阴影的模型对象
• .receiveShadow设置接收阴影效果的模型

实际生活中所有物体都可以产生阴影，同时所有物体都可以接收其它物体的阴影，所以所有Mesh都批量设置.castShadow和.receiveShadow属性。

//递归遍历场景，允许所有Mesh产生投影、接收投影
gltf.scene.traverse(function (obj) {
    if (obj.isMesh) { //判断是否是网格模型
        // 批量设置所有Mesh都可以产生阴影和接收阴影
        obj.castShadow = true;
        obj.receiveShadow = true;
    }
});

设置工厂阴影范围

首先要明确工厂需要阴影计算的尺寸范围，课件源码中提供的工厂尺寸量级大概是100左右，然后根据工厂尺寸量级设置光源阴影范围参数.shadow.camera。

可以先根据工厂尺寸，预先设置.shadow.camera，然后再具体调试参数。

// 设置三维场景计算阴影的范围
directionalLight.shadow.camera.left = -100;
directionalLight.shadow.camera.right = 100;
directionalLight.shadow.camera.top = 100;
directionalLight.shadow.camera.bottom = -100;
directionalLight.shadow.camera.near = 0.5;
directionalLight.shadow.camera.far = 100;

CameraHelper辅助调试参数

// 可视化平行光阴影对应的正投影相机对象
const cameraHelper = new THREE.CameraHelper(directionalLight.shadow.camera);
scene.add(cameraHelper);

阴影条纹问题解决.shadowMap.type

WebGL的渲染器的阴影贴图属性.shadowMap的属性值是一个对象，.shadowMap具有.enabled、.type等属性。

模型表面产生条纹影响渲染效果，可以改变.shadowMap.type默认值优化

// 模型表面产生条纹影响渲染效果，可以改变.shadowMap.type默认值优化
renderer.shadowMap.type = THREE.VSMShadowMap; 

阴影像素.shadow.mapSize

// 如果阴影边缘锯齿感的时候，可以适当提升像素
directionalLight.shadow.mapSize.set(1024,1024);

阴影边缘弱化.shadow.radius

// 模糊弱化阴影边缘
directionalLight.shadow.radius = 3;