Three.js - Materials

Three.js - Materials

If a geometry defines the shape of an object, a material defines its appearance. It controls properties like color, shininess, transparency, and how the object reacts to light. Choosing the right material is essential for achieving the desired visual style, from cartoonish and flat to photorealistic.

Modern PBR Materials (The Standard Choice)

Physically-Based Rendering (PBR) materials aim to simulate how light works in the real world, providing more accurate and realistic results. These are the recommended materials for most modern applications.

Material	Description
MeshStandardMaterial	The workhorse PBR material. It produces realistic results with just two main properties: - roughness: How rough the surface is (0 = perfect mirror, 1 = completely diffuse/matte). - metalness: How metallic the surface is (0 = non-metal/dielectric, 1 = fully metallic).
MeshPhysicalMaterial	An extension of MeshStandardMaterial that provides advanced properties for even greater realism, such as: - clearcoat: Simulates a thin, transparent coating (e.g., car paint). - transmission: Simulates light passing through a material (e.g., glass, water). - sheen: Simulates microfiber surfaces (e.g., fabric).

Legacy and Special-Purpose Materials

These materials are less realistic than PBR but can be more performant or useful for specific artistic styles and debugging.

Material	Description
MeshBasicMaterial	The simplest material. It is not affected by lights and renders as a flat color or texture. Ideal for UI elements, wireframes, or stylized effects.
MeshLambertMaterial	A non-shiny, diffuse material that reacts to lights. It’s computationally cheap but can look flat. Good for matte surfaces in a non-realistic style.
MeshPhongMaterial	A material for shiny surfaces with specular highlights (e.g., plastic). It’s more convincing than Lambert but less realistic and more expensive than PBR materials.
MeshNormalMaterial	A debugging material that maps the object’s normal vectors to RGB colors. Extremely useful for visualizing the orientation of faces and debugging lighting issues.
MeshDepthMaterial	Renders geometry in greyscale based on its distance from the camera (near = white, far = black). Used internally for shadow mapping and can be used for effects like fog.

Enhancing Materials with Textures

Materials truly come to life when you apply textures. A TextureLoader is used to load images, which can then be applied to various material properties (called ‘maps’).

• map: The main color (albedo) texture.
• normalMap: Adds surface detail and bumps without adding more geometry.
• roughnessMap: A greyscale texture that controls roughness across the surface.
• metalnessMap: A greyscale texture that controls metalness across the surface.
• aoMap (Ambient Occlusion): Adds soft shadows to crevices, enhancing realism.

Code Example: Using MeshStandardMaterial

import * as THREE from 'three';

const textureLoader = new THREE.TextureLoader();
const colorTexture = textureLoader.load('/textures/metal_plate_diff_1k.png');
const normalTexture = textureLoader.load('/textures/metal_plate_nor_gl_1k.png');

// Ensure correct color space for textures
colorTexture.colorSpace = THREE.SRGBColorSpace;

const material = new THREE.MeshStandardMaterial({
    map: colorTexture,
    normalMap: normalTexture,
    metalness: 0.7,
    roughness: 0.2
});

const sphere = new THREE.Mesh(
    new THREE.SphereGeometry(1, 64, 64),
    material
);