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; 


    }); 

    } 

、それは何もしません。 私は、軌道制御のターゲットの設定をトゥイーンすることが可能かどうかを調べようとしています。 アドバイスありがとうございます。

アニメーション機能でcontrolsの更新を呼び出しています。

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.