I am trying to achieve a camera movement effect where the camera transitions from its current position to the center of a mesh (which is a sphere and I want to be inside of it) when a button is clicked.
I have implemented a function with a tween for this purpose. However, the onUpdate function is being called instantly instead of executing over time. Can someone help me figure out what's causing this issue?
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();
};
Below is the animate function where I call tween updates in case there is an issue in that part of the code.
function animate(time) {
requestAnimationFrame( animate );
controls.update();
TWEEN.update(time);
renderer.render( scene, camera );
}
animate();
Thank you in advance for your help!