Three.js materials - PBR, basic, phong, shader materials, material properties. Use when styling meshes, working with textures, creating custom shaders, or optimizing material performance.

Three.js Materials Quick Start Material Types Overview Material Use Case Lighting MeshBasicMaterial Unlit, flat colors, wireframes No MeshLambertMaterial Matte surfaces, performance Yes (diffuse only) MeshPhongMaterial Shiny surfaces, specular highlights Yes MeshStandardMaterial PBR, realistic materials Yes (PBR) MeshPhysicalMaterial Advanced PBR, clearcoat, transmission Yes (PBR+) MeshToonMaterial Cel shaded, cartoon look Yes (toon) MeshNormalMaterial Debug normals No MeshDepthMaterial Depth visualization No ShaderMaterial Custom GLSL shaders Custom RawShaderMaterial Full shader control Custom MeshBasicMaterial No lighting calculations. Fast, always visible. MeshLambertMaterial Diffuse only lighting. Fast, no specular highlights. MeshPhongMaterial Specular highlights. Good for shiny, plastic like surfaces. MeshStandardMaterial (PBR) Physically based rendering. Recommended for realistic results. MeshPhysicalMaterial (Advanced PBR) Extends MeshStandardMaterial with advanced features. Glass Material Example Car Paint Example MeshToonMaterial Cel shaded cartoon look. MeshNormalMaterial Visualize surface normals. Useful for debugging. MeshDepthMaterial Render depth values. Used for shadow maps, DOF effects. PointsMaterial For point clouds. LineBasicMaterial & LineDashedMaterial ShaderMaterial Custom GLSL shaders with Three.js uniforms. Built in Uniforms (auto provided) RawShaderMaterial Full control no built in uniforms/attributes. Common Material Properties All materials share these base properties: Multiple Materials Environment Maps Material Cloning and Modification Performance Tips 1. Reuse materials : Same material = batched draw calls 2. Avoid transparent when possible : Transparent materials require sorting 3. Use alphaTest instead of transparency : When applicable, faster 4. Choose simpler materials : Basic Lambert Phong Standard Physical 5. Limit active lights : Each light adds shader complexity See Also threejs textures Texture loading and configuration threejs shaders Custom shader development threejs lighting Light interaction with materials

threejs-materials