Graphics Reference
In-Depth Information
The first property,
castShadow
, tells Three.js that this light casts shadows.
As casting shadows is an expensive operation, we need to define the area
where shadows can appear. This is done with the
shadowCameraNear
,
shadowCameraFar
, and
shadowCameraFov
properties.
5. Three.js uses something called a shadow map to render the shadows. If your
shadow looks a bit blocky around its edges, it means the shadow map is too
small. To increase the shadow map size, set the following properties:
spotLight.shadowMapHeight = 2048;
spotLight.shadowMapWidth = 2048;
Alternatively, you can also try to change the
shadowMapType
property of
THREE.WebGLRenderer
. You can set this to
THREE.BasicShadowMap
,
THREE.PCFShadowMap
, or
THREE.PCSSoftShadowMap
.
6. The last step is to add
THREE.SpotLight
to the scene:
scene.add(spotLight);
Determining the correct properties for the various
THREE.SpotLight
properties
can be difficult. In the following section, we'll explain a bit more how the various prop-
erties affect the area where shadows are rendered.
How it works...
When you want to use
THREE.SpotLight
as a light source that can cast shadows,
Three.js needs to know the area that will be affected by these shadows. You
can compare this with the arguments you use to configure
THREE.PerspectiveCamera
. So, what you do with the
shadowCameraNear
,
shadowCameraFar
, and
shadowCameraFov
properties is define where Three.js
should render shadows. Determining the correct values for these properties can be
a bit difficult, but luckily, Three.js can visualize this area. If you set the
shadowCam-
eraVisible
property of
THREE.SpotLight
to
true
, Three.js will show you the
affected area, as shown in the following screenshot:
