Agent skill

threejs-materials

Three.js materials - PBR, basic, phong, shader materials, material properties. Use when styling meshes, working with textures, creating custom shaders, or optimizing material performance.

Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/threejs-materials

SKILL.md

Three.js Materials

Material Types

Material Use Case Lighting
MeshBasicMaterial Unlit, flat colors No
MeshLambertMaterial Matte surfaces Yes (diffuse)
MeshPhongMaterial Shiny surfaces Yes
MeshStandardMaterial PBR, realistic Yes (PBR)
MeshPhysicalMaterial Advanced PBR Yes (PBR+)
ShaderMaterial Custom GLSL Custom

MeshStandardMaterial (PBR)

javascript
const material = new THREE.MeshStandardMaterial({
  color: 0xffffff,
  roughness: 0.5,
  metalness: 0.0,
  map: colorTexture,
  normalMap: normalTexture,
  roughnessMap: roughTexture,
  metalnessMap: metalTexture,
  aoMap: aoTexture,
  emissive: 0x000000,
  emissiveIntensity: 1,
  envMap: envTexture,
  envMapIntensity: 1,
});

// AO map requires second UV channel
geometry.setAttribute("uv2", geometry.attributes.uv);

MeshPhysicalMaterial

javascript
const glass = new THREE.MeshPhysicalMaterial({
  transmission: 1,
  thickness: 0.5,
  ior: 1.5,
  roughness: 0,
  metalness: 0,
});

const carPaint = new THREE.MeshPhysicalMaterial({
  clearcoat: 1,
  clearcoatRoughness: 0.1,
  metalness: 0.9,
  roughness: 0.5,
});

ShaderMaterial

javascript
const material = new THREE.ShaderMaterial({
  uniforms: {
    time: { value: 0 },
    color: { value: new THREE.Color(0xff0000) },
  },
  vertexShader: `
    void main() {
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    uniform vec3 color;
    void main() {
      gl_FragColor = vec4(color, 1.0);
    }
  `,
});

// Update uniform
material.uniforms.time.value = clock.getElapsedTime();

Common Properties

javascript
material.transparent = true;
material.opacity = 0.5;
material.side = THREE.DoubleSide;
material.wireframe = true;
material.depthTest = true;
material.depthWrite = true;

Environment Maps

javascript
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";

new RGBELoader().load("environment.hdr", (texture) => {
  texture.mapping = THREE.EquirectangularReflectionMapping;
  scene.environment = texture;
});

Didn't find tool you were looking for?

Be as detailed as possible for better results