将含重力与方向力的Maya FBX动画导入Three.js

Hey there! Let's get that avocado split animation working smoothly in Three.js—sounds like you've got a great dynamic setup in Maya, so let's break down the workflow step by step:

1. 先把Maya动力学动画转成可导出的关键帧 #

因为你的动画是靠重力+方向力这类动力学驱动的，不是手动关键帧，Three.js没法直接识别动力学模拟数据，所以第一步得把运动烘焙成实打实的关键帧：

• 选中所有三个牛油果拆分部件
• 打开菜单：Edit > Keys > Bake Simulation
• 在设置窗口里重点配置：
  • Time Range：选择你的动画完整时长（比如第1帧到第100帧）
  • Channels：勾选Translate、Rotate、Scale，确保所有运动维度都被记录
  • 勾选Bake to Objects，把关键帧直接绑定到每个对象的属性上
• 点击Apply，现在每个部件的运动都变成了独立的关键帧，不再依赖Maya的动力学引擎了

2. 导出为Three.js友好的glTF格式 #

glTF是Three.js官方最推荐的模型/动画格式，对关键帧支持拉满：

• 保持三个部件选中状态，执行File > Export Selection
• 格式选glTF 2.0（推荐导出.glb单文件，更方便管理）
• 导出设置里：
  • 开启Animation选项，勾选Export Animations
  • 确保Include All Animation Curves被勾选，把所有烘焙的关键帧都打包进去
  • 单位选Meters（和Three.js默认单位一致，避免缩放混乱）
• 保存文件就搞定导出环节了

3. 在Three.js中加载并设置JS触发播放 #

接下来用Three.js加载模型，把动画绑定到JS事件上：

• 先引入必要的模块：

  import * as THREE from 'three';
  import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
  

• 加载模型并配置动画逻辑：

  let mixer;
  const loader = new GLTFLoader();
  
  loader.load('your-avocado-animation.glb', function(gltf) {
    const avocadoGroup = gltf.scene;
    scene.add(avocadoGroup);
  
    // 初始化动画混合器，用来管理所有对象的动画
    mixer = new THREE.AnimationMixer(avocadoGroup);
    // 获取动画剪辑（如果只有这一段动画，直接取数组第一个）
    const splitAnimation = gltf.animations[0];
    // 创建可控制的动画动作
    const animationAction = mixer.clipAction(splitAnimation);
    // 设置为只播放一次，避免循环
    animationAction.setLoop(THREE.LoopOnce);
    // 先暂停在初始状态，等待触发
    animationAction.pause();
  
    // 绑定JS事件，比如按钮点击触发播放
    document.getElementById('play-split-btn').addEventListener('click', function() {
      // 重置到动画开头再播放
      animationAction.reset();
      animationAction.play();
    });
  });
  
  // 别忘了在渲染循环里更新动画混合器
  function animate() {
    requestAnimationFrame(animate);
    if (mixer) {
      mixer.update(0.016); // 对应约60fps的时间步长
    }
    renderer.render(scene, camera);
  }
  animate();
  

额外小提示 #

• 不需要合并对象，只要Maya里的关键帧时间线对齐，Three.js的AnimationMixer会同步播放所有部件的动画，看起来就是一个完整的拆分效果
• 检查Maya里的对象原点和轴方向，避免导入后出现位移/旋转异常
• 如果动画速度不对，可以在Three.js里用animationAction.setDuration()调整时长，或者修改mixer.update()的参数

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