How can I change the focal point of the camera in THREEJS to an existing object?
<p>I have a scene taken from a THREEJS example (<a href="https://threejs.org/examples/webgl_loader_fbx.html" rel="nofollow noreferrer">https://threejs.org/examples/webgl_loader_fbx.html</a>) that imports and shows a threejs.json scene.  The scene works fine; I have a grid and my model placed on top of that grid.</p>

<p>When I drag my mouse and zoom, the camera is pointing at the centre of my screen.  However, the model is at the bottom of the scene, so is often outside of the camera.</p>

<p>How can I set the camera's centre to be the model I have placed?</p>

<p>I tried adding <code>camera.lookAt(new THREE.Vector3( 0, 0, 0 ))</code> but it made no difference to the camera's centre, no matter what I change the values to.</p>

<p>Below is my code:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
    &lt;head&gt;
        &lt;title&gt;three.js webgl - FBX loader&lt;/title&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"&gt;
        &lt;style&gt;
            body {
                font-family: Monospace;
                background-color: #000;
                color: #fff;
                margin: 0px;
                overflow: hidden;
            }
            #info {
                color: #fff;
                position: absolute;
                top: 10px;
                width: 100%;
                text-align: center;
                z-index: 100;
                display:block;
            }
            #info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
        &lt;/style&gt;
    &lt;/head&gt;

    &lt;body&gt;
        &lt;div id="info"&gt;
            Test
        &lt;/div&gt;

        &lt;script src="js/three.js"&gt;&lt;/script&gt;

        &lt;script src="js/controls/OrbitControls.js"&gt;&lt;/script&gt;

        &lt;script src="js/loaders/FBXLoader.js"&gt;&lt;/script&gt;

        &lt;script src="js/Detector.js"&gt;&lt;/script&gt;
        &lt;script src="js/libs/stats.min.js"&gt;&lt;/script&gt;

        &lt;script&gt;

            if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

            var container, stats, controls;
            var camera, scene, renderer;
            var w = 1920;
            var h = 1080;

            var clock = new THREE.Clock();

            var mixers = [];

            init();

            function init() {

                container = document.createElement( 'div' );
                document.body.appendChild( container );

                camera = new THREE.PerspectiveCamera( 45, (window.innerWidth / window.innerHeight), 2, 2000 );

                scene = new THREE.Scene();

                // grid
                var gridHelper = new THREE.GridHelper( 14, 28, 0x303030, 0x303030 );
                gridHelper.position.set( 0, - 0.04, 0 );
                scene.add( gridHelper );

                // stats
                stats = new Stats();
                container.appendChild( stats.dom );

                // model
                var manager = new THREE.LoadingManager();
                manager.onProgress = function( item, loaded, total ) {

                    console.log( item, loaded, total );

                };

                var onProgress = function( xhr ) {

                    if ( xhr.lengthComputable ) {

                        var percentComplete = xhr.loaded / xhr.total * 100;
                        console.log( Math.round( percentComplete, 2 ) + '% downloaded' );

                    }

                };

                var onError = function( xhr ) {
                };

                // BEGIN Clara.io JSON loader code
                var objectLoader = new THREE.ObjectLoader();
                objectLoader.load("carport-scene.json", function ( obj ) {
                    scene.add( obj );
                } );
                // END Clara.io JSON loader code

                renderer = new THREE.WebGLRenderer();
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                renderer.setClearColor( 0x0000ff );
                container.appendChild( renderer.domElement );

                // controls, camera
                controls = new THREE.OrbitControls( camera, renderer.domElement );
                controls.target.set( 0, 12, 0 );
                camera.position.set( 25, 0, 25 );
                //camera.lookAt(new THREE.Vector3( 100, 100, 100 ));
                controls.update();

                window.addEventListener( 'resize', onWindowResize, false );

                animate();

            }

            function onWindowResize() {

                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();

                renderer.setSize( window.innerWidth, window.innerHeight );

            }

            //

            function animate() {

                requestAnimationFrame( animate );

                if ( mixers.length &gt; 0 ) {

                    for ( var i = 0; i &lt; mixers.length; i ++ ) {

                        mixers[ i ].update( clock.getDelta() );

                    }

                }

                stats.update();

                render();

            }

            function render() {

                renderer.render( scene, camera );

            }

        &lt;/script&gt;

    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>I have created a gif illustrating the issue:
<a href="http://g.recordit.co/APLcyJKj01.gif" rel="nofollow noreferrer">http://g.recordit.co/APLcyJKj01.gif</a></p>