javascript - 如何在Three.JS中创建定向光阴影？

Question

是否可以从DirectionalLight创建阴影？

如果我使用SpotLight，那么我会看到阴影，但如果我使用DirectionalLight，它就不起作用。

Answer 1

请注意，阴影贴图与比例相关。我正在处理一个单位距离代表一米的场景，而我的对象大约有 0.4 米大。按照 Three.js 标准来看，这个值相当小。如果您也遇到这种情况，那么您可以采取一些重要步骤:

• 根据场景尺寸，确保阴影相机的近/远平面合理。
• 确保阴影相机的上/左/下/右值不要太大，否则每个阴影“像素”可能太大，以至于您甚至不会注意到场景中的阴影。

让我们看看如何做到这一点。

调试

请务必通过 CameraHelper 打开每个灯光的调试渲染:

scene.add(new THREE.CameraHelper(camera)) 

或者在旧版本的 Three.js 中:

light.shadowCameraVisible = true;

这将显示正在计算阴影的体积。下面是一个示例:

注意近平面和远平面(带有黑色十字)，以及阴影相机的顶部/左侧/底部/右侧(黄色框的外壁)。您希望该框紧紧围绕您要移动的任何物体处于阴影中 - 可能比我在这里展示的还要紧。

代码

以下是一些可能有用的代码片段。

var light = new THREE.DirectionalLight(0xffffff);
light.position.set(0, 2, 2);
light.target.position.set(0, 0, 0);
light.castShadow = true;
light.shadowDarkness = 0.5;
light.shadowCameraVisible = true; // only for debugging
// these six values define the boundaries of the yellow box seen above
light.shadowCameraNear = 2;
light.shadowCameraFar = 5;
light.shadowCameraLeft = -0.5;
light.shadowCameraRight = 0.5;
light.shadowCameraTop = 0.5;
light.shadowCameraBottom = -0.5;
scene.add(light);

确保某些对象转换阴影:

object.castShadow = true;

确保某些对象接收阴影:

object.receiveShadow = true;

最后，在 WebGLRenderer 上配置一些值:

renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(canvasWidth, canvasHeight);
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;