Three.js Lighting: A Practical Guide

• AmbientLight: uniform light from every direction, no shadows, no direction. Cheap and flat; use it as a fill light so shadowed areas aren't pure black, not as a primary source.
• DirectionalLight: parallel rays, like the sun. The standard choice for outdoor scenes and the most common "key light"; it's the one that casts real shadows via castShadow.
• HemisphereLight: a gradient between a sky color and a ground color, no shadows. A cheap, very effective substitute for full ambient occlusion in outdoor scenes; it reads as "sky bounce light" for almost no cost.
• PointLight: radiates in all directions from a point, like a bare bulb. Falls off with distance (decay). Good for lamps, torches, small local sources.
• SpotLight: a cone of light from a point, with angle and penumbra for the cone's softness. Flashlights, stage lighting, car headlights.
• RectAreaLight: a rectangular area light, like a softbox or a window. Physically the most correct-looking for product shots, but only works with MeshStandardMaterial/MeshPhysicalMaterial and does not cast shadows.

Borrow the photography "three-point lighting" idea:

1. Key light: a DirectionalLight at moderate intensity, angled from above and to one side. This is the light that casts shadows.
2. Fill light: a dim AmbientLight or a second DirectionalLight from the opposite side at low intensity, so shadow areas aren't pure black without washing out the key light's contrast.
3. Rim/accent: optional, a SpotLight or PointLight behind or beside the subject to separate it from the background.

For outdoor or "natural" scenes, swap the ambient fill for a HemisphereLight. It's cheap and reads far more convincingly as sky bounce than flat ambient does.

Shadows in Three.js require three separate switches, and forgetting any one of them is the most common "why don't I see shadows" bug:

1. renderer.shadowMap.enabled = true on the renderer.
2. light.castShadow = true on the light (only DirectionalLight, PointLight and SpotLight support this).
3. mesh.castShadow = true on objects that should cast, and mesh.receiveShadow = true on objects (like a ground plane) that should receive them.

For a DirectionalLight, also tune light.shadow.camera.{left,right,top,bottom,near,far}. The default shadow camera frustum is small and shadows outside it simply don't render, which looks like shadows "not working" when they're actually just clipped.