CODEWITHSUNDEEP
javascriptthree.jstweentween.js
PsykoloGG
PsykoloGG

Reputation: 37

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

function animate(time) {
  requestAnimationFrame( animate );

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

animate();

Thanks!

Upvotes: 1

Views: 393

Answers (1)

madzong
madzong

Reputation: 396

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.x, cameraCoords.y, cameraCoords.z);

Upvotes: 3

Related Questions