Three.js加载GLTF模型后无法获取Mesh及Material，如何解决？

你遇到的核心问题是对GLTF模型的节点结构理解有误，且遍历日志的输出逻辑误导了你：GLTF模型加载后，gltf.scene通常是一个嵌套了多层节点的Group，其中包含Mesh，但也存在大量非Mesh类型的节点（比如子Group、骨骼节点等）。你当前的代码会对每个非Mesh节点打印“no mesh found”，导致你误以为没有Mesh存在，但实际上Mesh是存在的。

1. 正确遍历并识别Mesh #

修改遍历逻辑，只在找到Mesh时输出日志，避免非Mesh节点的日志干扰：

gltf.scene.traverse((o) => {
    if (o.isMesh) {
        console.log("找到Mesh:", o);
        console.log("材质:", o.material);
        // 在这里修改材质透明度
        o.material.transparent = true;
        o.material.opacity = 0.5; // 透明度值范围0-1，0为完全透明
        // 可选：解决透明物体渲染遮挡问题
        // o.material.depthWrite = false;
        // 若材质带alpha纹理，可添加alphaTest控制透明区域
        // o.material.alphaTest = 0.5;
    }
});

2. 透明度设置的关键细节 #

设置透明度必须同时开启material.transparent = true，否则opacity属性不会生效。此外：

• 若使用MeshStandardMaterial等PBR材质，确保材质模式支持透明；
• 若透明物体出现渲染顺序错乱，可关闭depthWrite；
• 带alpha通道的纹理需要配合alphaTest或alphaBlend使用。

修正后的核心加载代码 #

无需手动提取children[0]，直接将整个GLTF场景添加到主场景即可，再通过遍历找到所有Mesh：

loader.load("https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf", function (gltf) {
    scene.add(gltf.scene);

    gltf.scene.traverse((o) => {
        if (o.isMesh) {
            console.log("找到Mesh:", o);
            console.log("材质:", o.material);
            // 设置半透明
            o.material.transparent = true;
            o.material.opacity = 0.5;
        }
    });
}, undefined, function (error) {
    console.error(error);
});

额外说明 #

• 不同GLTF模型的节点结构差异很大，不要依赖children[0]直接获取Mesh，traverse递归遍历是最可靠的方式；
• 若需要批量修改材质属性，可在遍历逻辑中统一处理所有Mesh的材质。

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