Back to Details

threejs-materials

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Three.js Materials

Three.js 材质

Quick Start

快速入门

javascript
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);
javascript
import * as THREE from "three";

// PBR材质（推荐用于写实渲染）
const material = new THREE.MeshStandardMaterial({
  color: 0x00ff00,
  roughness: 0.5,
  metalness: 0.5,
});

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

Material Types Overview

材质类型概览

MaterialUse CaseLighting
MeshBasicMaterialUnlit, flat colors, wireframesNo
MeshLambertMaterialMatte surfaces, performanceYes (diffuse only)
MeshPhongMaterialShiny surfaces, specular highlightsYes
MeshStandardMaterialPBR, realistic materialsYes (PBR)
MeshPhysicalMaterialAdvanced PBR, clearcoat, transmissionYes (PBR+)
MeshToonMaterialCel-shaded, cartoon lookYes (toon)
MeshNormalMaterialDebug normalsNo
MeshDepthMaterialDepth visualizationNo
ShaderMaterialCustom GLSL shadersCustom
RawShaderMaterialFull shader controlCustom
材质类型适用场景光照支持
MeshBasicMaterial无光照、纯色、线框效果不支持
MeshLambertMaterial哑光表面，侧重性能支持（仅漫反射）
MeshPhongMaterial光亮表面，带高光反射支持
MeshStandardMaterialPBR写实材质支持（PBR光照）
MeshPhysicalMaterial进阶PBR材质，支持清漆、透射效果支持（增强版PBR）
MeshToonMaterial卡通风格描边渲染支持（卡通光照）
MeshNormalMaterial法线可视化调试不支持
MeshDepthMaterial深度值可视化，用于阴影、景深效果不支持
ShaderMaterial自定义GLSL着色器自定义光照
RawShaderMaterial完全自定义着色器控制自定义光照

MeshBasicMaterial

MeshBasicMaterial

No lighting calculations. Fast, always visible.
javascript
const material = new THREE.MeshBasicMaterial({
  color: 0xff0000,
  transparent: true,
  opacity: 0.5,
  side: THREE.DoubleSide, // FrontSide, BackSide, DoubleSide
  wireframe: false,
  map: texture, // Color/diffuse texture
  alphaMap: alphaTexture, // Transparency texture
  envMap: envTexture, // Reflection texture
  reflectivity: 1, // Env map intensity
  fog: true, // Affected by scene fog
});
不进行光照计算，渲染速度快，始终可见。
javascript
const material = new THREE.MeshBasicMaterial({
  color: 0xff0000,
  transparent: true,
  opacity: 0.5,
  side: THREE.DoubleSide, // FrontSide、BackSide、DoubleSide
  wireframe: false,
  map: texture, // 颜色/漫反射纹理
  alphaMap: alphaTexture, // 透明纹理
  envMap: envTexture, // 反射纹理
  reflectivity: 1, // 环境贴图强度
  fog: true, // 受场景雾效影响
});

MeshLambertMaterial

MeshLambertMaterial

Diffuse-only lighting. Fast, no specular highlights.
javascript
const material = new THREE.MeshLambertMaterial({
  color: 0x00ff00,
  emissive: 0x111111, // Self-illumination color
  emissiveIntensity: 1,
  map: texture,
  emissiveMap: emissiveTexture,
  envMap: envTexture,
  reflectivity: 0.5,
});
仅支持漫反射光照，渲染速度快，无高光效果。
javascript
const material = new THREE.MeshLambertMaterial({
  color: 0x00ff00,
  emissive: 0x111111, // 自发光颜色
  emissiveIntensity: 1,
  map: texture,
  emissiveMap: emissiveTexture,
  envMap: envTexture,
  reflectivity: 0.5,
});

MeshPhongMaterial

MeshPhongMaterial

