title: Is it possible to tween orbit controls with three.js?
body: <p>When using the TWEEN function in three.js, I notice it is specifically for tweening objects.  </p>
  
  <p>I'm able to tween the camera position but I want to also tween the orbit control.
  This would emulate following a target while the camera is on a dolly.</p>
  
  <p>Currently the camera position is tweened with this code:</p>
  
  <pre><code>        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);
  </code></pre>
  
  <p>I then use this code to change the target on the orbit.</p>
  
  <pre><code>controls.target.set(0,myCameraY,2000);
  controls.update();
  </code></pre>
  
  <p>So when I do this, the camera tweens to the location, then it jumps to the target controls point.</p>
  
  <p>I want to get rid of the jumping when the orbit control is set.</p>
  
  <p>So I created a function as follows to tween the orbit control:</p>
  
  <pre><code>    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;
  
  
      }); 
  
      }
  </code></pre>
  
  <p>When I call this function, it does nothing.
  So I'm trying to figure out if it's possible to tween the setting of the target of the orbit control.
  Any advice is appreciated.</p>
  
  <p>I am calling controls update in the animation function.</p>
  
  <pre><code>    function animate() {
  
          requestAnimationFrame( animate );
  
          TWEEN.update();
  
          controls.update();
  
      }
  </code></pre>
  
  <p>I managed to get the following code to work. But unfortunately, I lose all orbit control after the target has been set.</p>
  
  <pre><code>    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;
  
  });
  
  
  }
  </code></pre>