Chapter 825: Lights (Manual)

Core Idea

A practical tour of three.js's light types — AmbientLight, HemisphereLight, DirectionalLight, PointLight, and SpotLight — showing what each one visually contributes and how to debug them with helper objects.

Key Concepts

• AmbientLight: uniformly multiplies every material's color by the light's color × intensity; has no direction, so surfaces stay flat with no shading definition — useful mainly for keeping shadows from going pure black.
• HemisphereLight: blends a sky color and a ground color based on whether a surface faces up or down; still fairly flat on its own, best combined with another light as a substitute for plain ambient light.
• DirectionalLight: shines parallel rays in one direction (like the sun), defined by a light position and a target it points toward — both must be added to the scene; visualized with DirectionalLightHelper.
• PointLight: radiates in all directions from a single point; has a distance property (0 = infinite range, otherwise light fades to zero influence at that distance); visualized with PointLightHelper.
• SpotLight: a point light constrained to a cone aimed at a target, with an inner and outer cone — light fades from full intensity to zero between them.

Code Examples

const material = new THREE.MeshStandardMaterial({ color: "#8AC" });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

• What it demonstrates: using a lighting-aware material (MeshStandardMaterial) so objects actually respond to the lights being demonstrated — an unlit material like MeshBasicMaterial would show no lighting effect at all.

Key Takeaways

1. AmbientLight and HemisphereLight are both directionless and look flat on their own — treat them as fill light, combined with a directional/point/spot light for real shading definition.
2. DirectionalLight and SpotLight both need a target object added to the scene to define the direction they shine in.
3. PointLight's distance property controls falloff range; 0 means the light has effectively infinite range.
4. Light helper objects (DirectionalLightHelper, PointLightHelper, etc.) visualize an otherwise-invisible light's position/direction/cone and are invaluable while tuning a scene.
5. Remember to use a lit material (e.g. MeshStandardMaterial, MeshPhongMaterial) on objects you want to actually show lighting — MeshBasicMaterial ignores all lights.

Connects To

• OrbitControls: used throughout this lesson to orbit the camera around the lit scene.
• DirectionalLightHelper / PointLight: the helper and light classes used directly in the examples here.