实验环境准备
在深入材质前，视频中首先建立了三个物体来测试效果：
// 创建球体、平面、圆环
const sphere = new THREE.Mesh(new THREE.SphereGeometry(0.5, 64, 64), material)
const plane = new THREE.Mesh(new THREE.PlaneGeometry(1, 1, 100, 100), material)
const torus = new THREE.Mesh(new THREE.TorusGeometry(0.3, 0.2, 64, 128), material)
sphere.position.x = - 1.5
torus.position.x = 1.5
scene.add(sphere, plane, torus)
材质详解：从基础到物理渲染
1. MeshBasicMaterial (基础材质)
最基础的材质，不计算光照。
map: 设置颜色贴图。color: 在 JavaScript 中修改颜色需使用new THREE.Color('red')。wireframe: 显示框架。transparent&opacity: 必须先将transparent设为true，透明度才生效。alphaMap: 使用灰度图控制透明区域（黑色透明，白色不透明）。side:THREE.FrontSide(默认),THREE.BackSide, 或THREE.DoubleSide(渲染内外两面，但更耗性能)。
2. MeshNormalMaterial (法线材质)
显示法线向量（Normal vectors）的颜色。
- 用途: 调试几何体的法线是否正确。
flatShading: 设为true后，表面不再平滑，会显示出三角形面片感（Low-poly 风格）。
3. MeshMatcapMaterial (材质捕获)
通过一张球形贴图来“欺骗”眼睛，模拟复杂的光照、阴影和反射。
- 核心优势: 性能极高，因为它不计算光照，只是将贴图映射到法线上。
- 代码:
material.matcap = matcapTexture。
4. MeshDepthMaterial (深度材质)
根据物体距离摄像机的远近来着色（近白远黑）。通常用于阴影映射的内部计算。
需光照材质 (Lights Required)
以下材质若场景中没有灯光（如 AmbientLight 或 PointLight），物体将呈现纯黑色。
5. MeshLambertMaterial & MeshPhongMaterial
- Lambert: 性能好，适合非镜面物体（如木头），但在强光下会有锯齿。
- Phong: 性能稍低但支持高光反射。
shininess: 控制高光亮度。specular: 控制高光颜色（例如给木头加一个偏蓝的高光）。
6. MeshToonMaterial (卡通/着色器材质)
- 关键属性:
gradientMap。默认只有两级阶梯，通过加载一张极小的 3 像素或 5 像素渐变图来实现多级阶梯。 - 注意: 必须设置
gradientTexture.magFilter = THREE.NearestFilter否则渐变会变模糊，失去卡通感。
7. MeshStandardMaterial (标准 PBR 材质) —— 重点
这是视频中花费时间最多的部分，它基于物理渲染（Physically Based Rendering）。
| 属性 | 功能说明 |
|---|---|
metalness |
金属感 (0-1)。建议配合调试 UI。 |
roughness |
粗糙度 (0-1)。 |
map |
颜色贴图。 |
aoMap |
环境遮挡贴图。需设置 uv2坐标：geometry.setAttribute('uv2', ...)。 |
displacementMap |
置换贴图。物理移动顶点，产生真实的凹凸起伏。需增加几何体细分分段。 |
normalMap |
法线贴图。不改变形状但增加极细微的表面细节。 |
roughnessMap |
局部粗糙度控制（如门把手亮，门面暗）。 |
// 标准材质完整示例
const material = new THREE.MeshStandardMaterial()
material.map = doorColorTexture
material.aoMap = doorAmbientOcclusionTexture
material.aoMapIntensity = 1
material.displacementMap = doorHeightTexture
material.displacementScale = 0.05
material.metalnessMap = doorMetalnessTexture
material.roughnessMap = doorRoughnessTexture
material.normalMap = doorNormalTexture
material.alphaMap = doorAlphaTexture
material.transparent = true
环境贴图 (Environment Maps)
视频最后展示了如何通过环境贴图让物体反射周围的世界。
- 加载器:
const cubeTextureLoader = new THREE.CubeTextureLoader()。 - 资源: 需要 6 张图（px, nx, py, ny, pz, nz）。
- 应用:
scene.environment = environmentMapTexture。- 这将自动为场景中所有的
MeshStandardMaterial提供反射背景。
- 这将自动为场景中所有的
Bruno Simon 的调试建议
- 使用 lil-gui: 始终为
metalness和roughness添加调试条，因为不同的环境光下这些数值的表现差异巨大。 - 纹理类型: 注意
color属性会抵消map贴图的颜色。
评论区