threejs-lighting_skill

Overview

This skill covers Three.js lighting: choosing light types, configuring shadows, setting up image-based environment lighting, and optimizing lighting performance. It distills practical patterns for indoor/outdoor setups, shadow tuning, IBL with PMREM, and common lighting rigs like three-point lighting.

How this skill works

The skill explains what each Three.js light does (Ambient, Hemisphere, Directional, Point, Spot, RectArea) and when to enable shadows. It shows renderer and light shadow settings, shadow camera tuning, contact-shadow fallbacks, light helpers, and how to load HDR or cube maps with PMREM for accurate PBR reflections. It also covers light probes and animated light techniques.

When to use it

• Adding basic scene illumination or ambient fill
• Simulating sunlight or outdoor skies with Directional and Hemisphere lights
• Creating localized lamps or spot effects with Point and Spot lights
• Soft realistic studio lighting using RectArea lights and helpers
• Setting up IBL and reflections with HDR or cube environment maps
• Optimizing performance for real-time apps with restricted shadows and baked lighting

Best practices

• Enable renderer.shadowMap and use PCFSoftShadowMap for balanced quality
• Keep shadow camera frustums tight and choose appropriate map sizes (512–2048)
• Limit the number of dynamic lights; bake static lighting when possible
• Use PMREMGenerator for HDR environment maps and dispose resources after use
• Only enable castShadow/receiveShadow on objects that need them
• Use light layers or selective shadows to reduce shader cost and complexity

Example use cases

• Outdoor daylight: Directional light with shadows plus HemisphereLight for sky/ground ambient
• Indoor studio: Multiple RectAreaLights for soft, realistic highlights and ambient fill
• Product render: Three-point lighting (key, fill, back) with MeshPhysicalMaterial and IBL
• Mobile optimization: Reduce dynamic lights, use smaller shadow maps, or bake lightmaps
• Interactive scene: Animate a SpotLight for a flashlight effect and update helpers for debugging