Chapter 830: Materials (Manual)

Core Idea

A tour of three.js's material family, from unlit MeshBasicMaterial up through physically-based MeshPhysicalMaterial, and the general rule that more realistic materials cost more GPU time.

Key Concepts

• Lighting complexity ladder: MeshBasicMaterial (unlit) → MeshLambertMaterial (per-vertex lighting) → MeshPhongMaterial (per-pixel lighting + specular) → MeshStandardMaterial (PBR: roughness/metalness) → MeshPhysicalMaterial (adds clearcoat), each step more expensive to render.
• MeshToonMaterial: like Phong but shaded via a small gradient map instead of smooth shading, giving a two-tone cartoon look.
• roughness/metalness (PBR materials): roughness (0–1) is the rough-vs-shiny opposite of Phong's shininess; metalness (0–1) switches between metal and non-metal reflectance behavior.
• Special-purpose materials: ShadowMaterial (inspecting shadow data), MeshDepthMaterial (renders per-pixel depth), MeshNormalMaterial (visualizes view-space normals as RGB), ShaderMaterial/RawShaderMaterial (custom shaders, with or without three.js's shader helpers).
• Common Material properties: flatShading (faceted vs. smooth, default false) and side (THREE.FrontSide by default; BackSide/DoubleSide for non-solid geometry like planes).
• material.needsUpdate = true: required after changing certain expensive-to-recompute settings (like toggling flatShading or switching a map on/off) after the material has already been used.

Code Examples

material.color.set(0x00ffff);
material.color.set("purple");
material.color.set("rgb(255, 127, 64)");
material.color.setHSL(h, s, l); // h, s, l each 0 to 1

• What it demonstrates: the several equivalent ways to set a material's Color property.

Key Takeaways

1. Pick the cheapest material that satisfies your visual needs — MeshBasicMaterial if you don't need lighting at all, up to MeshPhysicalMaterial only when you need clearcoat-level realism.
2. MeshStandardMaterial/MeshPhysicalMaterial use roughness/metalness instead of Phong's shininess.
3. side matters most for non-solid geometry like planes, where the back face would otherwise be invisible.
4. Set material.needsUpdate = true after changing settings that require rebuilding the shader program (e.g. flatShading), or the change won't take effect.

Connects To

• MeshBasicMaterial / MeshLambertMaterial / MeshPhongMaterial / MeshToonMaterial / MeshStandardMaterial / MeshPhysicalMaterial: each has its own detailed reference chapter in this skill.