Mobile Devices Experiencing Issues with Proper Resizing of Three.JS Panorama

I'm currently working on a project using Three.Js and its device orientation library to create a panorama that users can navigate by moving their phones. Initially, everything looks great as intended:

Proper Panorama

However, upon refreshing the page, it suddenly changes to this:

Panorama on Refresh

Upon seeking help from a friend, they mentioned that the issue may be related to the camera not resizing properly for mobile devices. Despite my efforts to find more information on how to handle Camera Resize for mobile, I couldn't find a comprehensive solution. Here's a snippet of my code:

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

Instructions To Properly Resize Camera

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

        })();

Do you have any suggestions on how to ensure proper resizing regardless of the device being used?

Answer â„–1

Make sure to specify the pixel ratio while initializing the renderer:

renderer.setPixelRatio(window.devicePixelRatio);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A guide on triggering a new chart to appear beside the adjacent <div> when a bar is clicked in a highchart

I'm a beginner with Highcharts and I have a requirement for two charts (let's call them Chart A and Chart B). Creating one chart is straightforward. What I need is, upon clicking on a bar in Chart A, a new chart (Chart B) should open next to the ...

jQuery: Implementing smooth horizontal scrolling functionality

Here is the code I am working with: // General Function $("li a").click(function() { $("li a").removeClass("active"); $(this).addClass("active"); }); // Horizontal Scroll-to Function $("li a").click(function() { var offset = this.getBounding ...

When using setState in the onRowSelection event with React's Material-ui tableRow, the selection cannot be properly controlled

Currently, I am working with a material-ui table https://i.stack.imgur.com/JIzLT.png and my goal is to pass selected rows to a function when the DELETE button is clicked. constructor(props) { super(props); this.state = { selecte ...

transform JSON data into XML format with the help of JavaScript

I need help converting a JSON object to an XML String and I'm struggling to find the right method. I recently came across a jQuery plugin called json2xml on https://gist.github.com/c4milo/3738875 but unfortunately, it does not properly escape the data ...

The search functionality in an Html table is currently malfunctioning

Currently, I am working on developing a search mechanism in HTML. It seems to be functioning properly when searching for data for the first time. However, subsequent searches do not yield the expected results. Additionally, when trying to search with empty ...

Substitute empty spaces and organize the text layout

I'm struggling to figure out how to substitute the whiteSpace in an aggregate request using MongoDB and also how to remove a specific part of a string (most likely requiring regex). Here's an example of my document: { "_id": "57dfa5c9xxd76b ...

Issue with manipulating element styles using jQuery in Angular2

My method of assigning IDs to elements dynamically using *ngFor looks like this: <div *ngFor="let section of questionsBySubCat" class="col-md-12"> <div class="subcat-container"> <h4 class="sub-cat">{{ section?.subcategory }}& ...

Unable to append XML nodes using jQuery's parseXML function, but able to append font

Jquery : $.get("config.xml",function(xml){ $(xml).find("config").find("images").append("<image><url>../demo/Headline/2012/12/20/0/0/A/Content/8/Web201212_P8_medium.jpg</url><name></name><redirect>none</r ...

Unable to locate the identifier 'BrowserWindow'

In the providers folder of electron.service.ts, I have the following code: import { Injectable } from '@angular/core'; // If you import a module but never use any of the imported values other than as TypeScript types, // the resulting javascrip ...

A guide to extracting iFrame information (specifically the referring URL) using JavaScript

Is there a way to retrieve the information from an iFrame (right-click on an iFrame in the browser -> This Frame -> View frame info)? I'm particularly interested in obtaining the referring URL. So far, I managed to retrieve the address using co ...

My Javascript file in AngularJS is giving me trouble with the error message: "Uncaught Error: [$injector:modulerr]"

I am currently enrolled in an AngularJS course and the instructor is using version 1.0.8, while I have version 1.7.8 installed. I would like to update my version. Can anyone provide guidance on how to do this? File: index.html <!doctype html> <h ...

Choosing a Component in a Collection with Angular 2

Seeking advice on how to address an issue I'm facing with a sign-up page. Within the page, there are two buttons, represented by components <btn-gender>, each displaying a gender option for selection. The challenge lies in creating a logic to d ...

Dynamically incorporating Angular UI Datepicker into your project

For my project, I am required to include a dynamic number of datepickers on the page. I attempted to accomplish this using the following method (Plunker): Script: var app = angular.module('plunker', ['ui.bootstrap']); app.controll ...

Assistance needed in obtaining the ID of a specific table row using jQuery

Currently, I am working on an AJAX request using Jquery and PHP. The task involves looping through an array to generate a table. During each iteration, a new ID is assigned to the table row. When users click on the "read me" link, additional content is f ...

Generating option list from API JSON responses

I am currently developing a news app using React. I have set up my API to fetch data from newsapi.org and my goal is to display the available news source options in a dropdown list within my select component. However, instead of listing all news sources w ...

What is the best way to streamline a state-dependent getter, with a focus on adhering to SOLID principles?

Is there a more user-friendly way to retrieve different data based on the type in my Angular component? I'm considering separating the component into two: one for phone and one for email. However, I'm concerned about duplicating most of the logi ...

Prevent those pesky popups with this handy script

Even though AdBlock sometimes doesn't block popups, I have a solution in mind. I plan to use Greasemonkey and jQuery to create my own popup blocker. Is it possible to intercept the clicks and determine if a popup is about to open? $('.popupLaun ...

Top method for passing props from child to parent React component

I am facing a challenge with passing data from child to parent components in React. I have an array that I need to save in my database, and I have set up a Parent component (AuthenticationPage.js) and a Child component (SignupForm.js) for this purpose. The ...

"An ExceptionInInitializer error occurred - Can you provide more details,

An Issue Has Arisen: Exception in thread "main" java.lang.ExceptionInInitializerError at com.PoseidonTechnologies.caveworld.level.WoRe.<init>(WoRe.java:46) at com.PoseidonTechnologies.caveworld.CaveWorld.start(CaveWorld.java:80) at com.P ...

When attempting to access AJAX JSON properties using an index within a promise, the result returned is undefined

I have a quiz app that communicates with my server's API using MongoDB. I am trying to access the response indexes in this way: setTimeout(() => { axios.get('/api/ninjas') .then(function (questions) { var data = questions.d ...