使用GLTFExporter导出ThreeJS模型后纹理异常求助

你遇到的纹理错乱问题，大概率是模型合并过程中的材质/UV处理不当，或是GLTFExporter的参数配置缺失导致的，以下是具体排查和修复步骤：

1. 检查模型合并逻辑（核心问题） #

Mixamo的动画FBX文件通常只包含骨骼动画数据，不带材质和纹理。如果你的合并逻辑是将动画FBX的网格与原模型网格合并，会导致原模型的UV映射或材质被覆盖，进而出现纹理错乱。

正确的做法是：只提取动画FBX中的动画剪辑，绑定到原模型上，而非合并网格：

// 示例：加载Mixamo动画FBX并提取动画
const fbxLoader = new FBXLoader();
fbxLoader.load('mixamo_animation.fbx', (animModel) => {
  // 将动画剪辑添加到主模型的animations数组
  animModel.animations.forEach(clip => {
    mainModel.animations.push(clip);
  });
});

2. 调整GLTFExporter参数 #

当前代码未配置纹理嵌入，且可能遗漏了关键序列化选项，建议修改参数如下：

const exporter = new GLTFExporter();

exporter.parse(
    mainModel,
    function(gltf) {
        const blob = new Blob([JSON.stringify(gltf)], {type: 'text/plain'});
        const link = document.createElement('a');
        link.download = 'model.gltf';
        link.href = URL.createObjectURL(blob);
        link.click();
    },
    function ( error ) {
        console.error('导出错误:', error);
    },
    {
        binary: false,
        animations: mainModel.animations,
        maxTextureSize: 4096,
        includeCustomExtensions: true,
        embedImages: true, // 将纹理嵌入GLTF文件，避免路径或引用问题
        truncateDrawRange: true, // 仅导出模型实际使用的网格数据
        exportMaterials: 'pbrSpecularGlossiness' // 确保材质符合GLTF标准（适配Godot）
    }
);

3. 验证材质与UV的正确性 #

导出前遍历模型，确认每个网格的材质和UV属性正常：

mainModel.traverse((child) => {
  if (!child.isMesh) return;

  // 检查UV属性是否存在
  if (!child.geometry.hasAttribute('uv')) {
    console.warn(`网格[${child.name}]缺失UV坐标，会导致纹理错乱`);
  }

  // 检查材质纹理是否正确绑定
  if (child.material.map) {
    console.log(`网格[${child.name}]纹理绑定正常:`, child.material.map.source.data);
  } else {
    console.warn(`网格[${child.name}]未绑定纹理`);
  }
});

4. 排查Three.js版本兼容性 #

部分旧版本的GLTFExporter对Mixamo FBX导入后的材质支持存在bug，建议使用最新稳定版的Three.js（r150+），避免因版本问题导致的序列化错误。

内容的提问来源于stack exchange，提问作者Daniele Salvatore Albano