如何让TWEEN、CCapture与THREE.js渲染共用同一时钟同步运行？

核心问题是TWEEN.update()的参数单位不匹配：你的timeSinceStart是以秒为单位的累加值，但TWEEN期望传入的是毫秒级的时间戳（和performance.now()同单位）。同时，创建补间时也要基于自定义时钟设置开始时间，才能和车辆运动完全同步。

具体修改步骤： #

• 转换时间单位：将timeSinceStart（秒）转为毫秒，传给TWEEN.update()
• 补间初始化时绑定自定义时钟：创建补间时，手动传入基于自定义时钟的毫秒值作为开始时间，而非依赖TWEEN默认的实时时间

修改后的代码示例： #

function animate() {
  renderer.setAnimationLoop( renderFrame );
}

// 自定义时钟的毫秒时间，方便复用
let customTimeMs = 0;

function renderFrame() {
  const delta = clock.getDelta()
  timeSinceStart += delta;
  customTimeMs = timeSinceStart * 1000; // 转成毫秒级时间戳

  repositionTransitVehicles(timeSinceStart);

  renderer.render(scene, camera);
  if (capturer) {
    capturer.capture( renderer.domElement );
  }
  orbitControls.enabled = false;
  TWEEN.update(customTimeMs); // 传入自定义时钟的毫秒值
  orbitControls.enabled = true;
  orbitControls.update();
}

// 创建补间时的示例（必须手动设置start时间）
function createCustomTween(target) {
  new TWEEN.Tween(target.position)
    .to({ z: 50 }, 3000) // 补间时长3000毫秒（3秒）
    .easing(TWEEN.Easing.Linear.None)
    .start(customTimeMs); // 用自定义时钟的当前毫秒值作为补间开始时间
}

为什么之前的尝试无效？ #

• 无参调用TWEEN.update()时，TWEEN会使用performance.now()获取实时时间，不受CCapture的渲染速率控制，所以捕获时补间速度远快于车辆运动
• 直接传入timeSinceStart（秒）时，数值仅为实时时间的1/1000，TWEEN会认为补间已经完成了很久，所以完全不显示动画

这样修改后，补间动画会和你的公交车辆使用同一时钟进度，在CCapture捕获时也能保持同步的速度。

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