Specular highlights. Good for shiny, plastic-like surfaces.
javascript
const material = new THREE.MeshPhongMaterial({
  color: 0x0000ff,
  specular: 0xffffff, // Highlight color
  shininess: 100, // Highlight sharpness (0-1000)
  emissive: 0x000000,
  flatShading: false, // Flat vs smooth shading
  map: texture,
  specularMap: specTexture, // Per-pixel shininess
  normalMap: normalTexture,
  normalScale: new THREE.Vector2(1, 1),
  bumpMap: bumpTexture,
  bumpScale: 1,
  displacementMap: dispTexture,
  displacementScale: 1,
});
支持高光反射，适合模拟光亮的塑料类表面。
javascript
const material = new THREE.MeshPhongMaterial({
  color: 0x0000ff,
  specular: 0xffffff, // 高光颜色
  shininess: 100, // 高光锐度（0-1000）
  emissive: 0x000000,
  flatShading: false, // 平面着色/平滑着色
  map: texture,
  specularMap: specTexture, // 逐像素高光锐度
  normalMap: normalTexture,
  normalScale: new THREE.Vector2(1, 1),
  bumpMap: bumpTexture,
  bumpScale: 1,
  displacementMap: dispTexture,
  displacementScale: 1,
});

MeshStandardMaterial (PBR)

MeshStandardMaterial (PBR)

Physically-based rendering. Recommended for realistic results.
javascript
const material = new THREE.MeshStandardMaterial({
  color: 0xffffff,
  roughness: 0.5, // 0 = mirror, 1 = diffuse
  metalness: 0.0, // 0 = dielectric, 1 = metal

  // Textures
  map: colorTexture, // Albedo/base color
  roughnessMap: roughTexture, // Per-pixel roughness
  metalnessMap: metalTexture, // Per-pixel metalness
  normalMap: normalTexture, // Surface detail
  normalScale: new THREE.Vector2(1, 1),
  aoMap: aoTexture, // Ambient occlusion (uses uv2!)
  aoMapIntensity: 1,
  displacementMap: dispTexture, // Vertex displacement
  displacementScale: 0.1,
  displacementBias: 0,

  // Emissive
  emissive: 0x000000,
  emissiveIntensity: 1,
  emissiveMap: emissiveTexture,

  // Environment
  envMap: envTexture,
  envMapIntensity: 1,

  // Other
  flatShading: false,
  wireframe: false,
  fog: true,
});

// Note: aoMap requires second UV channel
geometry.setAttribute("uv2", geometry.attributes.uv);
基于物理的渲染，推荐用于实现写实效果。
javascript
const material = new THREE.MeshStandardMaterial({
  color: 0xffffff,
  roughness: 0.5, // 0=镜面反射，1=漫反射
  metalness: 0.0, // 0=电介质，1=金属材质

  // 纹理
  map: colorTexture, // 基础颜色纹理
  roughnessMap: roughTexture, // 逐像素粗糙度
  metalnessMap: metalTexture, // 逐像素金属度
  normalMap: normalTexture, // 表面细节纹理
  normalScale: new THREE.Vector2(1, 1),
  aoMap: aoTexture, // 环境光遮蔽（需uv2通道！）
  aoMapIntensity: 1,
  displacementMap: dispTexture, // 顶点位移纹理
  displacementScale: 0.1,
  displacementBias: 0,

  // 自发光
  emissive: 0x000000,
  emissiveIntensity: 1,
  emissiveMap: emissiveTexture,

  // 环境贴图
  envMap: envTexture,
  envMapIntensity: 1,

  // 其他属性
  flatShading: false,
  wireframe: false,
  fog: true,
});

// 注意：aoMap需要第二组UV通道
geometry.setAttribute("uv2", geometry.attributes.uv);

MeshPhysicalMaterial (Advanced PBR)

MeshPhysicalMaterial (进阶PBR)

