Three.JS 全景图在移动设备上无法正确调整大小

Question

所以我目前正在使用 Three.Js 和它的设备方向库来创建一个全景图，人们可以通过移动他们的 phone 来导航。我遇到的问题是我希望它看起来像这样：

并且当页面第一次加载时，它会正确执行此操作。但是，当我刷新页面时，它会变成这样：

我朋友看了说是手机相机没有正确调整大小有关。但是我已经看过但找不到任何关于如何为移动设备调整相机大小的深入内容。这是我的代码：

<script src="../build/three.min.js"></script>
    <script src="js/controls/DeviceOrientationControls.js"></script>
    <script src="js/renderers/THREEx.WindowResize.js"></script>

(function() {
              "use strict"

              window.addEventListener('load', function() {

                    var container, camera, scene, renderer, controls, geometry, mesh;

                    var animate = function(){

                        window.requestAnimationFrame( animate );

                        controls.update();
                        renderer.render(scene, camera);

                    };

                    container = document.getElementById( 'container' );

                    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1100);

                    controls = new THREE.DeviceOrientationControls( camera );

                    scene = new THREE.Scene();

                    var geometry = new THREE.SphereGeometry( 500, 16, 8 );
                    geometry.applyMatrix( new THREE.Matrix4().makeScale( -1, 1, 1 ) );

                    var material = new THREE.MeshBasicMaterial( {
                            map: THREE.ImageUtils.loadTexture( 'textures/2294472375_24a3b8ef46_o.jpg' )
                    } );

                    var mesh = new THREE.Mesh( geometry, material );
                    scene.add( mesh );

                    var geometry = new THREE.BoxGeometry( 100, 100, 100, 4, 4, 4 );
                    var material = new THREE.MeshBasicMaterial( { color: 0xff00ff, side: THREE.BackSide, wireframe: true } );
                    var mesh = new THREE.Mesh( geometry, material );
//                      scene.add( mesh );

                    renderer = new THREE.WebGLRenderer();
                    renderer.setSize(window.innerWidth, window.innerHeight);
                    renderer.domElement.style.position = 'absolute';
                    renderer.domElement.style.top = 0;
                    container.appendChild(renderer.domElement);

特定相机资料

window.addEventListener('resize', function() {

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

                    }, false);


                    THREEx.WindowResize(renderer, camera);
                    controls.connect();

                    animate();

              }, false);

        })();

关于如何使它无论如何都能正确调整大小的任何想法？

Answer 1

尝试在创建渲染器时设置像素比：

renderer.setPixelRatio(window.devicePixelRatio);

Three.JS 全景图在移动设备上无法正确调整大小

Three.JS Panorama Doesn't Resize Properly on Mobile

javascript

mobile

resize

window-resize

three.js