如何將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> 

希望這可以幫助！ :)