ボタンをクリックするまで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(); 

を代わりに3秒でアニメーションを遅らせるのは、私がに、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>

希望します。 :)