Three.js着色器问题：Alpha纹理结合渐变时透明度失效如何解决

问题根源 #

你的代码存在两个核心错误：

• transparent: true被错误放在uniforms对象中，这是ShaderMaterial的顶层配置属性，不属于uniform变量范畴，导致Three.js未启用透明渲染逻辑。
• Alpha纹理加载时大概率未设置flipY: false，UV坐标翻转会导致Alpha通道采样异常。

修正步骤与代码 #

1. 调整材质配置结构

将transparent: true移至ShaderMaterial的根属性层级，同时添加depthWrite: false（推荐项，解决透明物体渲染遮挡问题）。

2. 规范纹理加载设置

加载Alpha纹理时强制设置flipY: false，避免UV坐标翻转引发的采样错误。

完整修正代码

// 正确加载Alpha纹理
const alphaTexture = new THREE.TextureLoader().load('你的Alpha纹理路径.png', (texture) => {
  texture.flipY = false; // 关键：修正UV采样方向
});

const geometry = new THREE.BoxGeometry(32, 32);
const material = new THREE.ShaderMaterial({
  transparent: true, // 移至材质顶层属性，启用透明渲染
  depthWrite: false, // 可选：解决透明物体渲染顺序冲突
  uniforms: {
    alphaMap: { value: alphaTexture },
    color1: { value: new THREE.Color("purple") },
    color2: { value: new THREE.Color("red") }
  },
  vertexShader: `
varying vec2 vUv;

void main() {
  vUv = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
  fragmentShader: `
uniform vec3 color1;
uniform vec3 color2;
uniform sampler2D alphaMap;
varying vec2 vUv;

void main() {
  float alpha = texture2D(alphaMap, vUv).r;
  vec3 color = mix(color1, color2, vUv.y);
  gl_FragColor = vec4(color, alpha);
}
`,
});

额外优化提示 #

如果你的Alpha纹理是带原生透明通道的PNG文件，建议将texture2D(alphaMap, vUv).r改为texture2D(alphaMap, vUv).a，直接读取纹理的Alpha通道，逻辑更贴合纹理用途。

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