iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

Materials

By · Reviewed & last updated · Part of Three.js Tutorial

A material defines how a surface reacts to light. Three.js ships MeshBasicMaterial (unlit), MeshStandardMaterial (PBR), MeshPhysicalMaterial (clearcoat / sheen), ShaderMaterial (custom GLSL).

Picking the right material

EXAMPLE
import * as THREE from 'three';

// 1) MeshBasicMaterial — flat color, ignores lights. Cheap. Good for icons / UI in 3D.
const basic = new THREE.MeshBasicMaterial({ color: 0xff0055, wireframe: false });

// 2) MeshLambertMaterial — cheap diffuse lighting. Looks like 90s 3D.
const lambert = new THREE.MeshLambertMaterial({ color: 0x88ccff });

// 3) MeshPhongMaterial — Blinn-Phong, specular highlights. Older default.
const phong = new THREE.MeshPhongMaterial({ color: 0xffaa00, shininess: 60 });

// 4) MeshStandardMaterial — PHYSICALLY-BASED (PBR). The default for realistic surfaces.
const standard = new THREE.MeshStandardMaterial({
    color:        0x999999,
    metalness:    0.1,           // 0 = dielectric, 1 = metal
    roughness:    0.4,           // 0 = mirror, 1 = chalk
    map:          albedoMap,
    normalMap:    normalMap,
    roughnessMap: roughMap,
    aoMap:        aoMap,
    envMap:       envCubeMap,
    envMapIntensity: 1.0,
});

// 5) MeshPhysicalMaterial — extends Standard with clearcoat, sheen, transmission, iridescence
const car = new THREE.MeshPhysicalMaterial({
    color: 0x000000,
    metalness: 1, roughness: 0.2,
    clearcoat: 1.0, clearcoatRoughness: 0.05,
});

const silk = new THREE.MeshPhysicalMaterial({
    color: 0xff7799,
    roughness: 0.6,
    sheen: 1.0, sheenRoughness: 0.3, sheenColor: new THREE.Color(0xffeecc),
});

const glass = new THREE.MeshPhysicalMaterial({
    transmission: 1,           // 0..1 — like glass
    roughness: 0.05,
    thickness: 0.5,
    ior: 1.5,                  // index of refraction
});

// 6) MeshToonMaterial — cel-shaded look
const toon = new THREE.MeshToonMaterial({
    color: 0xff66aa,
    gradientMap: stepGradient,   // banded shading
});

// 7) Wireframe + flat shading
const wire = new THREE.MeshStandardMaterial({ wireframe: true });
const flat = new THREE.MeshStandardMaterial({ flatShading: true });

// 8) Transparency
const translucent = new THREE.MeshStandardMaterial({
    transparent: true,
    opacity: 0.6,
    depthWrite: false,           // important for layered transparency
});

// 9) Side — front / back / double
const flag = new THREE.MeshStandardMaterial({ side: THREE.DoubleSide });

// 10) Custom shader — full GLSL control
const shader = new THREE.ShaderMaterial({
    uniforms: { time: { value: 0 } },
    vertexShader: /* glsl */ `
        varying vec2 vUv;
        void main() {
            vUv = uv;
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }
    `,
    fragmentShader: /* glsl */ `
        uniform float time;
        varying vec2 vUv;
        void main() {
            gl_FragColor = vec4(vUv, 0.5 + 0.5 * sin(time), 1.0);
        }
    `,
});
// In animation loop: shader.uniforms.time.value = clock.getElapsedTime();

// 11) Decision guide
//   Basic    → debug / overlays
//   Standard → 95% of realistic scenes
//   Physical → cars, glass, fabric, iridescence
//   Shader   → effects you can't express otherwise

Why it matters

MeshStandardMaterial is the modern default. Reach for MeshPhysicalMaterial only when you need clearcoat, sheen, transmission, or iridescence — it costs more shader cycles for features you might not need.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
// MeshBasic — flat, no lights.
// MeshStandard — PBR; needs lights.
// MeshPhysical — extends Standard with clearcoat etc.
// ShaderMaterial — custom GLSL.
Try it Yourself »

Exercise

PBR-style realistic material class.

new THREE. Material();

Discussion

Loading…