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.