Implement Advanced Three.js Lighting and Shadows

Three.js Lighting covers adding and tuning lighting in a Three.js scene: light types, shadows, environment lighting, and lighting performance tradeoffs, aimed at improving scene readability, realism, or mood.

Use this when adding or tuning lighting in a Three.js scene, working with light types, shadows, environment lighting, or lighting performance tradeoffs, or improving scene readability, realism, or mood through lighting setup.

Six light types trade off shadow support and cost: AmbientLight (uniform everywhere, no shadows, very low cost), HemisphereLight (sky-to-ground gradient, no shadows, very low cost, good for outdoor scenes), DirectionalLight (parallel rays simulating the sun, shadow-capable, low cost, aimed via a separate target object), PointLight (omnidirectional like a bulb, shadow-capable via a 6-direction cube map, medium cost, with distance/decay falloff), SpotLight (cone-shaped like a flashlight, shadow-capable, medium cost, with angle/penumbra for the cone shape and soft edge), and RectAreaLight (rectangular area light for soft realistic lighting, high cost, no native shadow support, requiring RectAreaLightUniformsLib.init() and only lighting MeshStandardMaterial/MeshPhysicalMaterial). Shadow setup requires enabling renderer.shadowMap.enabled with a map type - BasicShadowMap fastest but lowest quality, PCFShadowMap the default, PCFSoftShadowMap for softer edges, or VSMShadowMap - plus castShadow on the light and castShadow/receiveShadow on individual meshes. Optimization covers tightening the shadow camera frustum, fixing shadow acne with bias/normalBias, and balancing shadow-map resolution, from 512 (low) to 4096 (very high and expensive), against performance. A fast fake alternative, ContactShadows, gives cheap ground-contact shadowing without a real shadow map.

Environment lighting (IBL) loads an HDR equirectangular map via RGBELoader, optionally processed through PMREMGenerator for better reflections, and assigns it to scene.environment, affecting all PBR materials, and optionally scene.background; a CubeTextureLoader offers the same via six cube-face images, and LightProbeGenerator captures ambient lighting from a cube texture or render target for advanced use. Named lighting recipes cover three-point lighting (key, fill, and back/rim DirectionalLights plus ambient fill), outdoor daylight (a strong sun DirectionalLight plus a sky/ground HemisphereLight), and indoor studio setups (multiple RectAreaLights plus ambient fill), alongside light animation via THREE.Clock for orbiting position, pulsing intensity, and HSL color cycling. Performance guidance: limit light count since each adds shader complexity, bake lighting to textures for static scenes, keep shadow maps small since 512-1024 is often enough, use tight shadow frustums, disable shadows on lights or objects that don't need them, and use light layers to exclude specific objects from specific lights.

Developers lighting a Three.js scene who need the right light type and shadow configuration for the desired look and performance budget, building on threejs-fundamentals and feeding into threejs-materials for light response, threejs-textures for lightmaps and environment maps, and threejs-postprocessing for bloom and other light effects.