threejs-materials

name	threejs-materials
description	Three.js material types — 9 materials from MeshBasicMaterial to MeshPhysicalMaterial, PBR advanced properties (clearcoat, transmission, iridescence, sheen), MeshToonMaterial, MeshNormalMaterial, MeshDepthMaterial, LineBasicMaterial, PointsMaterial, performance hierarchy, blending modes, and transparency. Use when choosing or configuring materials, implementing PBR surfaces, toon shading, transparency, or optimising material count. Adapted from CloudAI-X/threejs-skills (MIT).
license	MIT
compatibility	Portable reference skill for agents that support markdown skills or prompt files. Works best alongside project Three.js source files and shader inspector.
disable-model-invocation	true
metadata	{"owner":"game-delivery","version":"2.0.0","language":"en-GB","category":"web-rendering","upstream_references":["https://github.com/CloudAI-X/threejs-skills (MIT — see NOTICE.md)"],"tags":["three-js","materials","pbr","mesh-standard-material","mesh-physical-material","toon-shading","transparency","shader-material","clearcoat","transmission"],"intents":["material-selection","pbr-configuration","toon-shading","transparency-setup","material-cost-review"],"output_types":["code-example","api-reference","material-recommendation"]}

Three.js Materials

Quick Start

import * as THREE from 'three';

// PBR material — the default choice for game assets
const material = new THREE.MeshStandardMaterial({
  color: 0xffffff,
  roughness: 0.5,
  metalness: 0.0,
});

const mesh = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), material);
scene.add(mesh);

---

Material Hierarchy — Choose by Cost

From cheapest to most expensive:

Material	Lighting	Shadows	Best For
MeshBasicMaterial	None	No	UI, wireframes, skyboxes, emissive-only
MeshLambertMaterial	Flat/Gouraud	Yes	Low-poly stylised, background props
MeshPhongMaterial	Blinn-Phong	Yes	Shiny plastics, legacy assets
MeshStandardMaterial	PBR	Yes	Default — game characters, props
MeshPhysicalMaterial	PBR + extras	Yes	Glass, car paint, skin, cloth
ShaderMaterial	Custom