Creating shadows with THREE.DirectionalLight

With THREE.DirectionalLight, you can simulate a light source from far away whose rays run parallel to each other. A good example of this is light received from the sun. In this recipe, we'll show you how to create THREE.DirectionalLight and use it to create shadows.

Getting ready

For this recipe, we've created an example that shows you what the shadows cast by a THREE.DirectionalLight object look like. Open up the 05.02-using-shadows-with-a-directionalLight.html example in your browser, and you'll see something like what is shown in the following screenshot:

In this screenshot, a single THREE.DirectionalLight object provides the shadows and lighting.

How to do it...

Using THREE.DirectionLight as a shadow only takes a couple of steps:

1. The first thing we need to do to enable any kind of shadow is set shadowMapEnabled on THREE.WebGLRenderer to true:

     renderer.shadowMapEnabled = true;

2. Next, we inform Three.js which of our objects should receive...