Creating shadows with THREE.SpotLight

Three.js offers many different types of lights you can use in your scenes. A couple of these lights also allow you to add shadows to the scene. When you use THREE.SpotLight or a THREE.DirectionalLight object, you can let Three.js add shadows based on the position of the lights. In this recipe, we'll show you how to do this with THREE.SpotLight.

Getting ready

For this recipe, you don't need any external dependencies. Three.js includes all the available lights directly in the main Three.js JavaScript library. We've created a simple example that you can use to see how shadows work in combination with THREE.SpotLight in Three.js. You can view this example by opening 05.01-using-shadows-with-a-spotLight.html in your browser. You will see something similar to the following screenshot:

In this scene, you can see that we've added two meshes to the scene, both of which cast a shadow on the floor. From this example, you can also directly see...