Extends MeshStandardMaterial with advanced features.
javascript
const material = new THREE.MeshPhysicalMaterial({
  // All MeshStandardMaterial properties plus:

  // Clearcoat (car paint, lacquer)
  clearcoat: 1.0, // 0-1 clearcoat layer strength
  clearcoatRoughness: 0.1,
  clearcoatMap: ccTexture,
  clearcoatRoughnessMap: ccrTexture,
  clearcoatNormalMap: ccnTexture,
  clearcoatNormalScale: new THREE.Vector2(1, 1),

  // Transmission (glass, water)
  transmission: 1.0, // 0 = opaque, 1 = fully transparent
  transmissionMap: transTexture,
  thickness: 0.5, // Volume thickness for refraction
  thicknessMap: thickTexture,
  attenuationDistance: 1, // Absorption distance
  attenuationColor: new THREE.Color(0xffffff),

  // Refraction
  ior: 1.5, // Index of refraction (1-2.333)

  // Sheen (fabric, velvet)
  sheen: 1.0,
  sheenRoughness: 0.5,
  sheenColor: new THREE.Color(0xffffff),
  sheenColorMap: sheenTexture,
  sheenRoughnessMap: sheenRoughTexture,

  // Iridescence (soap bubbles, oil slicks)
  iridescence: 1.0,
  iridescenceIOR: 1.3,
  iridescenceThicknessRange: [100, 400],
  iridescenceMap: iridTexture,
  iridescenceThicknessMap: iridThickTexture,

  // Anisotropy (brushed metal)
  anisotropy: 1.0,
  anisotropyRotation: 0,
  anisotropyMap: anisoTexture,

  // Specular
  specularIntensity: 1,
  specularColor: new THREE.Color(0xffffff),
  specularIntensityMap: specIntTexture,
  specularColorMap: specColorTexture,
});
继承MeshStandardMaterial并增加进阶特性。
javascript
const material = new THREE.MeshPhysicalMaterial({
  // 包含所有MeshStandardMaterial属性，新增：

  // 清漆层（汽车漆、亮漆效果）
  clearcoat: 1.0, // 0-1，清漆层强度
  clearcoatRoughness: 0.1,
  clearcoatMap: ccTexture,
  clearcoatRoughnessMap: ccrTexture,
  clearcoatNormalMap: ccnTexture,
  clearcoatNormalScale: new THREE.Vector2(1, 1),

  // 透射效果（玻璃、水）
  transmission: 1.0, // 0=不透明，1=完全透明
  transmissionMap: transTexture,
  thickness: 0.5, // 折射体积厚度
  thicknessMap: thickTexture,
  attenuationDistance: 1, // 光线吸收距离
  attenuationColor: new THREE.Color(0xffffff),

  // 折射
  ior: 1.5, // 折射率（1-2.333）

  // 光泽层（织物、丝绒）
  sheen: 1.0,
  sheenRoughness: 0.5,
  sheenColor: new THREE.Color(0xffffff),
  sheenColorMap: sheenTexture,
  sheenRoughnessMap: sheenRoughTexture,

  // 彩虹光泽（肥皂泡、油膜）
  iridescence: 1.0,
  iridescenceIOR: 1.3,
  iridescenceThicknessRange: [100, 400],
  iridescenceMap: iridTexture,
  iridescenceThicknessMap: iridThickTexture,

  // 各向异性（拉丝金属）
  anisotropy: 1.0,
  anisotropyRotation: 0,
  anisotropyMap: anisoTexture,

  // 高光
  specularIntensity: 1,
  specularColor: new THREE.Color(0xffffff),
  specularIntensityMap: specIntTexture,
  specularColorMap: specColorTexture,
});

Glass Material Example

玻璃材质示例

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

Car Paint Example

汽车漆材质示例

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

MeshToonMaterial

MeshToonMaterial

Cel-shaded cartoon look.
javascript
const material = new THREE.MeshToonMaterial({
  color: 0x00ff00,
  gradientMap: gradientTexture, // Optional: custom shading gradient
});

