问题背景 #

在Electron环境下基于Three.js开发游戏，导入Blender导出的带烘焙动画GLB模型时出现异常：加载动画后网格出现挤压变形，但通过SkeletonHelper查看的骨骼显示正常、动画播放无问题；不加载动画时网格显示正常。模型在Don McCurdy glTF Viewer、Babylon.js沙盒中加载完全正常，经Khronos glTF验证仅提示未使用TEXCOORD_0。

可能根源及解决方向 #

1. AnimationMixer初始化时机不当 #

若在SkinnedMesh的骨骼权重数据未完全就绪时启动AnimationMixer，可能导致网格变形。需确保模型加载完成后，先确认骨骼数据初始化，再创建动画混合器：

const loader = new THREE.GLTFLoader();
loader.load('your-model.glb', (gltf) => {
    scene.add(gltf.scene);
    
    // 遍历确保SkinnedMesh的骨骼纹理计算完成
    gltf.scene.traverse(child => {
        if (child.isSkinnedMesh) {
            child.skeleton.computeBoneTexture();
        }
    });
    
    // 确保骨骼数据就绪后再初始化动画混合器
    mixer = new THREE.AnimationMixer(gltf.scene);
    const action = mixer.clipAction(gltf.animations[0]);
    action.play();
});

2. Three.js版本兼容性问题 #

不同版本的Three.js对glTF烘焙动画的解析逻辑存在差异，建议切换至稳定版本（如r158、r160）测试，避免使用过旧或处于测试阶段的版本。

3. Blender导出烘焙动画的细节问题 #

即使模型在其他Viewer正常，Three.js对部分烘焙细节的处理更严格：

• 重新检查Blender烘焙动画设置：确保仅烘焙目标骨骼，无多余变换数据；
• 导出glTF时，确认"Animation"选项中Sample Animations的采样率与游戏运行帧率匹配（如30fps）；
• 彻底清除模型的约束、驱动关键帧，导出前执行Object > Clear > All Transforms重置变换。

4. 骨骼权重数据异常 #

Three.js默认限制每个顶点最多绑定4个骨骼权重，若Blender中顶点权重超出该限制或分配异常，可能导致变形：

• 在Blender的"权重绘制"模式下检查顶点权重分布，修正极端权重值；
• 重新烘焙骨骼权重，确保权重分配符合Three.js的要求。

5. Electron环境WebGL上下文差异 #

Electron的Chromium内核可能存在WebGL特性差异：

• 将游戏代码在普通Chrome浏览器中运行，若问题消失，需调整Electron的WebGL相关设置：

  const mainWindow = new BrowserWindow({
      webPreferences: {
          webgl: true,
          hardwareAcceleration: true // 或尝试设为false测试
      }
  });
  

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