Is it possible to create shadows from a DirectionalLight
?
If I use SpotLight
then I see a shadow, but if I use DirectionalLight
it doesn't work.
Is it possible to create shadows from a DirectionalLight
?
If I use SpotLight
then I see a shadow, but if I use DirectionalLight
it doesn't work.
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:
Let's look at how to do this.
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.
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;