// Create step gradient texture
const colors = new Uint8Array([0, 128, 255]);
const gradientMap = new THREE.DataTexture(colors, 3, 1, THREE.RedFormat);
gradientMap.minFilter = THREE.NearestFilter;
gradientMap.magFilter = THREE.NearestFilter;
gradientMap.needsUpdate = true;
卡通风格描边渲染效果。
javascript
const material = new THREE.MeshToonMaterial({
  color: 0x00ff00,
  gradientMap: gradientTexture, // 可选：自定义着色渐变纹理
});

// 创建阶梯渐变纹理
const colors = new Uint8Array([0, 128, 255]);
const gradientMap = new THREE.DataTexture(colors, 3, 1, THREE.RedFormat);
gradientMap.minFilter = THREE.NearestFilter;
gradientMap.magFilter = THREE.NearestFilter;
gradientMap.needsUpdate = true;

MeshNormalMaterial

MeshNormalMaterial

Visualize surface normals. Useful for debugging.
javascript
const material = new THREE.MeshNormalMaterial({
  flatShading: false,
  wireframe: false,
});
可视化表面法线，用于调试场景。
javascript
const material = new THREE.MeshNormalMaterial({
  flatShading: false,
  wireframe: false,
});

MeshDepthMaterial

MeshDepthMaterial

Render depth values. Used for shadow maps, DOF effects.
javascript
const material = new THREE.MeshDepthMaterial({
  depthPacking: THREE.RGBADepthPacking,
});
渲染深度值，用于阴影贴图、景深效果。
javascript
const material = new THREE.MeshDepthMaterial({
  depthPacking: THREE.RGBADepthPacking,
});

PointsMaterial

PointsMaterial

For point clouds.
javascript
const material = new THREE.PointsMaterial({
  color: 0xffffff,
  size: 0.1,
  sizeAttenuation: true, // Scale with distance
  map: pointTexture,
  alphaMap: alphaTexture,
  transparent: true,
  alphaTest: 0.5, // Discard pixels below threshold
  vertexColors: true, // Use per-vertex colors
});

const points = new THREE.Points(geometry, material);
用于点云渲染。
javascript
const material = new THREE.PointsMaterial({
  color: 0xffffff,
  size: 0.1,
  sizeAttenuation: true, // 随距离缩放
  map: pointTexture,
  alphaMap: alphaTexture,
  transparent: true,
  alphaTest: 0.5, // 丢弃透明度低于阈值的像素
  vertexColors: true, // 使用顶点颜色
});

const points = new THREE.Points(geometry, material);

LineBasicMaterial & LineDashedMaterial

LineBasicMaterial & LineDashedMaterial

javascript
// Solid lines
const lineMaterial = new THREE.LineBasicMaterial({
  color: 0xffffff,
  linewidth: 1, // Note: >1 only works on some systems
  linecap: "round",
  linejoin: "round",
});

// Dashed lines
const dashedMaterial = new THREE.LineDashedMaterial({
  color: 0xffffff,
  dashSize: 0.5,
  gapSize: 0.25,
  scale: 1,
});

// Required for dashed lines
const line = new THREE.Line(geometry, dashedMaterial);
line.computeLineDistances();
javascript
// 实线材质
const lineMaterial = new THREE.LineBasicMaterial({
  color: 0xffffff,
  linewidth: 1, // 注意：宽度>1仅在部分系统生效
  linecap: "round",
  linejoin: "round",
});

// 虚线材质
const dashedMaterial = new THREE.LineDashedMaterial({
  color: 0xffffff,
  dashSize: 0.5,
  gapSize: 0.25,
  scale: 1,
});

// 虚线材质需要执行此方法
const line = new THREE.Line(geometry, dashedMaterial);
line.computeLineDistances();

ShaderMaterial

ShaderMaterial

