three.js使用AddEquation做径向渐变叠加出现异常暗边问题求解

安全阿岳

2026-10-7

问题根源

你遇到的渐变边缘暗带问题，核心是alpha预乘配置与混合公式不匹配，其次可能伴随深度写入/测试的配置错误。

具体原因分析

three.js的MeshBasicMaterial默认开启premultipliedAlpha: true，即纹理的RGB分量已经提前和alpha值相乘过。
你当前使用的混合参数对应计算公式为：

最终颜色 = 源颜色 * 源alpha + 目标颜色 * 1

由于源颜色已经预乘过一次alpha，公式中再次乘以源alpha就等于重复计算，当渐变边缘的alpha趋近于0时，该区域的颜色会被压得远低于预期，就会出现明显的深色暗带。

解决方案

有两种常用的修正方案，二选一即可：

方案1：调整混合参数匹配预乘alpha配置

保留默认的premultipliedAlpha: true，将源混合因子改为THREE.OneFactor，修正后混合公式刚好匹配预乘后的颜色计算逻辑，不会重复乘alpha：

const mat = new THREE.MeshBasicMaterial({
    alphaMap: grad2,
    blending: THREE.CustomBlending,
    blendEquation: THREE.AddEquation,
    blendSrc: THREE.OneFactor,
    blendDst: THREE.OneFactor,
    depthWrite: false // 额外关闭深度写入，避免同层级透明物体互相遮挡
});

方案2：关闭材质的预乘alpha选项

如果要保留你原来的SrcAlphaFactor源因子配置，显式关闭材质的预乘alpha即可：

const mat = new THREE.MeshBasicMaterial({
    alphaMap: grad2,
    blending: THREE.CustomBlending,
    blendEquation: THREE.AddEquation,
    blendSrc: THREE.SrcAlphaFactor,
    blendDst: THREE.OneFactor,
    premultipliedAlpha: false, // 关闭预乘alpha
    depthWrite: false
});