Lighting & Shadows

Lesson 3

Good lighting makes the difference between a toy demo and a polished scene. A three-point rig — key, fill, rim — works as well in 3D as in photography.

Three-Point Light Rig

// Key light: main illumination
const keyLight = new THREE.DirectionalLight(0xffffff, 2);
keyLight.position.set(2, 4, 3);
scene.add(keyLight);

// Fill light: soften shadows
const fillLight = new THREE.DirectionalLight(0x8888ff, 0.5);
fillLight.position.set(-3, 1, 2);
scene.add(fillLight);

// Rim light: edge definition
const rimLight = new THREE.DirectionalLight(0xffffff, 1);
rimLight.position.set(0, 3, -4);
scene.add(rimLight);

// Ambient: baseline brightness
scene.add(new THREE.AmbientLight(0xffffff, 0.2));

Shadows

renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;

keyLight.castShadow = true;
mesh.castShadow = true;

// A plane to receive shadows
const floor = new THREE.Mesh(
  new THREE.PlaneGeometry(10, 10),
  new THREE.ShadowMaterial({ opacity: 0.3 })
);
floor.rotation.x = -Math.PI / 2;
floor.position.y = -1;
floor.receiveShadow = true;
scene.add(floor);

What to Experiment With

  • Raise/lower key light intensity
  • Change fill light color to warm (0xffaa44) for sunset feel
  • Try SpotLight instead of DirectionalLight for theatrical focus