Custom GLSL shaders with Three.js uniforms.
javascript
const material = new THREE.ShaderMaterial({
  uniforms: {
    time: { value: 0 },
    color: { value: new THREE.Color(0xff0000) },
    texture1: { value: texture },
  },
  vertexShader: `
    varying vec2 vUv;
    uniform float time;

    void main() {
      vUv = uv;
      vec3 pos = position;
      pos.z += sin(pos.x * 10.0 + time) * 0.1;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
    }
  `,
  fragmentShader: `
    varying vec2 vUv;
    uniform vec3 color;
    uniform sampler2D texture1;

    void main() {
      // Use texture2D() for GLSL 1.0, texture() for GLSL 3.0 (glslVersion: THREE.GLSL3)
      vec4 texColor = texture2D(texture1, vUv);
      gl_FragColor = vec4(color * texColor.rgb, 1.0);
    }
  `,
  transparent: true,
  side: THREE.DoubleSide,
});

// Update uniform in animation loop
material.uniforms.time.value = clock.getElapsedTime();
结合Three.js uniforms的自定义GLSL着色器。
javascript
const material = new THREE.ShaderMaterial({
  uniforms: {
    time: { value: 0 },
    color: { value: new THREE.Color(0xff0000) },
    texture1: { value: texture },
  },
  vertexShader: `
    varying vec2 vUv;
    uniform float time;

    void main() {
      vUv = uv;
      vec3 pos = position;
      pos.z += sin(pos.x * 10.0 + time) * 0.1;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
    }
  `,
  fragmentShader: `
    varying vec2 vUv;
    uniform vec3 color;
    uniform sampler2D texture1;

    void main() {
      // GLSL 1.0使用texture2D()，GLSL 3.0使用texture()（需设置glslVersion: THREE.GLSL3）
      vec4 texColor = texture2D(texture1, vUv);
      gl_FragColor = vec4(color * texColor.rgb, 1.0);
    }
  `,
  transparent: true,
  side: THREE.DoubleSide,
});

// 在动画循环中更新uniform值
material.uniforms.time.value = clock.getElapsedTime();

Built-in Uniforms (auto-provided)

内置Uniforms（自动提供）

glsl
// Vertex shader
uniform mat4 modelMatrix;         // Object to world
uniform mat4 modelViewMatrix;     // Object to camera
uniform mat4 projectionMatrix;    // Camera projection
uniform mat4 viewMatrix;          // World to camera
uniform mat3 normalMatrix;        // For transforming normals
uniform vec3 cameraPosition;      // Camera world position

// Attributes
attribute vec3 position;
attribute vec3 normal;
attribute vec2 uv;
glsl
// 顶点着色器
uniform mat4 modelMatrix;         // 物体到世界空间
uniform mat4 modelViewMatrix;     // 物体到相机空间
uniform mat4 projectionMatrix;    // 相机投影矩阵
uniform mat4 viewMatrix;          // 世界到相机空间
uniform mat3 normalMatrix;        // 法线变换矩阵
uniform vec3 cameraPosition;      // 相机世界坐标

// 属性
attribute vec3 position;
attribute vec3 normal;
attribute vec2 uv;

RawShaderMaterial

RawShaderMaterial

Full control - no built-in uniforms/attributes.
javascript
const material = new THREE.RawShaderMaterial({
  uniforms: {
    projectionMatrix: { value: camera.projectionMatrix },
    modelViewMatrix: { value: new THREE.Matrix4() },
  },
  vertexShader: `
    precision highp float;
    attribute vec3 position;
    uniform mat4 projectionMatrix;
    uniform mat4 modelViewMatrix;

    void main() {
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    precision highp float;

    void main() {
      gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
  `,
});
完全自定义控制，无内置uniforms/attributes。
javascript
const material = new THREE.RawShaderMaterial({
  uniforms: {
    projectionMatrix: { value: camera.projectionMatrix },
    modelViewMatrix: { value: new THREE.Matrix4() },
  },
  vertexShader: `
    precision highp float;
    attribute vec3 position;
    uniform mat4 projectionMatrix;
    uniform mat4 modelViewMatrix;

    void main() {
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    precision highp float;

    void main() {
      gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
  `,
});

