Select and configure Three.js materials - Basic, Lambert, Phong, Standard/Physical PBR, Toon, and ShaderMaterial - plus texture maps and PBR settings for realistic or stylized meshes.
---
name: threejs-materials
description: Reference for Three.js materials - choosing among Basic/Lambert/Phong/Standard/Physical/Toon/Shader materials and configuring texture maps and PBR. Use when styling meshes or building custom shaders.
---
Guide to picking and tuning Three.js materials.
## How to use
1. Choose the material by need: `MeshBasicMaterial` (unlit), `MeshStandardMaterial` (default PBR with `roughness`/`metalness`), `MeshPhysicalMaterial` (clearcoat, transmission), `MeshToonMaterial` (cel), or `ShaderMaterial` for custom GLSL.
2. For realistic surfaces, drive a Standard/Physical material with texture maps: `map`, `normalMap`, `roughnessMap`, `metalnessMap`, `aoMap`, and `envMap`.
3. Set the correct color space on color maps (sRGB) and keep data maps linear; mark `needsUpdate = true` after late texture assignment.
4. Control transparency (`transparent`, `opacity`, `alphaMap`), `side`, and reuse material instances across meshes to limit draw cost.
Full skill & source: https://github.com/CloudAI-X/threejs-skills/tree/b1c623076c661fc9b03dac19292e825a5d106823/skills/threejs-materials