Threejs Materials

Covers the nine core material types you'll reach for when building Three.js scenes, from basic unlit materials through PBR workflows with MeshStandardMaterial and MeshPhysicalMaterial. The reference includes property tables, texture mapping setup, and ready-to-use examples for common cases like glass, car paint, and cel shading. Honestly most useful for the PBR materials section, which breaks down roughness, metalness, clearcoat, and transmission properties with actual values instead of vague descriptions. Also documents the quirks you'll hit, like aoMap needing a second UV channel and dashed lines requiring computeLineDistances(). Good to have open when you're tweaking material properties and can't remember whether shininess goes to 100 or 1000.

install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.: 8
skills.sh installs: 18.8K
GitHub stars: 4.1K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add cloudai-x/threejs-skills --skill threejs-materials --agent claude-code

Installs into .claude/skills of the current project.

Files

Three.js Materials

Targets three.js r186. Examples use WebGLRenderer; the WebGPU and TSL section uses WebGPURenderer.

Quick Start

import * as THREE from "three";

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.set(0, 0, 3);

// PBR material - the default choice for lit, realistic surfaces
const material = new THREE.MeshStandardMaterial({
  color: 0x00aaff,
  roughness: 0.35,
  metalness: 0.1,
});
const mesh = new THREE.Mesh(new THREE.SphereGeometry(1, 48, 32), material);
scene.add(mesh);
scene.add(new THREE.HemisphereLight(0xffffff, 0x444444, 1)); // lit materials render black without lights
const light = new THREE.DirectionalLight(0xffffff, 2);
light.position.set(3, 3, 3);
scene.add(light);

function animate() {
  mesh.rotation.y += 0.01;
  renderer.render(scene, camera);
}

renderer.setAnimationLoop(animate);