Common Material Properties

通用材质属性

All materials share these base properties:
javascript
// Visibility
material.visible = true;
material.transparent = false;
material.opacity = 1.0;
material.alphaTest = 0; // Discard pixels with alpha < value

// Rendering
material.side = THREE.FrontSide; // FrontSide, BackSide, DoubleSide
material.depthTest = true;
material.depthWrite = true;
material.colorWrite = true;

// Blending
material.blending = THREE.NormalBlending;
// NormalBlending, AdditiveBlending, SubtractiveBlending, MultiplyBlending, CustomBlending

// Stencil
material.stencilWrite = false;
material.stencilFunc = THREE.AlwaysStencilFunc;
material.stencilRef = 0;
material.stencilMask = 0xff;

// Polygon offset (z-fighting fix)
material.polygonOffset = false;
material.polygonOffsetFactor = 0;
material.polygonOffsetUnits = 0;

// Misc
material.dithering = false;
material.toneMapped = true;
所有材质共享以下基础属性：
javascript
// 可见性
material.visible = true;
material.transparent = false;
material.opacity = 1.0;
material.alphaTest = 0; // 丢弃透明度低于该值的像素

// 渲染设置
material.side = THREE.FrontSide; // FrontSide、BackSide、DoubleSide
material.depthTest = true;
material.depthWrite = true;
material.colorWrite = true;

// 混合模式
material.blending = THREE.NormalBlending;
// NormalBlending、AdditiveBlending、SubtractiveBlending、MultiplyBlending、CustomBlending

// 模板缓冲
material.stencilWrite = false;
material.stencilFunc = THREE.AlwaysStencilFunc;
material.stencilRef = 0;
material.stencilMask = 0xff;

// 多边形偏移（解决Z-fighting问题）
material.polygonOffset = false;
material.polygonOffsetFactor = 0;
material.polygonOffsetUnits = 0;

// 其他
material.dithering = false;
material.toneMapped = true;

Multiple Materials

多材质分配

javascript
// Assign different materials to geometry groups
const geometry = new THREE.BoxGeometry(1, 1, 1);
const materials = [
  new THREE.MeshBasicMaterial({ color: 0xff0000 }), // right
  new THREE.MeshBasicMaterial({ color: 0x00ff00 }), // left
  new THREE.MeshBasicMaterial({ color: 0x0000ff }), // top
  new THREE.MeshBasicMaterial({ color: 0xffff00 }), // bottom
  new THREE.MeshBasicMaterial({ color: 0xff00ff }), // front
  new THREE.MeshBasicMaterial({ color: 0x00ffff }), // back
];
const mesh = new THREE.Mesh(geometry, materials);

// Custom groups
geometry.clearGroups();
geometry.addGroup(0, 6, 0); // start, count, materialIndex
geometry.addGroup(6, 6, 1);
javascript
// 为几何体分组分配不同材质
const geometry = new THREE.BoxGeometry(1, 1, 1);
const materials = [
  new THREE.MeshBasicMaterial({ color: 0xff0000 }), // 右侧面
  new THREE.MeshBasicMaterial({ color: 0x00ff00 }), // 左侧面
  new THREE.MeshBasicMaterial({ color: 0x0000ff }), // 顶部面
  new THREE.MeshBasicMaterial({ color: 0xffff00 }), // 底部面
  new THREE.MeshBasicMaterial({ color: 0xff00ff }), // 正面
  new THREE.MeshBasicMaterial({ color: 0x00ffff }), // 背面
];
const mesh = new THREE.Mesh(geometry, materials);

// 自定义分组
geometry.clearGroups();
geometry.addGroup(0, 6, 0); // 起始索引、数量、材质索引
geometry.addGroup(6, 6, 1);

Environment Maps

环境贴图

