Implement Three.js Materials for 3D Graphics

This skill covers Three.js material selection and configuration across every material type, comparing use case and lighting model: MeshBasicMaterial (unlit, flat colors/wireframes), MeshLambertMaterial (diffuse-only, fast, no specular), MeshPhongMaterial (specular highlights for shiny surfaces), MeshStandardMaterial (PBR, recommended default), MeshPhysicalMaterial (advanced PBR with clearcoat/transmission), MeshToonMaterial (cel-shaded), MeshNormalMaterial and MeshDepthMaterial (debug/depth visualization, unlit), and ShaderMaterial/RawShaderMaterial (custom GLSL). It documents full property sets for MeshBasicMaterial (transparency, double-sided rendering, env-map reflectivity), MeshLambertMaterial (emissive self-illumination), and MeshPhongMaterial (specular color/shininess, normal/bump/displacement maps). MeshStandardMaterial's PBR workflow covers roughness/metalness scalar and per-pixel maps, normal mapping, ambient occlusion (requiring a second UV channel, uv2), displacement, emissive, and environment map intensity. MeshPhysicalMaterial extends this with clearcoat (car paint/lacquer with its own roughness and normal map), transmission (glass/water, with thickness and attenuation for volumetric refraction), index of refraction, sheen (fabric/velvet), iridescence (soap bubbles/oil slicks), anisotropy (brushed metal), and specular tinting - demonstrated with complete glass and car-paint material recipes. MeshToonMaterial shows building a custom step gradient texture for cel-shading control. PointsMaterial (point clouds with size attenuation and alpha testing) and LineBasicMaterial/LineDashedMaterial (including the required computeLineDistances() call for dashed lines) round out the non-mesh material types. ShaderMaterial demonstrates a full custom GLSL vertex/fragment shader pair with time-based vertex displacement and texture sampling, lists Three.js's auto-provided built-in uniforms and attributes (model/view/projection matrices, camera position, position/normal/uv attributes), and RawShaderMaterial shows the fully manual alternative with no built-in uniforms. Common properties shared by all materials cover visibility/transparency/opacity/alphaTest, face culling side, depth test/write, blending modes, stencil operations, polygon offset for z-fighting fixes, and dithering/tone-mapping flags. It covers assigning multiple materials to geometry groups (e.g. per-face box colors) via geometry groups, loading cube-texture or HDR environment maps and applying them per-material or scene-wide via scene.environment, and material cloning/runtime modification (noting exactly which changes require setting needsUpdate: flat shading, texture swaps, transparency toggling, custom shader code changes). Performance tips: reuse materials to batch draw calls, avoid transparency when possible (it requires render-order sorting), prefer alphaTest over full transparency where applicable, choose the simplest material tier that meets visual needs (Basic > Lambert > Phong > Standard > Physical in ascending cost), limit active lights, and use a material cache/pool keyed by property to avoid duplicate allocations. It introduces NodeMaterial and TSL (Three.js Shading Language) as the emerging cross-renderer material system that works with both WebGL and WebGPU (unlike onBeforeCompile, which doesn't work with WebGPU), while GLSL ShaderMaterial remains fully supported on WebGL. It notes r183 extended image-based lighting (IBL) support to MeshLambertMaterial and MeshPhongMaterial via scene.environment, previously exclusive to PBR materials.

Use it when choosing or configuring a Three.js material - PBR realism, custom shaders, toon shading, or performance-tiered material selection. It cross-references companion skills for texture loading/configuration, custom shader development in depth, and how lights interact with materials, which are out of its own scope.

Inputs: the desired visual result (realistic PBR, stylized toon, custom shader effect) and performance budget.
Outputs: working Three.js JavaScript code for the requested material type and configuration - PBR property setup, advanced MeshPhysicalMaterial effects, custom GLSL shaders, or NodeMaterial/TSL setup.

const material = new THREE.MeshPhysicalMaterial({
  color: 0xffffff,
  metalness: 0,
  roughness: 0,
  transmission: 1,
  thickness: 0.5,
  ior: 1.5,
});

Three.js developers choosing or building materials - from simple flat colors to advanced PBR effects like glass and clearcoat, or custom GLSL/NodeMaterial shaders - who need the right material type and correctly configured properties.