Three.js 材质与光照知识点总结-易微帮

在 Three.js 中，材质（Material） 和 光照（Light） 是 3D 场景视觉效果的核心。合理搭配材质和光照，可以让物体 真实反光、透明、金属感、卡通效果 等。

🎯 1. 材质（Material）分类

Three.js 提供了多种材质，每种材质适用于不同的效果：

材质类型	适用场景	特点	是否受光照影响
`MeshBasicMaterial`	纯色/纹理	不受光照影响	❌
`MeshStandardMaterial`	PBR 物理材质（推荐）	支持金属、粗糙度	✅
`MeshPhysicalMaterial`	高级 PBR 材质	透明、清漆、次表面散射	✅
`MeshLambertMaterial`	低成本光照	无高光，计算漫反射	✅
`MeshPhongMaterial`	经典光照材质	支持高光（specular）	✅
`MeshToonMaterial`	卡通渲染	类似 2D 动漫	✅
`MeshDepthMaterial`	深度缓冲材质	用于阴影、后处理	❌
`MeshMatcapMaterial`	预烘焙材质	不受光照影响，依赖 MatCap 贴图	❌

🎯 2. 常见材质属性

所有材质都继承自 THREE.Material，但有些属性只适用于特定材质。

属性	作用	适用材质
`map`	颜色纹理	所有材质（除 Depth、Matcap）
`color`	颜色	所有材质
`opacity`	透明度	`transparent=true` 才生效
`transparent`	是否透明	所有材质
`side`	正面/背面/双面	`THREE.FrontSide / BackSide / DoubleSide`
`wireframe`	线框模式	所有材质
`metalness`	金属度（`0~1` ）	`MeshStandardMaterial`
`roughness`	粗糙度（`0~1` ）	`MeshStandardMaterial`
`shininess`	高光强度	`MeshPhongMaterial`
`specular`	高光颜色	`MeshPhongMaterial`
`flatShading`	是否平面着色	`true` 让模型棱角分明
`displacementMap`	位移贴图（改变顶点高度）	`MeshStandardMaterial`
`normalMap`	法线贴图（增加凹凸感）	`MeshStandardMaterial`
`aoMap`	环境遮蔽贴图（增强阴影）	`MeshStandardMaterial`
`envMap`	环境贴图（反射环境）	`MeshStandardMaterial / MeshPhongMaterial`

🎯 3. 纹理贴图（Texture）

材质可以使用多种 贴图（Texture） 来增强视觉效果：

纹理贴图	作用	适用材质
`map`	基础颜色贴图	✅
`alphaMap`	透明度（黑色透明）	✅
`bumpMap`	凹凸贴图	`MeshStandardMaterial / MeshPhongMaterial`
`normalMap`	法线贴图	`MeshStandardMaterial / MeshPhongMaterial`
`roughnessMap`	粗糙度贴图	`MeshStandardMaterial`
`metalnessMap`	金属度贴图	`MeshStandardMaterial`
`aoMap`	环境遮蔽（阴影）	`MeshStandardMaterial`
`emissiveMap`	自发光贴图	`MeshStandardMaterial`

const material = new THREE.MeshStandardMaterial({
  map: colorTexture, // 颜色贴图
  normalMap: normalTexture, // 法线贴图
  roughnessMap: roughnessTexture, // 粗糙度贴图
  metalnessMap: metalnessTexture, // 金属度贴图
  aoMap: ambientOcclusionTexture, // AO 贴图
  displacementMap: heightTexture, // 位移贴图
  displacementScale: 0.1, // 位移强度
  transparent: true,
  side: THREE.DoubleSide,
});

🎯 4. 光照（Lighting）

在 Three.js 中，某些材质需要光源才能正确显示，比如 MeshStandardMaterial。

🔹 环境光（AmbientLight）

不产生阴影，均匀照亮整个场景
适用于基础填充光

const ambientLight = new THREE.AmbientLight(0xffffff, 1);
scene.add(ambientLight);

🔹 点光源（PointLight）

类似灯泡，从一个点向四周发光
可以产生阴影

const pointLight = new THREE.PointLight(0xffffff, 30);
pointLight.position.set(2, 3, 4);
scene.add(pointLight);

🔹 平行光（DirectionalLight）

类似太阳光，从固定方向照射
适用于户外场景

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 5, 5);
scene.add(directionalLight);

🔹 聚光灯（SpotLight）

类似手电筒，有方向性

const spotLight = new THREE.SpotLight(0xffffff, 10);
spotLight.position.set(0, 5, 0);
scene.add(spotLight);

🎯 5. HDR 环境贴图

Three.js 支持 HDR 贴图 来增强场景光照与反射效果。

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

const rgbeLoader = new RGBELoader();
rgbeLoader.load('textures/environment.hdr', (hdrTexture) => {
    hdrTexture.mapping = THREE.EquirectangularReflectionMapping;
    
    // 影响整个场景
    scene.environment = hdrTexture;
    scene.background = hdrTexture;

    // 影响单个物体
    material.envMap = hdrTexture;
    material.needsUpdate = true;
});

✔ HDR 贴图能提供更真实的环境反射
✔ 需要设置 THREE.EquirectangularReflectionMapping

🎯 6. 鼠标拖动画面

Three.js 提供 OrbitControls 来让用户交互。

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

// 创建控件
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // 添加阻尼效果
controls.screenSpacePanning = false; // 限制平移方向

鼠标操作

鼠标操作	效果
左键拖动	旋转视角
右键拖动	平移相机
滚轮滚动	缩放

🎯 7. 调试 GUI

可以使用 dat.GUI 调整参数：

import * as dat from 'dat.gui';

const gui = new dat.GUI();
gui.add(material, 'metalness').min(0).max(1).step(0.01);
gui.add(material, 'roughness').min(0).max(1).step(0.01);
gui.add(material, 'aoMapIntensity').min(0).max(10).step(0.01);

这样可以 实时修改材质参数，方便调试。

🚀 总结

✔ MeshStandardMaterial 是最推荐的 PBR 材质
✔ 光照对不同材质的影响不同，基本材质 (MeshBasicMaterial) 不受影响
✔ HDR 贴图能大幅提升环境反射效果
✔ OrbitControls 让鼠标控制视角

Three.js 材质与光照知识点总结