如何将Blender带动画3D网格导出为JSON并在Three.js r90中加载与排障

我刚好处理过类似的问题，结合你遇到的动画无法播放、SkinnedMesh损坏、网格与骨骼偏移的情况，整理出完整的解决流程和关键修复步骤：

一、先修复Blender中的模型变换问题（核心！） #

你遇到的所有导出异常，本质都是模型的骨骼姿态和对象变换没有重置，导致导出的JSON数据存在错误。按以下步骤操作：

• 姿态模式下重置骨骼
  切换到「姿态模式」，选中所有骨骼，执行菜单：姿态 -> 清除变换 -> 全部。这一步会把骨骼姿态重置到绑定前的初始状态，避免导出时骨骼数据混乱。
• 对象模式下重置全局变换
  切换回「对象模式」，选中模型对象，依次执行：
  • 对象 -> 清除位置
  • 对象 -> 清除旋转
  • 对象 -> 清除缩放
  • 对象 -> 清除原点
    这一步会把模型的全局变换全部归零，确保导出的模型原点与世界原点对齐，彻底解决加载时的偏移问题。

二、导出适配Three.js r90的JSON文件 #

完成重置后，使用对应r90版本的Three.js Blender导出器导出：

1. 确保你安装了适配Three.js r90的Blender导出插件（注意版本匹配，不同版本的导出器数据格式差异很大）
2. 选中带动画的网格对象，打开导出菜单选择Three.js (.json)
3. 在导出设置里，务必勾选「动画」选项，如果是蒙皮模型，还要确认「蒙皮」选项已开启，然后导出JSON文件。

三、Three.js r90中加载并播放动画 #

r90版本使用THREE.JSONLoader来加载JSON格式的模型，加载时要注意开启材质的蒙皮支持，示例代码如下：

// 初始化JSON加载器
var loader = new THREE.JSONLoader();
// 加载模型文件
loader.load('your-model.json', function(geometry, materials) {
  // 创建SkinnedMesh，必须开启skinning:true
  var skinnedMesh = new THREE.SkinnedMesh(
    geometry,
    new THREE.MeshStandardMaterial({
      skinning: true,
      color: 0xffffff,
      // 可根据需求添加其他材质参数
    })
  );
  // 初始化并播放动画
  var animation = new THREE.Animation(skinnedMesh, geometry.animation);
  animation.play();
  // 将模型添加到场景
  scene.add(skinnedMesh);
});

内容的提问来源于stack exchange，提问作者Игорь Токарев