How to delay Tween.js animation until a button is clicked? (three.js)

Question

I want to make it so the tween animation for my camera only starts when an object is clicked. This object could be an object in my three.js scene, or simply a HTML button. Here is my code for the camera animation, which works:

            // 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 delaying the animation by three seconds, I want to detect when the mouse1 button has been clicked, and then start the animation. Not sure how to do this, or if there is an easier alternative method?

Answer 1

All you have to do is wrap the start of the tween inside a function, and then call this function on a button click:

function launchTween() {
  tweencam.start();
}

<button onclick="launchTween()">Launch Tween</button>

The entire code would look as follows:

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

tweencam.easing(TWEEN.Easing.Exponential.InOut);

function launchTween() {
  tweencam.start();
}

<button onclick="launchTween()">Launch Tween</button>

Hope this helps! :)