如何在Three.js的JSON文件中设置对象父级变更动画？

嘿，这个问题确实戳中了Three.js JSON动画格式的一个小盲区——原生确实没有支持父级变更的ObjectKeyframeTrack，不过咱们有两种靠谱的 workaround 能实现需求，我给你拆解清楚：

方案一：用自定义属性驱动父级切换 #

Three.js允许给对象添加自定义属性，咱们可以利用这一点，在JSON动画里定义一个标记父级切换的数值属性，然后加载后通过代码监听这个属性的变化，动态调整对象的父级。

具体步骤： #

1. 在你的JSON文件里，给目标对象添加一个NumberKeyframeTrack，用来控制自定义的父级索引属性：

{
  "animations": [
    {
      "name": "ParentSwitchAnimation",
      "tracks": [
        {
          "name": "TargetObject.parentIndex",
          "type": "number",
          "times": [0, 2, 4], // 时间点（秒）
          "values": [0, 1, 0] // 对应父级的索引：0=父A，1=父B，最后切回父A
        }
      ]
    }
  ],
  "objects": [
    // 这里定义你的父级对象（比如id为0的ParentA，id为1的ParentB）和目标对象TargetObject
  ]
}

2. 加载JSON后，在动画循环中监听这个属性，触发父级切换：

const mixer = new THREE.AnimationMixer(scene);
const clip = THREE.AnimationClip.findByName(animations, "ParentSwitchAnimation");
const action = mixer.clipAction(clip);
action.play();

// 把所有可能的父级对象存在一个数组里，和JSON里的索引对应
const parentPool = [parentA, parentB];

function animate() {
  requestAnimationFrame(animate);
  mixer.update(0.016); // 按60fps更新
  
  // 取当前的父级索引（用round确保是整数）
  const targetParentIdx = Math.round(targetObject.parentIndex);
  // 如果当前父级和目标不一致，就切换
  if (targetObject.parent !== parentPool[targetParentIdx]) {
    targetObject.removeFromParent();
    parentPool[targetParentIdx].add(targetObject);
  }
  
  renderer.render(scene, camera);
}

方案二：用虚拟对象做中间代理 #

另一种思路是让目标对象始终绑定到一个虚拟空对象上，然后动画驱动这个虚拟对象的父级变更。本质和方案一类似，但可以让目标对象的本地变换保持稳定：

1. 在JSON里创建一个虚拟对象（比如ProxyObj），让目标对象作为它的子级。
2. 给ProxyObj添加自定义的父级索引属性，加载后监听这个属性来切换ProxyObj的父级，间接实现目标对象的父级变更。

为啥原生不支持？ #

Three.js的核心动画系统是针对连续属性插值设计的（比如位置、旋转、缩放），而父级变更属于离散的场景结构修改，不是连续的数值变化，所以没有内置对应的KeyframeTrack类型。这种操作更偏向场景逻辑的动态调整，通常需要结合少量代码来衔接。

需要注意的是，这两种方案都需要加载JSON后添加几行JS代码——毕竟JSON格式本身只能描述静态结构和连续属性动画，没法直接表达离散的层级修改逻辑。

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