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

Question

是否可以从 a 中创建阴影DirectionalLight？

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

Answer 1

Be aware that shadow maps are scale dependent. I'm working on a scene where the unit distance represents one metre, and my objects are around 0.4 metres large. This is quite small by Three.js standards. If you have this situation too, then you can take a few important steps:

• Ensure the shadow camera's near/far planes are reasonable given your scene's dimensions.
• Ensure the shadow camera top/left/bottom/right values are not too large, otherwise each shadow 'pixel' may be so large that you don't even notice the shadow in your scene.

Let's look at how to do this.

Debugging

Be sure to turn on the debug rendering per light via CameraHelper:

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

Or in older versions of the Three.js:

light.shadowCameraVisible = true;

This will show you the volume over which the shadow is being calculated. Here is an example of what that might look like:

Notice the near and far planes (with black crosses), and the top/left/bottom/right of the shadow camera (outer walls of the yellow box.) You want this box to be tight around whatever objects you are going to have in shadow — possibly even tighter than I'm showing here.

Code

Here are some snippets of code that might be useful.

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);

Make sure some object(s) cast shadows:

object.castShadow = true;

Make sure some object(s) receive shadows:

object.receiveShadow = true;

Finally, configure some values on the WebGLRenderer:

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

Answer 2

是的，您绝对可以使用定向灯来投射阴影。您需要确保您没有使用MeshBasicMaterial它们，因为它们不支持阴影。使用MeshLambertMaterial或MeshPhongMaterial代替。

您需要通过以下方式为渲染器启用阴影：

renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;

renderer.shadowCameraNear = 3;
renderer.shadowCameraFar = camera.far;
renderer.shadowCameraFov = 50;

renderer.shadowMapBias = 0.0039;
renderer.shadowMapDarkness = 0.5;
renderer.shadowMapWidth = 1024;
renderer.shadowMapHeight = 1024;

然后您必须为每个对象和每个灯光启用阴影投射和阴影接收，这样您就可以拥有

dirLight.castShadow = true;
object.castShadow = true;
otherObject.receiveShadow = true;

然后，如果将灯光和物体放置在适当的位置。dirLight会造成的阴影object被投反对otherObject。

[编辑]：这是一个适用于任何想要做类似事情的人的工作演示。