threejs-materials-lighting

SKILL.md

three.js Materials & Lighting

Make three.js surfaces look right: pick the correct material, light the scene,
enable shadows, and add image-based lighting. Patterns target r186, verified
against r186 (lighting is physically based by default since r155).

When to use

Use when a mesh renders black or flat, when choosing a material, adding lights,
enabling shadows, or setting up environment-map reflections (IBL).

Use when code constructs MeshStandardMaterial, DirectionalLight, etc., or sets
renderer.shadowMap.enabled or scene.environment.

When not to use: the renderer/camera/loop → threejs-scene-setup. Loading
models (whose PBR materials this complements) → threejs-gltf-loading. Custom
GLSL/ShaderMaterial is its own topic; for the portable concept see
shader-programming.

Core workflow