BabylonJS动态生成动画无法播放问题求助

问题描述 #

• 开发自定义AnimationSequencer类，核心逻辑：传入关键帧组后，动态为每个关键帧组生成Animation实例，将这些动画添加至AnimationGroup，调用playAll()方法播放动画组。
• 运行程序时控制台报错，疑似将Babylon场景传入JS类后，类上下文内的动画播放流程出现异常。
• 直接通过一等函数执行相同流程（非动态实现、不使用自定义类）时，动画播放完全正常。

可能的原因 #

1. 场景引用未正确绑定：类中存储的场景实例可能未在构造时正确赋值，或者后续操作中引用丢失，导致创建动画相关对象时无法关联到正确的场景上下文。
2. Animation实例参数缺失：动态生成Animation时，可能遗漏了scene参数，或者参数传递方式与一等函数版本不一致，导致动画无法挂载到场景。
3. AnimationGroup生命周期问题：类中创建的AnimationGroup未被场景正确追踪，或者调用playAll()时动画组尚未完成初始化。

解决方案 #

1. 显式绑定场景引用 #

在类的构造函数中明确接收并存储场景实例，避免隐式依赖：

class AnimationSequencer {
  constructor(scene) {
    this.scene = scene;
    this.animationGroup = new BABYLON.AnimationGroup("sequencer-group", this.scene);
  }

  // 其他方法实现
}

2. 确保Animation实例参数完整 #

动态创建Animation时，严格对齐一等函数版本的参数配置，尤其要明确传入场景引用：

createAnimation(keyframeGroup) {
  const anim = new BABYLON.Animation(
    keyframeGroup.name,
    keyframeGroup.targetProp,
    keyframeGroup.frameRate,
    keyframeGroup.animType,
    keyframeGroup.loopMode,
    false,
    false,
    this.scene // 传入类中存储的场景实例
  );
  anim.setKeys(keyframeGroup.keys);
  return anim;
}

3. 确保AnimationGroup被场景追踪 #

添加动画到组后，确认动画组已被场景的animationGroups集合包含，必要时手动添加：

addAnimations(animations, targets) {
  animations.forEach((anim, idx) => {
    this.animationGroup.addTargetedAnimation(anim, targets[idx]);
  });
  // 确保动画组被场景注册
  if (!this.scene.animationGroups.includes(this.animationGroup)) {
    this.scene.animationGroups.push(this.animationGroup);
  }
}

playSequence() {
  // 延迟一帧播放，确保动画组完成初始化
  this.scene.onBeforeRenderObservable.addOnce(() => {
    this.animationGroup.playAll();
  });
}

4. 调试要点 #

• 在类的关键方法中打印this.scene、this.animationGroup及每个Animation实例的属性，验证引用的正确性。
• 逐行对比一等函数版本与类版本的代码，重点检查场景参数传递、动画对象创建的差异。

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