threejs-materials

Three.js 材质

此技能适用于网格表面的语义与成本。图像贴图/UV/HDR 资源请使用 threejs-textures，光照和阴影设置请使用 threejs-lighting，自定义 GLSL 请使用 threejs-shaders。

何时使用此技能

• 为无光照、经典光照、PBR、风格化或自定义工作选择合适的材质类型
• 配置基础颜色、金属度、粗糙度、法线/AO/自发光贴图以及环境响应
• 修复透明度排序、背面不可见、编辑意外共享或材质泄漏问题
• 在分析性能后减少材质变体、着色器复杂度或绘制调用碎片

说明

步骤 1：选择能表达意图的最简单材质

需求	默认材质
无光照 / 调试 / 类精灵网格	MeshBasicMaterial
低成本经典漫反射场景	MeshLambertMaterial
经典高光外观	MeshPhongMaterial
常规基于物理的表面	MeshStandardMaterial
清漆层、透射、高级 PBR	MeshPhysicalMaterial
卡通着色风格	MeshToonMaterial
自定义顶点/片元程序	通过 threejs-shaders 使用 ShaderMaterial

常规 PBR 工作应从 MeshStandardMaterial 开始，仅在视觉收益足以抵消着色器成本且渲染器支持时，才添加物理特性。

步骤 2：合理设置 PBR 输入

const material = new THREE.MeshStandardMaterial({
  color: 0x9ca3af,
  metalness: 0.65,
  roughness: 0.28,
  map: baseColorTexture,
  normalMap,
  roughnessMap,
  metalnessMap,
  envMapIntensity: 1,
});

基础颜色贴图需要正确配置色彩空间；法线、粗糙度、金属度和 AO 等数据贴图不能采用相同的显示色彩处理方式。关于贴图加载和 UV 通道要求，请参阅 threejs-textures。应在有代表性的光照和环境贴图下评估材质值，而非在没有光照的空场景中评估。

步骤 3：明确处理透明度

仅在确实需要 Alpha 混合时使用 transparent: true。根据已诊断的视觉需求设置 depthWrite、 side、alphaTest 和 renderOrder；随意覆盖渲染顺序可能掩盖底层排序问题。如果能满足所需外观，硬边裁切的树叶/贴花应优先使用 Alpha 测试。

步骤 4：尊重材质所有权

材质通常会被多个对象共享。修改 mesh.material.color 会影响所有使用该材质的对象。对单个对象进行修改前应先克隆，明确管理克隆的生命周期，并在最后一个使用者不再使用它时调用 dispose()。

const uniqueMaterial = sharedMaterial.clone();
mesh.material = uniqueMaterial;
uniqueMaterial.color.set("#3b82f6");

步骤 5：验证外观与成本

• 测试直射光、环境响应、阴影和中性背景。
• 测试透明对象彼此之间以及与不透明几何体重叠的情况。
• 检查某项改动是否产生大量不同的材质/程序变体。
• 测试替换或克隆材质及其所拥有贴图的清理情况。

示例

金属产品表面

使用 MeshStandardMaterial、经过校准的基础颜色、金属度/粗糙度贴图和 HDR 环境。没有环境的金属物体几乎无物可反射；添加任意点光源无法替代缺失的 IBL 信号。

单个对象的高亮

仅当无法通过 uniform、实例属性、轮廓通道或其他不产生重复的机制实现高亮时，才克隆共享材质。选择状态变化时应还原或释放该材质。

最佳实践

1. 在调整大量参数前，先根据渲染意图选择材质。
2. 正确处理纹理色彩空间和 UV 通道规则；错误的贴图解读无法通过猜测粗糙度来修正。
3. 尽量减少重复几何体中的材质变体。
4. 在目标设备上测量成本较高的物理/透射特性。
5. 释放克隆及其专属特性所拥有的纹理，但绝不要过早释放共享资源。

参考

• Three.js 材质相关源代码
• 材质文档
• Three.js 手册：材质