Three.js创建动画动作报错：PropertyBinding无法解析.bones[].position

嘿，我来帮你搞定这个头疼的宝箱动画报错～你遇到的PropertyBinding: Cannot parse trackName: .bones[].position错误，核心原因是动画轨道的命名格式不符合Three.js的解析规则，尤其是骨骼动画的轨道名称写法太模糊了。

为啥会报错？ #

Three.js的动画系统需要明确知道你要动画哪个骨骼的属性，轨道名称里的bones[]是空的，解析器根本搞不清你要动哪根骨头！合法的骨骼轨道名称必须带上具体的骨骼索引（比如.bones[0].position）或者骨骼名称（比如.bones["chestLid"].position），空括号[]是完全不被认可的。

具体怎么解决？ #

我给你分步骤来：

• 第一步：修正动画JSON里的轨道名称
  打开你的动画JSON文件，找到tracks数组，把所有类似.bones[].position、.bones[].rotation的轨道名称，替换成具体的标识：

  • 用索引：比如宝箱盖子骨骼是第0个，就改成".bones[0].position"
  • 用名称：如果导出模型时给骨骼起了名字（比如叫chestLid），改成".bones['chestLid'].position"会更直观

• 第二步：重新生成/调整Animation Clip
  如果你是用工具（比如Blender）导出的动画，检查导出设置，确保骨骼动画数据是绑定到具体骨骼节点的，别输出空括号的轨道名；如果是手动创建KeyframeTrack，一定要写对轨道名称，比如：

  // 正确的轨道名称示例
  const lidPositionTrack = new THREE.VectorKeyframeTrack(
    ".bones[0].position",
    [0, 1.5], // 动画时间点
    [0, 0, 0,  0, 0.8, 0] // 对应时间的位置值
  );
  const openChestClip = new THREE.AnimationClip("openChest", 1.5, [lidPositionTrack]);
  

• 第三步：验证动画动作创建
  改完轨道名称后，再创建AnimationAction就不会报错了，示例代码：

  const mixer = new THREE.AnimationMixer(chestMesh);
  const openAction = mixer.clipAction(openChestClip);
  openAction.setLoop(THREE.LoopOnce);
  openAction.play();
  

额外小提示 #

Three.js r91dev的动画系统规则和稳定版一致，别因为是开发版就怀疑规则～如果是外部模型导出的问题，大概率是导出工具没正确映射骨骼，比如Blender导出时要确保选中了骨骼动画相关的选项，别漏了骨骼的名称或索引信息。

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