Three.js材质混合出现异常明暗变化该如何解决？

问题核心原因 #

叠加后出现非预期变暗、变亮，是材质配置、渲染流程设置不符合混合模式生效前提导致的，和混合模式本身的计算逻辑无关：

• 调用多材质工具生成的重叠网格，默认会各自独立走完整PBR光照计算、帧缓冲写入流程。哪怕设置了纯白正片叠底、纯黑线性减淡，只要材质输出的片元颜色不是严格的纯白、纯黑，就会出现明暗偏差。MeshStandardMaterial受场景灯光、金属度、粗糙度参数影响，纯色参数下的实际输出必然会偏离你设定的基础色值。
• 混合模式生效的前置条件是材质开启transparent: true，未开启时Three.js会走不透明渲染逻辑直接覆盖帧缓冲，不会执行你指定的混合计算。
• 同位置重叠网格未关闭深度写入、未指定固定渲染顺序时，会出现深度测试冲突、渲染顺序错乱，导致部分片元混合计算缺失，出现整体明暗偏差、局部花屏的问题。

分步修复配置 #

所有上层叠加层通用配置 #

印刷层、表面整饰层作为叠在纸张上方的图层，必须统一添加以下参数：

const overlayCommonConfig = {
  transparent: true, // 强制开启透明通道，保证混合模式生效
  depthWrite: false, // 关闭深度写入，避免同位置网格深度冲突
  polygonOffset: true,
  polygonOffsetFactor: -1, // 按层级递减排布偏移值，消除Z-fighting
  lights: false // 关闭场景灯光对上层材质的直接影响，避免纯色输出偏移
}

如果需要保留上层工艺的PBR光照效果（比如整饰层的光泽反光），可以把lights设为true，但需要把基础色的纯色值做反向补偿：比如印刷层基础色不要用纯白，根据灯光照射强度微调为略高于纯白的数值（WebGL支持超过1的HDR色值），抵消光照带来的变暗影响；整饰层基础色不要用纯黑，微调为略低于纯黑的负值，抵消光照带来的变亮影响。

各图层专属参数调整 #

• 纸张层（最底层）：保留原有MeshStandardMaterial配置即可，保持depthWrite: true，renderOrder设为0，作为基础渲染层不参与混合计算。
• 印刷层（使用MultiplyBlending正片叠底模式）：基础色初始设为#ffffff，加载印刷纹理时把纹理的premultiplyAlpha设为false，关闭纹理预乘Alpha避免颜色发暗；两层印刷层的polygonOffsetFactor分别设为-1、-2，renderOrder分别设为1、2，保证从下往上按顺序渲染。
• 表面整饰层（使用AdditiveBlending加法混合模式）：基础色初始设为#000000，alphaMap绑定光泽遮罩纹理，金属度、粗糙度参数按光泽效果需求调整即可，polygonOffsetFactor设为-3，renderOrder设为3，放在最上层渲染。

验证方法 #

参数调整完成后先移除所有纹理，仅保留纯色基础色测试：此时开关印刷层、整饰层不应该出现任何视觉变化，确认纯色混合正常后，再逐步加载纹理、调整PBR参数，能快速定位配置问题。

长期优化建议 #

如果后续需要新增更多印刷工艺层（比如烫金、局部UV、压纹效果），不建议继续使用复制网格叠层的方案，可以自定义ShaderMaterial把所有纹理采样、混合逻辑整合到同一个材质中，既能彻底避免多层渲染的混合偏差问题，也能大幅降低渲染draw call提升性能。

内容的提问来源于stack exchange，提问作者matteo05vava