Graphics Reference
In-Depth Information
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 provided by
THREE.SpotLight
.
How to do it...
To create a shadow with
THREE.SpotLight
, we need to set a couple of properties,
which define the area where shadows are created:
