THREE.js GLTFLoader加载模型Alpha透明失效显示白色背景的解决方法

在Blender中制作了一个模型，已将纹理的白色背景转换为Alpha通道，并设置BlendMode为AlphaClip（使用Opaque模式无效）。但使用THREE.js的GLTFLoader按如下代码加载模型时，Alpha透明效果未正常生效，模型呈现白色背景：

const gltfLoader = new GLTFLoader();
var loader = gltfLoader.load(gltfPath, (result) => {
    let root: Group = result.scene

    root.scale.setScalar(10);
    root.name = name;
    root.castShadow = true; 
    root.receiveShadow = true;
    //root.rotation.x = -90;

    let objectWrapper = new Object3D();
    objectWrapper.add(root);

    resolve(objectWrapper);
    console.log("Called!")
});
});

请问该如何修复此问题？是否有Alpha透明的替代实现方法或GLTFLoader的相关设置可调整？

1. 手动开启材质的AlphaTest #

GLTFLoader有时无法正确识别Blender中设置的AlphaClip，加载完成后遍历模型所有材质，强制启用alphaTest即可：

const gltfLoader = new GLTFLoader();
gltfLoader.load(gltfPath, (result) => {
    let root: Group = result.scene;

    // 遍历所有网格对象，配置材质
    root.traverse((obj) => {
        if ('material' in obj && obj.material) {
            const material = obj.material as THREE.MeshStandardMaterial;
            material.alphaTest = 0.5; // 阈值可根据纹理透明度调整，范围0-1
            material.needsUpdate = true;
        }
    });

    root.scale.setScalar(10);
    root.name = name;
    root.castShadow = true; 
    root.receiveShadow = true;

    let objectWrapper = new THREE.Object3D();
    objectWrapper.add(root);

    resolve(objectWrapper);
    console.log("Called!")
});

2. 检查Blender的GLTF导出设置 #

导出时务必确认以下选项：

• 勾选「导出材质」，将Alpha模式设置为CLIP（对应Blender的AlphaClip）
• 确保纹理的Alpha通道未被忽略，导出面板中不要取消勾选「包含Alpha」
• 确认Principled BSDF材质的Alpha输入已连接到纹理的Alpha通道

3. 替代方案：使用AlphaBlend模式 #

如果AlphaClip无法满足需求，比如需要半透明效果，可以切换为AlphaBlend模式：

root.traverse((obj) => {
    if ('material' in obj && obj.material) {
        const material = obj.material as THREE.MeshStandardMaterial;
        material.transparent = true;
        material.blending = THREE.NormalBlending; // 可选AdditiveBlending等模式
        material.depthWrite = false; // 避免半透明物体遮挡后续渲染，按需开启
        material.needsUpdate = true;
    }
});

注意：使用AlphaBlend时，可能需要调整物体的renderOrder来解决层级渲染问题。

4. 排查纹理有效性 #

• 用纹理查看工具确认导出的纹理确实包含Alpha通道
• 确保外部纹理文件（如PNG）未丢失Alpha信息，且THREE.js能正常加载

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