如何在单击按钮之前延迟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>

整个代码如下所示：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

希望这有帮助！ ：）