title: Load a 3d Object from obj file and fit it inside the camera using Three.Js
body: <p>I am trying to load(dynamically) object files using THREE.OBJLoader and place them in the center of a scene(or canvas), so that the whole object can be visible in the Camera. Objects are dynamic, so I don't have fixed height or width data. </p>
  
  <p><strong>What I have got:</strong>
  <a href="https://i.stack.imgur.com/z2H3D.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/z2H3D.png" alt="enter image description here"></a></p>
  
  <p><strong>What I want:</strong>
  <a href="https://i.stack.imgur.com/o8E4h.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/o8E4h.png" alt="enter image description here"></a></p>
  
  <p><strong>What I have referred to get to this point:</strong></p>
  
  <ol>
  <li><a href="https://stackoverflow.com/questions/16462848/three-js-zoom-to-fit-width-of-objects-ignoring-height">Three.js zoom to fit width of objects (ignoring height)</a></li>
  <li><p><a href="https://stackoverflow.com/questions/14614252/how-to-fit-camera-to-object">How to Fit Camera to Object</a></p></li>
  <li><p><a href="https://stackoverflow.com/questions/11766163/smart-centering-and-scaling-after-model-import-in-three-js">Smart Centering and Scaling after Model Import in three.js</a></p></li>
  <li><p><a href="https://stackoverflow.com/questions/11274358/adjusting-camera-for-visible-three-js-shape">Adjusting camera for visible Three.js shape</a></p></li>
  <li><p><a href="https://stackoverflow.com/questions/20059612/calculate-camera-zoom-required-for-object-to-fit-in-screen-height">Calculate camera zoom required for object to fit in screen height</a></p></li>
  <li><p><a href="https://stackoverflow.com/questions/2866350/move-camera-to-fit-3d-scene">Move camera to fit 3D scene</a></p></li>
  <li><p><a href="https://stackoverflow.com/questions/25589915/three-js-calculate-object-distance-required-to-fill-screen">Three.js calculate object distance required to fill screen</a></p></li>
  <li><p><a href="https://stackoverflow.com/questions/14533135/how-to-calculate-the-z-distance-of-a-camera-to-view-an-image-at-100-of-its-orig">How to calculate the z-distance of a camera to view an image at 100% of its original scale in a 3D space</a></p></li>
  </ol>
  
  <p><strong>Code:</strong></p>
  
  <pre><code>camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
  
  controls = new THREE.TrackballControls(camera);
  controls.rotateSpeed = 5.0;
  controls.zoomSpeed = 5;
  controls.panSpeed = 2;
  controls.noZoom = false;
  controls.noPan = false;
  controls.staticMoving = true;
  controls.dynamicDampingFactor = 0.3;
  
  // scene
  scene = new THREE.Scene();
  
  var mtlLoader = new THREE.MTLLoader();
  mtlLoader.setBaseUrl(path);
  mtlLoader.setPath(path);
  mtlLoader.setMaterialOptions({
      ignoreZeroRGBs: true
  });
  
  mtlLoader.load(path, function(materials) {
      materials.preload();
      var objLoader = new THREE.OBJLoader();
      objLoader.setMaterials(materials);
      objLoader.setPath(path);
      objLoader.load(path, function(object) {
  
          var helperBox = new THREE.BoundingBoxHelper(object, 0x888888);
          helperBox.update();
          scene.add(helperBox);
  
          //Scene
          scene.add(object);
  
          var boxFrmScene = new THREE.Box3().setFromObject(scene);
          var height = Math.max(boxFrmScene.size().y, boxFrmScene.size().x);
          var dist = height / (2 * Math.tan(camera.fov * Math.PI / 360));
          var pos = scene.position;
          var boundingSphere = boxFrmScene.getBoundingSphere();
          var center = boundingSphere.center;
          camera.position.set(center.x, center.y, (dist * 1.1));
          camera.lookAt(pos);
      }, function(error) {
          console.log(error);
      });
  }, function(error) {
      console.log(error);
  });
  </code></pre>
  
  <p>The deadpool object I used is from here : <a href="http://tf3dm.com/3d-model/deadpool-42722.html" rel="nofollow noreferrer">http://tf3dm.com/3d-model/deadpool-42722.html</a> . I don't know if I have been reading the right questions. I would be very glad if someone can point me in the right direction. Thanks in advance.</p>
  
  <p>PS: I'm not good with 3D maths.</p>
  
  <p>Edit:
  I have tried solution given at this:<a href="https://stackoverflow.com/questions/14614252/how-to-fit-camera-to-object">How to Fit Camera to Object</a> but it has not solved my issue. In fact its flipping my object upside down. I am trying to position the object to center of the camera. </p>
  
  <hr>
  
  <p>Edit 2: I have partially fixed this. Now the object is within the camera frustum and fully visible. Now I need to find a way to center it. I changed the whole code below <code>scene.add(object);</code></p>
  
  <pre><code>var pos = scene.position;
  camera.position.set(pos.x, pos.y, 100);
  camera.lookAt(pos);
  var boxFrmScene = new THREE.Box3().setFromObject(scene);
  var height = Math.max(boxFrmScene.size().y, boxFrmScene.size().x);
  var fov = camera.fov * (Math.PI / 180);
  var distance = Math.abs(height / Math.sin(fov / 2));
  camera.position.set(pos.x, pos.y, distance + (height / 2));
  camera.updateProjectionMatrix();
  </code></pre>