Load a 3d Object from obj file and fit it inside the camera using Three.Js

Question

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.

What I have got:

What I want:

What I have referred to get to this point:

1. Three.js zoom to fit width of objects (ignoring height)

2. How to Fit Camera to Object

3. Smart Centering and Scaling after Model Import in three.js

4. Adjusting camera for visible Three.js shape

5. Calculate camera zoom required for object to fit in screen height

6. Move camera to fit 3D scene

7. Three.js calculate object distance required to fill screen

8. How to calculate the z-distance of a camera to view an image at 100% of its original scale in a 3D space

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

The deadpool object I used is from here : http://tf3dm.com/3d-model/deadpool-42722.html . 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.

PS: I'm not good with 3D maths.

Edit: I have tried solution given at this:How to Fit Camera to Object 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.

---

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 scene.add(object);

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

Answer 1

Try adding this code after creating mesh,

var box = new THREE.Box3().setFromObject(mesh);
box.center(mesh.position);
mesh.localToWorld(box);
mesh.position.multiplyScalar(-1);

This will bring your object to the center of the screen