補間動畫是即時的而不是平滑的，是什么給出的？

Question

想法是在單擊按鈕時從當前相機位置移動到網格的中心（它是一個球體，我想在其中）。

這是一個帶有補間的函數，onUpdate 被調用，但它是即時的，而不是隨着時間的推移執行，是什么給出的？

nextButton.onclick = function () {
  const cameraCoords = { x: camera.position.x, y: camera.position.y, z: camera.position.z };

  new TWEEN.Tween( cameraCoords )
   .to( { x: mesh2.position.x, y: mesh2.position.y, z: mesh2.position.z }, 600)
   .easing(TWEEN.Easing.Linear.None)
   .onUpdate(function () {
     camera.position.set(mesh2.position.x, mesh2.position.y, mesh2.position.z);
   })
   .start();
};

這是我稱之為補間更新的動畫函數（以防這里出現問題）。

function animate(time) {
  requestAnimationFrame( animate );

  controls.update();
  TWEEN.update(time);
  renderer.render( scene, camera );
}

animate();

謝謝！

Answer 1

問題出在onUpdate回調中：

camera.position.set(mesh2.position.x, mesh2.position.y, mesh2.position.z);

當您應該設置cameraCoords對象中的當前位置時，您總是在設置結束位置：

camera.position.set(cameraCoords.x, cameraCoords.y, cameraCoords.z);