如何将Blender动作编辑器中的动作导出至ThreeJS并按名调用
解决Blender 2.79b + ThreeJS r95 角色动作导出与加载问题
我刚好有过用Blender 2.79b和ThreeJS r95做角色动画的经验,给你梳理一下完整的解决方案,包括导出器的正确配置、加载代码的注意点,以及常见问题的排查:
一、先搞定适配r95的导出器与导出设置
你遇到的加载问题很大概率是导出器版本不匹配导致的——Blender 2.79b自带的ThreeJS导出器适配的是更早的ThreeJS版本,和r95不兼容,得换对应版本的导出脚本:
安装正确的导出器:
- 找到ThreeJS r95源码包的
utils/exporters/blender/2.79目录,里面有个io_three文件夹。 - 把这个文件夹复制到Linux下Blender的插件目录:
~/.config/blender/2.79/scripts/addons/。 - 打开Blender,进入
File > User Preferences > Add-ons,搜索Three.js Format,勾选启用后保存用户设置。
- 找到ThreeJS r95源码包的
导出前的关键配置(必看):
选中你的绑定网格和骨骼,然后打开导出窗口(File > Export > Three.js (.json)),在右侧面板里做这些设置:- 勾选
Export Animation,在Animation Options里选All Actions(或者你需要导出的特定动作)。 - 必须勾选
Bone Animation(这是绑定网格动画的核心),同时确保Export Geometry、Export Materials(如果需要材质的话)也勾选。 Path Mode选Relative或者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




