Shadows

As mentioned in the chapter about lights, some light sources are able to cast shadows.

To enable shadows in your Three.js scene, setup the renderer to use shadow maps:

renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap

Lights that have a direction are able to cast shadows. To enable shadow casting for a light source, set:

light.castShadow = true;

Additionally, for the meshes that should receive shadows, set:

plane.receiveShadow = true;

For best performance, a common practice is to use only one lights with shadow-casting enabled. An alternative approach is to use fake shadows, as described in the ThreeJS fundamentals article on shadows (see below).

Check out this demo on CodePen

• Chapter on ThreeJS fundamentals
• DirectionalLightShadow
• PointLightShadow