How to dynamically adjust timeScale while maintaining animation continuity? (Real-time speed control for playing animations)

[volcanoqq]

Background

I'm using Tween.js with Three.js to implement camera roaming animations, where I smoothly transition the camera's position and target via . The animation consists of multiple segments, each with fixed target positions, targets, and durations.OrbitControls

Problem

I need to implement real-time speed control (e.g., dynamically adjusting to 0.5x, 1x, 2x, etc.) so that playing animations can continue at the new speed, while maintaining correct time progress after pausing/resuming. However, I’m facing the following issues:

• Directly modifying the animation’s causes incorrect remaining time calculations for the current segment (e.g., sudden jumps when speeding up).

// This will affect the animation that is in play.
setTimeScale(scale) {
    const duration = this.currentTween.getDuration();
    this.currentTween.duration(duration / scale);
  }

The desired behavior is similar to video player speed control: animations should transition smoothly after speed changes, remaining time should scale proportionally with the new speed, and playback should resume from the correct position after pausing.

[volcanoqq]

import * as TWEEN from '@tweenjs/tween.js';
import Animator from '../utils/myUtils/Animator';

// 相机漫游控制器（使用OrbitControls的target属性）
export default class ControlsTargetCameraAnimator {
  static instance = null;

  constructor() {
    if (ControlsTargetCameraAnimator.instance) {
      return ControlsTargetCameraAnimator.instance;
    }

    this.camera = threeMgr.viewer.camera.object;
    this.controls = threeMgr.viewer.camera.orbit; // 必须传入轨道控制器
    this.currentTween = null;
    this.isPlaying = false;
    this.updateCallback = null;
    this.timeScale = 1;
    this.initAnimation();

    ControlsTargetCameraAnimator.instance = this;
  }

  static getInstance() {
    if (!ControlsTargetCameraAnimator.instance) {
      return (ControlsTargetCameraAnimator.instance = new ControlsTargetCameraAnimator());
    }
    return ControlsTargetCameraAnimator.instance;
  }

  initAnimation() {
    Animator.getInstance().add(() => {
      if (this.currentTween) {
        this.currentTween.update();
      }
    });
  }

  onUpdate(cb) {
    cb && (this.updateCallback = cb);
  }

  /**
   * 开始相机漫游动画
   * @param {Array} positions 相机位置数组，每个元素为[x, y, z]
   * @param {Array} targets 控制器目标点数组，每个元素为[x, y, z]
   * @param {Array} durations 每段动画的持续时间数组(毫秒)
   * @param {Function} onSegmentStart 每段开始的回调 (index) => {}
   * @param {Function} onSegmentComplete 每段结束的回调 (index, isLast) => {}
   * @param {Function} onAllComplete 所有动画完成的回调 () => {}
   */
  startAnimation(
    positions,
    targets,
    durations,
    onSegmentStart,
    onSegmentComplete,
    onAllComplete,
    onSegmentUpdate
  ) {
    // 验证输入
    if (!this.controls) {
      console.error('必须传入OrbitControls实例');
      return;
    }
    if (positions.length !== targets.length || positions.length !== durations.length) {
      console.error('位置、目标和时间数组长度必须一致');
      return;
    }

    // 停止当前动画
    if (this.currentTween) {
      this.currentTween.stop();
    }

    this.isPlaying = true;
    this._animateSegment(
      0,
      positions,
      targets,
      durations,
      onSegmentStart,
      onSegmentComplete,
      onAllComplete,
      onSegmentUpdate
    );
  }

  /**
   * 执行单个片段的动画
   */
  _animateSegment(
    index,
    positions,
    targets,
    durations,
    onSegmentStart,
    onSegmentComplete,
    onAllComplete,
    onSegmentUpdate
  ) {
    this.controls.enabled = false;
    if (index >= positions.length) {
      this.isPlaying = false;
      this.controls.enabled = true;
      if (onAllComplete) onAllComplete();
      return;
    }

    // 触发片段开始回调
    if (onSegmentStart) onSegmentStart(index);

    // 起始状态（相机位置和控制器目标）
    const startPos = [this.camera.position.x, this.camera.position.y, this.camera.position.z];
    const startTarget = [this.controls.target.x, this.controls.target.y, this.controls.target.z];

    // 目标状态
    const endPos = positions[index];
    const endTarget = targets[index];

    // 创建动画对象
    const tweenTarget = {
      posX: startPos[0],
      posY: startPos[1],
      posZ: startPos[2],
      tarX: startTarget[0],
      tarY: startTarget[1],
      tarZ: startTarget[2]
    };

    // 创建Tween动画
    this.currentTween = new TWEEN.Tween(tweenTarget)
      .to(
        {
          posX: endPos[0],
          posY: endPos[1],
          posZ: endPos[2],
          tarX: endTarget[0],
          tarY: endTarget[1],
          tarZ: endTarget[2]
        },
        durations[index] / this.timeScale
      )
      .onUpdate(() => {
        // 更新相机位置
        this.camera.position.set(tweenTarget.posX, tweenTarget.posY, tweenTarget.posZ);
        this.camera.lookAt(tweenTarget.tarX, tweenTarget.tarY, tweenTarget.tarZ);
        this.controls.target.set(tweenTarget.tarX, tweenTarget.tarY, tweenTarget.tarZ);
        if (onSegmentUpdate) onSegmentUpdate(index);
        this.updateCallback(index);
      })
      .onComplete(() => {
        // 确保最终状态准确
        // this.camera.position.set(endPos[0], endPos[1], endPos[2]);
        // this.controls.target.set(endTarget[0], endTarget[1], endTarget[2]);
        // this.controls.update();

        // 触发片段结束回调
        const isLast = index === positions.length - 1;
        if (onSegmentComplete) onSegmentComplete(index, isLast);

        // 继续下一个片段
        this._animateSegment(
          index + 1,
          positions,
          targets,
          durations,
          onSegmentStart,
          onSegmentComplete,
          onAllComplete,
          onSegmentUpdate
        );
      })
      .start();
  }

  // 停止动画
  stopAnimation() {
    if (this.currentTween) {
      this.currentTween.stop();
      this.currentTween = null;
    }
    this.controls.enabled = true;
    this.isPlaying = false;
  }

  setTimeScale(scale) {
    // ...
  }
}