是否有可能使用three.js軌道控制軌道？

Question

在three.js中使用TWEEN函數時，我注意到它專用於補間對象。

我可以補間相機的位置，但我想補間軌道控制。 這將在攝像機在臺車上時仿效目標。

目前的攝像機位置進行補間，此代碼：

 var xTarget=0; 
     var yTarget=0; 
     var zTarget=0; 

     function setupCamTween(xTarget,yTarget,zTarget){ 

     var update = function(){ 
      camera.position.x = current.x; 
      camera.position.y = current.y; 
      camera.position.z = current.z; 

     } 

     TWEEN.removeAll(); 

     var current = { x: myCameraX, y : myCameraY, z : myCameraZ }; 
     var target = { x : xTarget, y : yTarget, z : zTarget}; 

     console.log("moving cam"); 

     var camTween = new TWEEN.Tween(current).to(target, 1000); 
     camTween.easing(TWEEN.Easing.Quadratic.InOut); 


     camTween.start(); 



     camTween.onUpdate(function(){ 
      camera.position.x=current.x; 
      camera.position.y=current.y; 
      camera.position.z=current.z; 


     });  
    } 
setupCamTween(0,900,4000); 

然後我用這個代碼來改變目標的軌道上。

controls.target.set(0,myCameraY,2000); 
controls.update(); 

因此，當我這樣做時，相機補間到的位置，然後它跳轉到目標控制點。

我想擺脫設置軌道控制時的跳躍。

所以我創建了一個功能如下補間的軌道控制：

function orbitCam(){ 

     var update = function(){ 
      controls.target.x=current.x; 
      controls.target.y=current.y; 
      controls.target.z=current.z; 
     } 
      //TWEEN.removeAll(); 

      var current = {x: myCameraX, y: myCameraY, z: myCameraZ }; 
      var target = {x: 0, y: 200, z: 0}; 

      var orbitTween = new TWEEN.Tween(current).to(target,2000); 
      orbitTween.easing(TWEEN.Easing.Quadratic.InOut); 

    orbitTween.onUpdate(function(){ 
     controls.target.set.x=current.x; 
     controls.target.set.y=current.y; 
     controls.target.set.z=current.z; 


    }); 

    } 

當我調用此函數，它什麼都不做。 所以我想弄清楚是否可以補間軌道控制的目標設置。 任何意見表示讚賞。

我在動畫函數中調用控件更新。

function animate() { 

     requestAnimationFrame(animate); 

     TWEEN.update(); 

     controls.update(); 

    } 

我設法讓下面的代碼工作。但不幸的是，在目標設置完成後，我失去了所有的軌道控制。

var xTarget=0; 
    var yTarget=0; 
    var zTarget=0; 
    var tweenDuration=0; 

    function setupCamTween(xTarget,yTarget,zTarget,tweenDuration){ 

    var update = function(){ 
     camera.position.x = current_position.x; 
     camera.position.y = current_position.y; 
     camera.position.z = current_position.z; 
     controls.target.x = current_target.x; 
     controls.target.y = current_target.y; 
     controls.target.z = current_target.z; 

    } 

    //TWEEN.removeAll(); 

    var current_position = { x: myCameraX, y : myCameraY, z : myCameraZ }; 
    var target = { x : xTarget, y : yTarget, z : zTarget}; 

    var current_target = { x: myCameraX, y : myCameraY, z : myCameraZ }; 
    var new_target = {x : xTarget, y : yTarget, z : zTarget}; 

    console.log("moving cam"); 

    var camTween = new TWEEN.Tween(current_position).to(target, tweenDuration); 
    camTween.easing(TWEEN.Easing.Quadratic.InOut); 
    camTween.start(); 

    var targetTween = new TWEEN.Tween(current_target).to(new_target, tweenDuration); 
    targetTween.easing(TWEEN.Easing.Quadratic.InOut); 
    targetTween.start(); 

    camTween.onUpdate(function(){ 
    camera.position.x=current_position.x; 
    camera.position.y=current_position.y; 
    camera.position.z=current_position.z; 


}); 

    targetTween.onUpdate(function(){ 
    controls.target.x = controls.object.position.x; 
    controls.target.y = controls.object.position.y; 
    controls.target.z = controls.object.position.z; 
    controls.target.x = current_target.x; 
    controls.target.y = current_target.y; 
    controls.target.z = current_target.z; 

}); 


} 

Answer 1

我簡化了代碼，現在它工作。 問題在於代碼將相機位置z值設置爲控件目標z。這由於某種原因，打破了軌道控制。

以下是使用補間平移相機的簡化版本。我的代碼中的功能在鼠標向下事件中調用。

 var xTarget=0; 
     var yTarget=0; 
     var zTarget=0; 
     var tweenDuration=0; 

     function panCam(xTarget,yTarget,zTarget,tweenDuration){ 

      TWEEN.removeAll(); 

      var camNewPosition= { x : xTarget, y : yTarget, z : zTarget}; 
      var targetNewPos = {x : xTarget, y : yTarget, z : 0}; 

      var camTween = new TWEEN.Tween(camera.position).to(camNewPosition, tweenDuration).easing(TWEEN.Easing.Quadratic.InOut).start(); 
      var targetTween = new TWEEN.Tween(controls.target).to(targetNewPos, tweenDuration).easing(TWEEN.Easing.Quadratic.InOut).start(); 
    } 

     function animate() { //call this function at the beginning 

      requestAnimationFrame(animate); 

      TWEEN.update(); 

      controls.update(); 


     } 
panCam(500,200,4000,1000); //This pans the camera to the an x of 500, y of 200 and a z of 4000 with a duration of 1 second.