Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Tween animation is instant instead of smooth, What gives?

Idea is to move from current camera position to a center of a mesh (It’s a sphere and I want to be inside of it) when button is clicked.

This is the function with a tween, onUpdate is getting called, but it is instant instead of executed over time, what gives?

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

This is animate function where I call tween updates (in case something is wrong here).

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

function animate(time) {
  requestAnimationFrame( animate );

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

animate();

Thanks!

>Solution :

The problem is in the onUpdate callback:

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

You are always setting the end position, when you should be setting the current position which is in the cameraCoords object:

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

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading