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

希望這有助於！ :)