threejs-materials-lighting

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

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