Three.js修改平行光阴影相机参数后阴影模糊问题解决方法

这个问题其实很常见——当你把平行光阴影相机的视锥体范围（left/right/top/bottom）拉得这么大时，阴影贴图的像素密度被摊薄了，原本的默认分辨率不足以覆盖这么大的区域，自然就变得模糊不清。我来给你几个实用的解决办法：

• 提高阴影贴图分辨率
  平行光阴影默认的贴图分辨率是512x512，当视锥体范围大幅扩大后，这个分辨率就不够用了。你可以通过调整directionalLight.shadow.mapSize来提升分辨率，比如设置为2048x2048或者4096x4096：

  directionalLight.shadow.mapSize.width = 2048;
  directionalLight.shadow.mapSize.height = 2048;
  

  注意：分辨率越高，性能消耗越大，要根据你的场景需求和设备性能平衡调整。

• 优化阴影相机的Near/Far参数
  除了调整左右上下范围，你还需要确保阴影相机的near和far参数刚好覆盖需要投射阴影的区域，不要设置得过大。这样能让阴影贴图的像素更集中在有效区域，避免浪费像素在不需要阴影的空间：

  directionalLight.shadow.camera.near = 0.5; // 根据场景最小深度调整
  directionalLight.shadow.camera.far = 100; // 根据场景最大深度调整
  directionalLight.shadow.camera.updateProjectionMatrix(); // 记得更新投影矩阵
  

• 启用软阴影并调整阴影偏移
  如果单纯提高分辨率后还是有生硬的模糊感，可以启用PCF软阴影让阴影边缘更自然，同时调整bias参数避免阴影出现“阴影 acne”（表面失真）：

  // 设置渲染器使用软阴影
  renderer.shadowMap.type = THREE.PCFSoftShadowMap;
  // 调整阴影偏移，数值根据场景微调
  directionalLight.shadow.bias = -0.0001;
  

把这些步骤结合起来，你的阴影应该就能恢复清晰且自然的效果了。

内容的提问来源于stack exchange，提问作者Jesse Luo