Question

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

当页面第一次加载时，它会正确执行此操作。但是，当我刷新页面时，它转向：

我的朋友看着它并说它与相机有关，没有正确调整移动设备的大小。但是我看了一下，找不到任何关于如何为Camera Resize for mobile做些什么的深度。这是我的代码：

<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 Panorama在移动设备上无法正常调整大小

1 个答案: