Lighting & Real Shadows
Light & surfaces
Lesson 5 of 15
Connect a shadow-casting light, a casting mesh, and a receiving floor.
Move a directional light around a torus knot and inspect its real shadow on a matte floor.
How this scene works
Shadows require three switches: renderer.shadowMap.enabled, light.castShadow, and the relevant mesh castShadow/receiveShadow flags. The light's shadow camera must enclose the objects and floor; a tighter volume uses the shadow texture more efficiently. Ambient light fills dark areas but never casts shadows. The floor here is an opaque standard material, not a decorative shadow image. A small normalBias reduces self-shadow artifacts.
Lighting & Real Shadows
Helper snippet · Three.js 0.183.1 · WebGL
Loading draft
1 files · local only
Drag to orbit, scroll to zoom, right-drag to pan.
Make it your own
Freeze the light by removing its frame callback. Lower the light's height and observe the longer shadow. Then reduce the shadow map from 1024 to 256 to see the quality tradeoff.
Change one thing, run the scene, and compare. Pause animation to inspect the result; reset the example to return to its original code and files.
