ThreeJS教程：工厂(模拟太阳光阴影)
推荐：将NSDT场景编辑器加入你的3D工具链
3D工具集：NSDT简石数字孪生
工厂(模拟太阳光阴影)
真实生活中物体在太阳光下往往是有影子的，在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;