如何调整THREE.js中DirectionalLight的阴影范围以投射更大阴影？

嘿，我完全懂你遇到的这个困扰！DirectionalLight的阴影确实容易因为内置正交相机的范围太小，导致只有局部区域能正常投射阴影。下面是具体的解决思路和操作步骤：

核心：调整阴影正交相机的覆盖范围 #

DirectionalLight的阴影计算依赖于内置的正交相机，这个相机的视野边界直接决定了哪些区域能产生阴影。你需要把这些边界值调大，确保能完全包裹你的大型3D模型和上方的投影平面：

步骤1：修改阴影相机的边界参数 #

找到你的DirectionalLight实例，调整它的shadow.camera属性：

// 假设你已经创建了directionalLight实例
directionalLight.castShadow = true; // 务必开启灯光的阴影投射功能

// 根据你的模型实际尺寸调整这些数值，要能完全覆盖模型和上方平面
directionalLight.shadow.camera.left = -300;   // 左边界
directionalLight.shadow.camera.right = 300;  // 右边界
directionalLight.shadow.camera.top = 300;    // 上边界
directionalLight.shadow.camera.bottom = -300;// 下边界
directionalLight.shadow.camera.near = 1;     // 近裁剪面（避免裁剪掉近处的平面）
directionalLight.shadow.camera.far = 500;    // 远裁剪面（要覆盖模型底部）

// 必须更新投影矩阵，才能让新的参数生效
directionalLight.shadow.camera.updateProjectionMatrix();

步骤2：可视化相机范围（方便精准调试） #

你可以用CameraHelper直观看到阴影相机的范围，这样调整参数时能更清晰地判断是否覆盖了目标区域：

const shadowCamHelper = new THREE.CameraHelper(directionalLight.shadow.camera);
scene.add(shadowCamHelper);

调整参数时，你会看到辅助框的大小变化，直到它完全包裹你的模型和上方平面为止。

额外注意事项 #

• 确保阴影属性正确配置：上方的平面需要设置planeMesh.castShadow = true（允许平面投射阴影），你的3D模型需要设置modelMesh.receiveShadow = true（允许模型接收阴影）；如果模型本身也要投射阴影，记得同时开启modelMesh.castShadow = true。
• 优化阴影质量（可选）：如果阴影看起来模糊，可以增大阴影贴图的尺寸，但会带来一定性能开销：

  directionalLight.shadow.mapSize.set(2048, 2048); // 默认是512x512，数值越大阴影越清晰
  

• 确认灯光方向：DirectionalLight的照射方向是从它的position指向原点，所以如果你的模型在原点附近，把灯光放在(0, 100, 0)这类位置就是向下照射，符合你的需求。

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