Graphics Reference
In-Depth Information
6. Three.js uses two additional properties to determine the detail of the
rendered shadow:
shadowMapWidth
and
shadowMapHeight
. If your shad-
ows look a bit rough or blocky, you should increase the values like this:
directionalLight.shadowMapWidth = 2048;
directionalLight.shadowMapHeight = 2048;
7. After all these properties have been set, you can add the light source to the
scene:
scene.add(directionalLight);
As you can see from these steps it is a little complicated to correctly configure
THREE.DirectionalLight
. Determining the correct values can be difficult. In the
next section, we'll explain a bit more what these properties do and how you can de-
termine their optimal values for your scene.
How it works...
If you look back to the
Using an orthographic camera
recipe in
Chapter 3
,
Working
with the Camera
, you'll notice that the camera uses the same properties as
THREE.DirectionalLight
. Both these objects define a bounding box that is
rendered in the case of
THREE.OrthographicCamera
and is used to determine
where to render shadows in the case of
THREE.DirectionalLight
. With
shad-
owCameraNear
,
shadowCameraFar
,
shadowCameraLeft
,
shadowCamer-
aRight
,
shadowCameraTop
, and
shadowCameraBottom
, you define this area.
You can set an additional property on
THREE.DirectionalLight
to visualize the
affected area. If you set
directionalLight.shadowCameraVisible
to
true
,
Three.js will draw the box defined by the
shadowCameraXXX
properties. The follow-
ing screenshot shows you the result of enabling the
shadowCameraVisible
prop-
erty:
