Three.js lighting - light types, shadows, environment lighting. Use when adding lights, configuring shadows, setting up IBL, or optimizing lighting performance.

Three.js Lighting Quick Start Light Types Overview Light Description Shadow Support Cost AmbientLight Uniform everywhere No Very Low HemisphereLight Sky/ground gradient No Very Low DirectionalLight Parallel rays (sun) Yes Low PointLight Omnidirectional (bulb) Yes Medium SpotLight Cone shaped Yes Medium RectAreaLight Area light (window) No\ High \ RectAreaLight shadows require custom solutions AmbientLight Illuminates all objects equally. No direction, no shadows. HemisphereLight Gradient from sky to ground color. Good for outdoor scenes. DirectionalLight Parallel light rays. Simulates distant light source (sun). DirectionalLight Shadows PointLight Emits light in all directions from a point. Like a light bulb. PointLight Shadows SpotLight Cone shaped light. Like a flashlight or stage light. SpotLight Shadows RectAreaLight Rectangular area light. Great for soft, realistic lighting. Shadow Setup Enable Shadows Optimizing Shadows Contact Shadows (Fake, Fast) Light Helpers Environment Lighting (IBL) Image Based Lighting using HDR environment maps. Cube Texture Environment Light Probes (Advanced) Capture lighting from a point in space for ambient lighting. Common Lighting Setups Three Point Lighting Outdoor Daylight Indoor Studio Light Animation Performance Tips 1. Limit light count : Each light adds shader complexity 2. Use baked lighting : For static scenes, bake to textures 3. Smaller shadow maps : 512 1024 often sufficient 4. Tight shadow frustums : Only cover needed area 5. Disable unused shadows : Not all lights need shadows 6. Use light layers : Exclude objects from certain lights See Also threejs materials Material light response threejs textures Lightmaps and environment maps threejs postprocessing Bloom and other light effects

threejs-lighting