threejs-materials

SKILL.md

Nine material types covering unlit, PBR, custom shaders, and specialized rendering effects.

Includes basic, Lambert, Phong, and standard PBR materials with varying lighting complexity; MeshPhysicalMaterial adds advanced features like clearcoat, transmission, and iridescence for glass, car paint, and fabric effects

ShaderMaterial and RawShaderMaterial enable custom GLSL shaders with automatic or manual uniform/attribute management

Specialized materials for toon shading, normal debugging, depth visualization, points, and dashed lines cover non-standard rendering needs

Common properties across all materials control visibility, blending, stencil, depth testing, and polygon offset; environment maps and material pooling optimize performance and realism

Three.js Materials

Quick Start

import * as THREE from "three";

// PBR material (recommended for realistic rendering)
const material = new THREE.MeshStandardMaterial({
  color: 0x00ff00,
  roughness: 0.5,
  metalness: 0.5,
});

const mesh = new THREE.Mesh(geometry, material);

Material Types Overview