title: How to apply OrbitControls to a loaded camera from a gltf file?
body: <p>I am using three.js to load a gltf scene which has a camera. The camera and model shows well but when I try to apply OrbitControls.js to that loaded camera it won't work. It only works with cameras created directly in the three.js with the <code>new THREE.PerspectiveCamera()</code>.  I leave the code below, I have commented the <code>play()</code> function just to try this first.</p>
  
  <pre><code>        var container, stats, clock, controls;
          var camera, scene, renderer, mixer;
  
          init();
          animate();              
  
  
          controls.update();
  
  
          function init() {
              container = document.getElementById( 'container' );
  
              scene = new THREE.Scene();
              clock = new THREE.Clock();
              var loader = new THREE.GLTFLoader();
  
              var ruta = 'file.gltf';
  
              loader.load( ruta, function ( data ) {
  
  
                  handleSceneLoaded(data);
  
                  var animations = data.animations;
                  var avatar = data.scene;
                  mixer = new THREE.AnimationMixer( avatar );
                  NumberOfAnimations = animations.length;
                  for ( var i=0; i&lt;NumberOfAnimations; i++){
                      //mixer.clipAction( animations[ i ] ).play();
                  }
  
                  scene.add( avatar );
              } );
              //
              scene.background = new THREE.Color( 0xefe3a7 );
  
              renderer = new THREE.WebGLRenderer( { antialias: true } );
              renderer.setPixelRatio( window.devicePixelRatio );
              renderer.setSize( window.innerWidth, window.innerHeight );
              container.appendChild( renderer.domElement );
          }
  
          function handleSceneLoaded(data){
              scene.add(data.scene);
              var result={};
              data.scene.traverse(function(n){traverseScene(n,result);});
  
              if (result.cameras &amp;&amp; result.cameras.length){
  
                  camera = result.cameras[0];
  
                  controls = new THREE.OrbitControls(camera);
                  controls.screenSpacePanning = true;
              }else{
                  camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
                  camera.position.set( 15, 10, - 15 );
              }
  
              if(result.lights &amp;&amp; result.lights.length){
                  for (i=0;i&lt;result.lights.length;i++){
                      var lamp = result.lights[i];
                      scene.add(lamp);
                  }
              }else {
                  var ambientLight = new THREE.AmbientLight( 0xffffff, 0.2 );
                  scene.add( ambientLight );
                  var directionalLight = new THREE.DirectionalLight( 0xffffff, .8 );
                  directionalLight.position.set( 1, 1, - 1 );
                  scene.add( directionalLight );
                  var directionalLight2 = new THREE.DirectionalLight( 0xffffff, .8 );
                  directionalLight2.position.set( -5, -5,  10 );
                  scene.add( directionalLight2 );
              }
  
          }
  
          function traverseScene(n, result){
              if (n instanceof THREE.Camera){
                  if(!result.cameras)
                      result.cameras = [];
  
                  result.cameras.push(n);
              }
          }
  
          function animate() {
              requestAnimationFrame( animate );
              render();
  
          }
          function render() {
              var delta = clock.getDelta();
              if ( mixer !== undefined ) {
                  mixer.update( delta );
              }
              renderer.render( scene, camera );
          }
  </code></pre>
  
  <p><strong>Edit1:</strong> I finally solved it by assinging the loaded camera to a variable blenderCamera and then creating the real camera and copying the values from the loaded camera and its parent:</p>
  
  <pre><code>        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
  
              blenderCamera = result.cameras[0];
              camera.position.x = blenderCamera.parent.position.x;
              camera.position.y = blenderCamera.parent.position.y;
              camera.position.z = blenderCamera.parent.position.z;
  
              camera.aspect = blenderCamera.aspect;
              camera.fov = blenderCamera.fov;
              camera.far = blenderCamera.far;
              camera.near = blenderCamera.near;
  </code></pre>