Как отложить анимацию Tween.js до нажатия кнопки? (Three.js)

Question

Я хочу сделать так, чтобы анимация анимации для моей камеры запускалась только при нажатии на объект. Этот объект может быть объектом в моей сцене three.js или просто кнопкой HTML. Вот мой код для анимации камеры, которая работает:

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

Вместо того, чтобы задерживать анимацию на три секунды, я хочу определить, когда была нажата кнопка mouse1, а затем запустить анимацию. Не знаете, как это сделать, или если есть более простой альтернативный метод?

Answer 1

Все, что вам нужно сделать, это обернуть начало анимации внутри функции, а затем вызвать эту функцию нажатием кнопки:

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

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

Весь код будет выглядеть следующим образом:

// 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>

Надеюсь это поможет!:)