将 TWEEN、CCapture 和 THREE.js 渲染代码同步到同一个时钟

Question

我正在使用一个名为 CCapture 的库来捕获等时间隔的帧。 这段代码似乎能够钩住时钟并控制它，从而在捕获时减慢我的渲染循环。 我的代码使用 clock.getDelta() 来获取时间，并使用这个时间来计算移动运输车辆的位置。 当 CCapture 控制渲染速率时，车辆被正确定位。 我最近开始在我的代码中使用 TWEEN 库。

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

function renderFrame() {
  const delta = clock.getDelta()
  timeSinceStart += delta;
  repositionTransitVehicles(timeSinceStart);

  renderer.render(scene, camera);
  if (capturer) {
    capturer.capture( renderer.domElement );
  }
  orbitControls.enabled = false;
  TWEEN.update();
  orbitControls.enabled = true;
  orbitControls.update();
}, 

使用 TWEEN.update() 的无参数版本，补间工作但总是实时进行，这在我使用 CCapture 时太快了。 如果我用...

TWEEN.update(timeSinceStart)

...然后补间根本不起作用。

有谁知道使 TWEEN.update() 使用与 model 的 rest 相同的时钟运行的秘诀？

Answer 1

TWEEN 使用的计时器是毫秒计时器，因此需要传递给 TWEEN.update() 的时间单位需要以毫秒为单位。 THREE.Clock() 的单位是秒。 所以用...

TWEEN.update(timeSinceStart*1000)

无论您在何处使用 TWEEN 的.start()方法来启动补间，您还需要传入参数timeSinceStart*1000 。