AgentSkillsCN

threejs-materials

Three.js 材料——PBR、基础、Phong、着色器材料,以及材料属性。当您需要为网格着色、处理纹理、创建自定义着色器,或优化材料性能时,可运用此技能。

SKILL.md
--- frontmatter
name: threejs-materials
description: Three.js materials - PBR, basic, phong, shader materials, material properties. Use when styling meshes, working with textures, creating custom shaders, or optimizing material performance.

Three.js Materials

Material Types

MaterialUse CaseLighting
MeshBasicMaterialUnlit, flat colorsNo
MeshLambertMaterialMatte surfacesYes (diffuse)
MeshPhongMaterialShiny surfacesYes
MeshStandardMaterialPBR, realisticYes (PBR)
MeshPhysicalMaterialAdvanced PBRYes (PBR+)
ShaderMaterialCustom GLSLCustom

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;
});