Three.js加载GLTF模型丢失节点数据及网格问题求助

一、几何节点生成的糖屑未加载问题 #

GLTF/GLB格式不支持实时几何节点计算，Blender内的几何节点效果仅在编辑器中生效，导出时不会自动将动态生成的网格转为静态数据。解决步骤：

1. 在Blender中选中带几何节点的糖屑对象；
2. 按Ctrl+A选择「应用几何节点」，将动态生成的网格转为静态实体；
3. 重新导出GLB文件，确保勾选「导出可见对象」。

二、糖霜网格Z-fighting/缺失问题 #

Z-fighting是因为糖霜与甜甜圈本体的面距离过近，GPU无法正确判断渲染层级。可从两方面解决：

1. Blender导出前处理 #

• 给糖霜添加挤出修改器，设置微小的挤出厚度（比如0.001），拉开与本体的面距离；
• 检查糖霜和本体的网格是否存在面重叠，删除多余的重叠面。

2. Three.js加载时处理 #

遍历模型找到糖霜网格，开启多边形偏移：

assetLoader.load(donutUrl.href, function(gltf){
    const model = gltf.scene
    model.scale.set(2,2,2)
    model.position.set(0, 1, 0)
    
    model.traverse((obj) => {
        if(obj.isMesh) {
            // 替换为你糖霜对象的实际名称
            if(obj.name === 'Frosting') { 
                obj.material.polygonOffset = true;
                obj.material.polygonOffsetFactor = -1;
                obj.material.polygonOffsetUnits = -1;
            }
        }
    })
    
    scene.add(model)
}, undefined, function(err){
    console.log(err)
})

三、Parcel资源复制验证 #

确认Parcel正确打包GLB文件：

• 检查dist目录下是否存在big_donut.glb；
• 若未自动复制，可在package.json中添加资源配置：

  "assets": ["src/assets/**/*"]
  

四、GLB导出检查清单 #

导出时确保以下设置正确：

• 勾选「应用变换」，避免缩放/旋转导致的坐标异常；
• 取消「仅选中对象」（需导出所有模型时）；
• 「几何体」选项中勾选「导出网格数据」「导出UV」。

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