將 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 。