如何延迟 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>

希望对您有所帮助！ :)

如何延迟 Tween.js 动画直到单击按钮？ (three.js)

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

javascript

tween

three.js

tween.js

tweenjs