Ist es möglich, Orbit Controls mit three.js zu tweenen?

Question

Wenn ich die TWEEN-Funktion in three.js verwende, bemerke ich, dass sie speziell zum Tweenen von Objekten dient.

Ich bin in der Lage, die Kameraposition zu tweenen, aber ich möchte auch die Orbitsteuerung zwischenschalten. Dies würde einem Ziel folgen, während sich die Kamera auf einem Dolly befindet.

Derzeit ist die Kameraposition wird mit diesem Code getweent:

 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); 

ich dann diesen Code verwenden, das Ziel auf der Umlaufbahn zu ändern.

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

Also, wenn ich das tue, die Kamera Tweens an den Ort, dann springt er auf die Zielkontrollen Punkt.

Ich möchte das Springen loswerden, wenn die Bahnsteuerung eingestellt ist.

Also habe ich eine Funktion als die Bahnregelung auf tweenen folgt:

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; 


    }); 

    } 

Wenn ich diese Funktion aufrufen, es tut nichts. Also versuche ich herauszufinden, ob es möglich ist, die Einstellung des Ziels der Orbitsteuerung zu tweenen. Jeder Rat wird geschätzt.

Ich rufe Steuerelemente Update in der Animationsfunktion.

function animate() { 

     requestAnimationFrame(animate); 

     TWEEN.update(); 

     controls.update(); 

    } 

Ich schaffte es, den folgenden Code zu arbeiten. Aber leider verliere ich alle Orbit-Kontrolle, nachdem das Ziel festgelegt wurde.

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

Ich vereinfachte den Code und jetzt funktioniert es. Das Problem war, dass der Code den Wert der Kameraposition z auf das Steuerziel z setzte. Dies hat aus irgendeinem Grund die Orbitkontrolle unterbrochen.

Hier ist die vereinfachte Version zum Schwenken der Kamera mit einem Tween. Die Funktion in meinem Code wird bei einem Mouse-Down-Ereignis aufgerufen.

 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.