如何在Three.js材质的自定义片元着色器中设置Alpha透明度？

核心问题原因 #

Three.js 的 MeshStandardMaterial 默认不启用透明渲染逻辑，且直接替换整个片元着色器会丢失内置的光照、颜色处理流程，导致 Alpha 通道无法正确生效。

修复步骤及代码示例 #

1. 启用透明属性
   必须显式开启材质的 transparent: true，否则 Three.js 会关闭颜色混合，Alpha 值会被忽略或仅作为不透明度测试使用。

2. 正确修改片元着色器
   不要直接替换整个片元着色器代码，而是在内置着色器的最终输出环节插入 Alpha 调整逻辑，保留原有光照、纹理等计算流程。

修改后的材质代码：

const material1 = new THREE.MeshStandardMaterial({
    transparent: true, // 关键：开启透明渲染
    // 可添加其他基础属性，如 color: 0xffffff, roughness: 0.5
    onBeforeCompile: (shader) => {
        shader.uniforms.time = { value: 0 };

        // 在片元着色器最终输出前修改 Alpha 值
        shader.fragmentShader = shader.fragmentShader.replace(
            '#include <dithering>', // 找到内置抖动处理的位置
            `
            gl_FragColor.a = 0.1; // 设置目标透明度
            #include <dithering> // 保留原有抖动逻辑
            `
        );

        shader.vertexShader = 'uniform float time;\n'
            + 'varying vec3 vPosition;\n'
            + shader.vertexShader;
        shader.vertexShader = shader.vertexShader.replace(
            '#include <begin_vertex>',
            shaderData.vertex
        );
        material1.userData.shader = shader;
    },
});

额外排查点 #

• 若设置了 alphaTest 属性，会优先进行不透明度测试，可能掩盖 Alpha 混合效果，需移除或调整该值。
• 若透明物体渲染顺序异常，可尝试关闭 depthWrite: false（需注意可能导致的遮挡问题）。

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