Three.js大场景动态添加DirectionalLight实现稳定清晰阴影问题咨询

问题根因 #

阴影随光源新增变淡甚至消失的根因是多个全场景覆盖的同强度方向光互相抵消了阴影效果：ThreeJS的阴影逻辑是标记光源照射路径上被遮挡的区域为阴影，从多个方向同时打光时，物体的阴影区域会被其他方向的光源照亮，自然会出现阴影浓度下降、最终完全消失的问题。将单光源强度降到0.5后阴影过淡，也是因为每个光源的阴影贡献随强度同步减半导致的。

原本的「多光源叠加保证阴影清晰」的方案逻辑上不成立，推荐改用以下适配大场景动态扩展的落地方案：

可行实现方案 #

方案1：使用级联阴影映射（CSM） #

这是大场景方向光阴影的官方最优解，ThreeJS已提供现成的CSM扩展支持：

• 原理是将相机视锥体按距离拆分为近、中、远多个层级，每层使用独立分辨率的阴影贴图，近处层级用高分辨率保证阴影清晰，远处层级用低分辨率兼顾性能
• 无需手动管理多光源，只需配置层级数量、单层级阴影贴图大小、总覆盖范围即可自动适配动态扩大的场景，阴影浓度和单光源效果完全一致，不会出现抵消问题

方案2：动态更新单光源阴影参数 #

仅保留单个DirectionalLight，每次场景新增对象时同步更新光源的阴影覆盖范围：

1. 实时计算所有需要投射/接收阴影的对象的总包围盒
2. 用包围盒的边界值更新directionalLight.shadow.camera的left/right/top/bottom/near/far参数
3. 调用directionalLight.shadow.camera.updateProjectionMatrix()使配置生效

• 可以根据包围盒的尺寸动态调整阴影贴图分辨率，在性能允许范围内保证阴影清晰度，完全避免多光源带来的冲突问题

方案3：多光源分区域非重叠覆盖 #

如果一定要用多光源方案，必须避免不同光源的照射范围重叠：

• 将大场景按坐标拆分为多个互不重叠的子区域，每个方向光的shadow.camera仅覆盖对应子区域
• 配合THREE.Layers控制每个对象仅受所属子区域的光源影响，从根源上避免多光源照亮阴影区域的问题，同时每个子区域的阴影都可以保持最优分辨率

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