How to create directional light shadow in Three.JS?

Question

Is it possible to create shadows from a DirectionalLight?

If I use SpotLight then I see a shadow, but if I use DirectionalLight

Answer 1

Yes, you most definitely can use directional lights to cast shadows. You need to make sure you are not using MeshBasicMaterial as they don't support shadows. Use MeshLambertMaterial or MeshPhongMaterial instead.

You need to enable shadows for the renderer with something along these lines:

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;

And then you must enable shadow casting and shadow receiving per object and per light so you would have

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

Then, if the light and objects are placed at appropriate positions. dirLight will cause the shadow of object to be cast against otherObject.

[EDIT]: Here is a working demo for anyone looking to do something similar.