THREE.js中DstAlphaFactor不生效，Alpha混合结果不符预期

嘿，我来帮你理清这个Alpha混合的问题，核心原因其实是你没给WebGLRenderer启用Alpha通道！

问题根源：缺少Alpha缓冲区 #

Three.js的WebGLRenderer默认是不创建Alpha缓冲区的（也就是alpha: false），这意味着：

• 你设置的renderer.setClearAlpha(0.1)根本不会生效，因为帧缓冲区里根本没有Alpha通道可以存储这个值；
• 所有针对Alpha通道的混合因子（比如你用的THREE.DstAlphaFactor）都会失效，WebGL会默认把目标Alpha值当成1来处理——这就是为什么你的圆形会显示红色：1 * 红色 * 0.1 + 0 * 目标颜色，结果就是浅红色，和你截图的效果一致。

正确的混合工作逻辑（启用Alpha缓冲区后） #

当你给Renderer加上alpha: true后，帧缓冲区会包含RGBA四个通道，此时自定义混合的计算逻辑就会按你预期的执行：

1. 平面渲染阶段：
   • 颜色通道：newColor = 0 * 平面颜色 + 0 * 初始帧缓冲颜色 = 0（完全覆盖成黑色）
   • Alpha通道：newAlpha = 0 * 平面Alpha(0.1) + 0 * 初始帧缓冲Alpha(0.1) = 0（帧缓冲Alpha被设为0）
2. 圆形渲染阶段：
   • 颜色通道：newColor = 帧缓冲Alpha(0) * 圆形颜色 + 0 * 当前帧缓冲颜色 = 0（红色被乘以0，完全透明）
   • Alpha通道：因为你没给圆形材质单独设置Alpha混合参数，会沿用颜色通道的混合规则，结果也是0。

修复代码 #

只需要在创建Renderer时加上alpha: true选项：

let renderer = new THREE.WebGLRenderer({ alpha: true });
// 如果不想页面背景透明，可以把clearAlpha设回1.0
renderer.setClearColor(0xEEEEEE);
renderer.setClearAlpha(1.0);

修改后再运行，圆形就会消失，完全符合你预期的0xff0000 * 0 = 0x000000效果啦。

额外注意点 #

• 启用Alpha缓冲区后，页面背景会默认透明（因为renderer的clearAlpha生效了），如果需要不透明背景，记得把setClearAlpha设为1.0；
• 自定义混合时，如果你想让颜色和Alpha通道用不同的混合规则，一定要单独设置blendEquationAlpha、blendSrcAlpha、blendDstAlpha这三个参数，否则会沿用颜色通道的规则。

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