javascript
// Load cube texture
const cubeLoader = new THREE.CubeTextureLoader();
const envMap = cubeLoader.load([
  "px.jpg",
  "nx.jpg", // positive/negative X
  "py.jpg",
  "ny.jpg", // positive/negative Y
  "pz.jpg",
  "nz.jpg", // positive/negative Z
]);

// Apply to material
material.envMap = envMap;
material.envMapIntensity = 1;

// Or set as scene environment (affects all PBR materials)
scene.environment = envMap;

// HDR environment (recommended)
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";
const rgbeLoader = new RGBELoader();
rgbeLoader.load("environment.hdr", (texture) => {
  texture.mapping = THREE.EquirectangularReflectionMapping;
  scene.environment = texture;
  scene.background = texture;
});
javascript
// 加载立方体贴图
const cubeLoader = new THREE.CubeTextureLoader();
const envMap = cubeLoader.load([
  "px.jpg",
  "nx.jpg", // X轴正/负方向
  "py.jpg",
  "ny.jpg", // Y轴正/负方向
  "pz.jpg",
  "nz.jpg", // Z轴正/负方向
]);

// 应用到材质
material.envMap = envMap;
material.envMapIntensity = 1;

// 或设置为场景环境（影响所有PBR材质）
scene.environment = envMap;

// HDR环境贴图（推荐）
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";
const rgbeLoader = new RGBELoader();
rgbeLoader.load("environment.hdr", (texture) => {
  texture.mapping = THREE.EquirectangularReflectionMapping;
  scene.environment = texture;
  scene.background = texture;
});

Material Cloning and Modification

材质克隆与修改

javascript
// Clone material
const clone = material.clone();
clone.color.set(0x00ff00);

// Modify at runtime
material.color.set(0xff0000);
material.needsUpdate = true; // Only needed for some changes

// When needsUpdate is required:
// - Changing flat shading
// - Changing texture
// - Changing transparent
// - Custom shader code changes
javascript
// 克隆材质
const clone = material.clone();
clone.color.set(0x00ff00);

// 运行时修改材质
material.color.set(0xff0000);
material.needsUpdate = true; // 仅部分修改需要设置

// 需要设置needsUpdate的场景：
// - 修改平面着色模式
// - 修改纹理
// - 修改透明属性
// - 自定义着色器代码变更

Performance Tips

性能优化技巧

  1. Reuse materials: Same material = batched draw calls
  2. Avoid transparent when possible: Transparent materials require sorting
  3. Use alphaTest instead of transparency: When applicable, faster
  4. Choose simpler materials: Basic > Lambert > Phong > Standard > Physical
  5. Limit active lights: Each light adds shader complexity
javascript
// Material pooling
const materialCache = new Map();
function getMaterial(color) {
  const key = color.toString(16);
  if (!materialCache.has(key)) {
    materialCache.set(key, new THREE.MeshStandardMaterial({ color }));
  }
  return materialCache.get(key);
}

// Dispose when done
material.dispose();
  1. 复用材质：相同材质会进行绘制调用批处理
  2. 尽量避免透明材质：透明材质需要额外排序操作
  3. 使用alphaTest替代透明：适用场景下性能更优
  4. 选择简单材质：Basic > Lambert > Phong > Standard > Physical
  5. 限制激活光源数量：每个光源都会增加着色器复杂度
javascript
// 材质池化
const materialCache = new Map();
function getMaterial(color) {
  const key = color.toString(16);
  if (!materialCache.has(key)) {
    materialCache.set(key, new THREE.MeshStandardMaterial({ color }));
  }
  return materialCache.get(key);
}

// 不再使用时释放材质
material.dispose();

See Also

相关链接

  • threejs-textures
    - Texture loading and configuration
  • threejs-shaders
    - Custom shader development
  • threejs-lighting
    - Light interaction with materials
  • threejs-textures
    - 纹理加载与配置
  • threejs-shaders
    - 自定义着色器开发
  • threejs-lighting
    - 材质与光源的交互