补间动画是即时的而不是流畅的，这是什么原因？

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);

补间动画是即时的而不是流畅的，这是什么原因？

Tween animation is instant instead of smooth, What gives?

javascript

tween

three.js

tween.js