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 the distinct light shape...