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

希望这有助于！ :)