Three.JS Panorama не меняет размер на мобильном телефоне

Question

Итак, я сейчас работаю с Three.Js и его библиотекой ориентации устройств, чтобы создать панораму, на которую можно перемещаться, перемещая свой телефон. Проблема у меня в том, что это то, что я хочу, чтобы это выглядело как:

Proper Panorama

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

Panorama on Refresh

Мой друг посмотрел на него и сказал, что у него есть что-то делать с камерой не изменение размера должным образом для мобильных устройств. Но я посмотрел и не могу найти ничего, что подробно рассказывает о том, что делать для Camera Resize для мобильных устройств. Вот мой код:

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