Как центрировать и изменить размер 3d модели в браузере с помощью three.js

Question

Я хотел бы создать приложение на всю страницу, которое не будет иметь прокрутки, и поэтому я бы хотел центрировать и изменять размеры моей 3d-модели в середине моей веб-страницы в любое время, независимо от того, какой размер экрана вы используете.

Я пытался это сделать, но я получаю разные результаты центрирования на экране другого размера, мой код:

<script src="js/three.js"></script>
        <script src="js/OBJLoader.js"></script>
        <script src="js/OrbitControls.js"></script>
        <script>

            var scene, camera, renderer , controls, ambientLight, pointLight, textureLoader, map, material, loader;

            function init() {
                scene = new THREE.Scene();
                initChris();
                initCamera();
                initRenderer();
                    initControl();
                    render();
            }

            function initCamera() {
                camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 5000);
                    ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
                    pointLight = new THREE.PointLight( 0xffffff, 0.8 );
                camera.position.set(0, 0, 2500);
                    camera.add( pointLight );
                    scene.add( camera );
                    scene.add( ambientLight );
                camera.lookAt(scene.position);
            }

            function initRenderer() {
                renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
                    renderer.setPixelRatio( window.devicePixelRatio );
                    renderer.setSize( window.innerWidth, window.innerHeight );
                    renderer.setClearColor( 0x000000, 0 );
            }

            function initControl(){
                    controls = new THREE.OrbitControls( camera );
                    controls.enableZoom  = false;
                    controls.minPolarAngle = Math.PI * 0.5;
                    controls.maxPolarAngle = Math.PI * 0.5;
                    controls.update();
            }

            function initChris() {
                textureLoader = new THREE.TextureLoader();
                map = textureLoader.load('img/CHRIS.jpg');
                material = new THREE.MeshPhongMaterial({map: map});
                loader = new THREE.OBJLoader();
                loader.load( 'obj/CHRIS.obj', function ( object ) {
                  object.traverse( function ( node ) {
                    if ( node.isMesh ){
                            node.material = material;
                        }
                  });
                    object.position.y = - window.innerHeight / 2;
                  scene.add( object );
                });
            }

            function onWindowResize(){
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize( window.innerWidth, window.innerHeight );
            }

            function render() {
                    document.body.appendChild(renderer.domElement);
                requestAnimationFrame(render);
                renderer.render(scene, camera);
                    window.addEventListener( 'resize', onWindowResize, false );
            }

            init();


        </script>

Любая помощь или совет очень ценится.Спасибо