You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何将Blender动作编辑器中的动作导出至ThreeJS并按名调用

解决Blender 2.79b + ThreeJS r95 角色动作导出与加载问题

我刚好有过用Blender 2.79b和ThreeJS r95做角色动画的经验,给你梳理一下完整的解决方案,包括导出器的正确配置、加载代码的注意点,以及常见问题的排查:

一、先搞定适配r95的导出器与导出设置

你遇到的加载问题很大概率是导出器版本不匹配导致的——Blender 2.79b自带的ThreeJS导出器适配的是更早的ThreeJS版本,和r95不兼容,得换对应版本的导出脚本:

  • 安装正确的导出器

    1. 找到ThreeJS r95源码包的utils/exporters/blender/2.79目录,里面有个io_three文件夹。
    2. 把这个文件夹复制到Linux下Blender的插件目录:~/.config/blender/2.79/scripts/addons/
    3. 打开Blender,进入File > User Preferences > Add-ons,搜索Three.js Format,勾选启用后保存用户设置。
  • 导出前的关键配置(必看)
    选中你的绑定网格和骨骼,然后打开导出窗口(File > Export > Three.js (.json)),在右侧面板里做这些设置:

    • 勾选Export Animation,在Animation Options里选All Actions(或者你需要导出的特定动作)。
    • 必须勾选Bone Animation(这是绑定网格动画的核心),同时确保Export GeometryExport Materials(如果需要材质的话)也勾选。
    • Path ModeRelative或者Copy,避免纹理路径出错。
    • 确认导出版本选择r95(部分导出器会有版本下拉选项,一定要选对)。

二、加载JSON时的常见问题与修复方案

1. 控制台报"Cannot read property 'xxx' of undefined"

这通常是加载方式不对,r95的JSONLoader有特定的用法,而且必须用SkinnedMesh来承载绑定网格:

// 用r95原生的JSONLoader,不要用新版本的GLTFLoader
var loader = new THREE.JSONLoader();
loader.load('your-character.json', function(geometry, materials) {
  // 开启材质的蒙皮属性,这是骨骼动画生效的关键
  var material = new THREE.MeshStandardMaterial({
    skinning: true,
    map: materials[0]?.map // 如果导出了纹理,这里可以引用,没有的话删掉这行
  });
  // 必须用SkinnedMesh,不能用普通Mesh
  var characterMesh = new THREE.SkinnedMesh(geometry, material);
  
  // 提取动画剪辑,按名称调用你在Blender里做的动作
  var animations = geometry.animations;
  var mixer = new THREE.AnimationMixer(characterMesh);
  // 比如你在Blender里的动作叫"Idle",就这么调用
  var idleAction = mixer.clipAction(animations.find(clip => clip.name === "Idle"));
  idleAction.play();
  
  scene.add(characterMesh);
});

2. 模型加载后没动画,或者动画错乱

  • 先回Blender检查动作:确认每个动作的起止帧正确,没有多余关键帧,在Blender里播放动作看是否正常。导出单个动作的话,要先在Action Editor里切换到该动作再导出。
  • 别忘了在渲染循环里更新AnimationMixer,否则动画不会动:
var clock = new THREE.Clock();
function animate() {
  requestAnimationFrame(animate);
  var deltaTime = clock.getDelta();
  if (mixer) {
    mixer.update(deltaTime);
  }
  renderer.render(scene, camera);
}
animate();

3. 材质丢失或显示异常

  • 如果导出的材质有问题,干脆手动在ThreeJS里创建材质,不要依赖导出的材质,这样更稳定。
  • 纹理路径要正确:把纹理文件和JSON放在同一目录,或者加载时手动指定纹理路径。

三、额外的避坑提示

  • Blender里的骨骼、动作名称尽量用英文,别用中文或特殊字符,避免加载时出现解析问题。
  • 绑定网格时,确保所有顶点都分配了权重,没有遗漏的顶点,不然加载后模型可能变形。
  • 排查问题时先做简化测试:导出一个带简单骨骼动作的立方体,先确认加载和动画正常,再逐步过渡到复杂角色。

内容的提问来源于stack exchange,提问作者Chicken-Island LWOS

火山引擎 最新活动