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

Question

因此，我目前正在与Three.Js及其设备定位库一起使用，以创建可通过移动手机进行导航的全景图。 我遇到的问题是，这就是我想要的样子：

适当的全景

并在页面首次加载时正确执行此操作。 但是，当我刷新页面时，它变为：

刷新全景

我的朋友看着它说，这与相机无法正确调整手机尺寸有关。 但是我已经看过，找不到有关移动相机调整大小功能的深入信息。 这是我的代码：

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