如何使用Three.js在浏览器中居中并调整3D模型的大小

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>

非常感谢任何帮助或建议。谢谢