0

我想这样做，以便我的相机的补间动画仅在单击对象时开始。这个对象可以是我的 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 按钮，然后开始动画。不确定如何执行此操作，或者是否有更简单的替代方法？

4

1 回答 1

2

您所要做的就是将补间的开头包装在一个函数中，然后在单击按钮时调用此函数：

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>

希望这可以帮助！:)

于 2017-07-03T21:44:34.753 回答