Game Development Reference
In-Depth Information
We set the light to cast a shadow and set how dark we want it to be. The darkness
usually ranges from
0
(no shadows) to
1
(dark shadows), but it can have other
values; values below
0
will cause a sort of anti-shadow, where objects that
would be in shadow are instead illuminated, and values higher than
1
will make
shadows appear very black. Then we set the resolution of our shadows with the
shadowMapWidth
and
shadowMapHeight
properties, which affect the crispness of
shadows' edges; higher values look sharper but are more computationally expensive.
Next, we describe the
shadow camera
that will be used to project the shadows. In
fact, when it comes to shadows, the
DirectionalLight
and
PointLight
objects are
analogous to the
OrthographicCamera
and
PerspectiveCamera
objects in that the
former uses parallel projection while the latter uses perspective projection. Therefore,
to set up our camera, we move the light to a point that is far enough away to be
able to
see
everything we want to have a shadow. Then we describe the shape of
the frustum with the
shadowCamera
properties; the left, right, top, or bottom values
are the lengths of the corresponding sides of the end of the frustum, and the
Far
value is the distance to the end of the frustum. (Recall from
Chapter 1
,
Hello, Three.js
,
that a frustum is a shape encompassing what a camera can
see
.) If this is difficult to
visualize, you can display the frustum like this:
light.shadowCameraVisible = true;
The result is a wireframe shape representing the shadow projection, shown in the
next screenshot:
A shadow camera