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) {
    // ...
  }
}

[linorabolini]

I'm digging for the same result. Apparently there is a setNow function that can be useful for what you need. BUT it has not been included in the last release. It is present in the code and in the docs but not available unless you fork and build the project.

[volcanoqq]

I'm digging for the same result. Apparently there is a setNow function that can be useful for what you need. BUT it has not been included in the last release. It is present in the code and in the docs but not available unless you fork and build the project.

setSpeed(speed) {
    if (this.speed === speed) {
      return;
    }
    if (!this.isPlaying) {
      this.speed = speed;
      return;
    }
    this.currentTween.stop();
    const timeNow = performance.now();
    const timeLeft =
      this.currentTween._startTime + this.currentTween.getDuration() * this.speed - timeNow;
    this.currentTween._valuesStart = { ...this.currentTween._object };
    this.currentTween.duration(timeLeft / speed);
    this.currentTween.start();
    this.speed = speed;
  }

Maybe this could work，but I would rather suggest using gsap for it.