I am trying to implement a tween animation for my camera in three.js that should only start when a specific object is clicked. This object can be within the scene or it could be a simple HTML button. The code snippet below demonstrates how the camera animation currently functions:
// initial position of camera
var camposition = { x : 0, y: 0, z:3100 };
// target position that camera tweens to
var camtarget = { x : 0, y: 0, z:8500 };
var tweencam = new TWEEN.Tween(camposition).to(camtarget, 1600);
tweencam.onUpdate(function(){
camera.position.x = camposition.x;
camera.position.y = camposition.y;
camera.position.z = camposition.z;
});
// delay tween animation by three seconds
tweencam.delay(3000);
tweencam.easing(TWEEN.Easing.Exponential.InOut);
tweencam.start();
Instead of relying on a fixed time delay of three seconds before starting the animation, I am seeking a way to trigger the animation when the mouse1 button is clicked. I am unsure of how to achieve this functionality and if there are better alternatives available?