The iPad Air 2 experiencing issues with rendering on three.js

Recently, I've transitioned to using an iPad Air 2 for work and decided to explore equirectangular panoramas. While these panoramas work perfectly on my desktop, I was excited about utilizing the device orientation features on my iPad/iPhone.

However, when I attempted to view my script on the iPad, the rendering was extremely poor. I could only identify objects in the photo because of my familiarity with it. I'm puzzled about what might be causing this issue as WebGL appears to be available and functioning fine. It seems like a problem specific to the iPad itself.

In my coding attempt, I aimed to create a sphere and use the photo as the mesh, which works flawlessly on my desktop but not on the iPad. Despite searching extensively, I haven't come across any solutions or similar issues reported by others. This has left me completely stuck.

For reference, here's the sample link:

javascriptipadthree.js

Answer №1

It is recommended to adjust the size of your image to a power-of-two dimension, such as 2048 x 1024.

To ensure optimal performance, consider upgrading to the latest version of three.js and correctly handling device pixel ratio.

renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );

For an example of a panorama using three.js, check out this demo: .

Current version used: three.js r.70

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

How can users create on-click buttons to activate zoom in and zoom out features in a Plotly chart?

I am currently working on an Angular application where I need to implement zoom in and zoom out functionality for a Plotly chart. While the default hoverable mode bar provides this feature, it is not suitable for our specific use case. We require user-cr ...

javascriptangulartypescriptplotlyplotly.js

The JQuery-AJAX script in my Django application, intended to show a preset value in a calculated field, is not functioning as expected

Here are a couple of models from my project: class Package(models.Model): patient=models.ForeignKey(Patient, on_delete=CASCADE) diagnosis=models.ForeignKey(Diagnosis, on_delete=CASCADE) treatment=models.ForeignKey(Treatment, on_delete=CASCADE) ...

javascriptjquerydjangoajaxdjango-templates

What is the best way to locate the closest points using their positions?

I have a cluster of orbs arranged in the following pattern: https://i.sstatic.net/9FhsQ.png Each orb is evenly spaced from one another. The code I am using for this setup is: geometry = new THREE.SphereGeometry(1.2); material = new THREE.MeshPhongMateri ...

javascriptmaththree.js

Remove the JSON object by comparing IDs between two JSON objects in JavaScript or Node.js, deleting it if the ID is not found

let data = fetchData(); let anotherData = getAnotherData(); let result = data.reduce((accumulator, current) => { if (!accumulator[current.system.name]) { accumulator[current.system.name] = {}; } let detailsObject = {}; Object.keys(current. ...

javascriptnode.jsnodes

What is the best approach to retrieve all items from DynamoDB using NodeJS?

I am trying to retrieve all the data from a DynamoDB table using Node.js. Here is my current code: const READ = async (payload) => { const params = { TableName: payload.TableName, }; let scanResults = []; let items; do { items = await ...

javascriptnode.jsexpressamazon-dynamodbes6-promise

Receiving a 401 error when making an Axios post request

Having trouble with a 401 error when making a POST request to an API? Don't worry, I've got some suggestions that might help. I'm able to successfully make GET requests to the same API with a 200 status, so it could be a syntax issue in the ...

javascriptnode.jsreactjsexpress

Steps for ordering by a JSON attribute:

Within my JSON file, I have the following simple structure: {"Item1": {"p1": {"p1sub1": 8, "p1sub2": 7}, "p2": {"p2sub1": 6, "p2sub2": 5} }, "Item2": {"p1": {"p1sub1": 4, "p1sub2": 3}, "p2": {"p2sub1": 2, "p2sub2": 1} } } To retrieve this data, I use th ...

javascriptjsonangularjsangularjs-ng-repeat

develop a hidden and organized drop-down menu using the <select> tag

I am currently developing a website for a soccer league. The site includes two dropdown lists with specific criteria, where the options in the second dropdown are limited based on the selection made in the first dropdown. My goal is to initially hide cer ...

javascriptjqueryjquery-selectorshtml-selectdropdown

The series in angular-chart is not displayed at the top as shown in the documentation

angular-chart.js provides an example of a bar chart, which can be found here. Using this as a foundation, I made some modifications to the js and markup code like so. HTML <body ng-app="app"> <div class="row"> <div class="col-m ...

javascriptangularjschart.js

Encounter an error parsing the package.json file. Confirmed that it is valid JSON

As I embark on creating my very first yeoman generator, I have encountered an issue when running yo to initiate the project. The error message I am receiving is as follows: npm ERR! install Couldn't read dependencies npm ERR! Darwin 14.0.0 npm ERR! a ...

javascriptjsonnode.jsnpmpackage.json

Bootstrap Collapse function might not function properly immediately following the execution of Collapse Methods

Here is the reference link: http://jsfiddle.net/72nfxgjs/ The code snippet I used is from w3schools: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_collapse&stacked=h <script type="text/javascript"> $("#collapse1").col ...

javascriptjquerytwitter-bootstrap

I encountered an issue while trying to send data from a React.js application to PHP using Axios. However,

I am utilizing react.js, axios, and PHP to transmit data to a MySQL database Below is my react.js code snippet sendData(){ var data = new FormData(); data.append('name', 'jessie'); data.append('time', '12:00'); dat ...

javascriptphpajaxreactjsaxios

Sending values from multiple radio groups in JavaScript can be done by accessing each group individually and extracting

This is an add to cart system. Currently, I am able to send quantity with an ID. However, I also want to send radio group values. How can I achieve this? Here are my codes: product.php <script> jQuery(function ($) { $('.popbutton').on(&a ...

javascriptphpjqueryajax

What methods can be used to report errors with Sentry while offline?

One key feature of my app is its ability to function both offline and online. However, I'm wondering how I can ensure that errors are still sent to my Sentry dashboard even when a user is offline. ...

javascriptnode.jssentry

Struggling to retrieve the data from a RESTful API?

I'm currently learning how to fetch an API in javascript and I'm encountering some difficulties in extracting specific parts of the response body. My goal is to store the setup and punchline of a joke in variables for later use. Here is the code ...

javascriptjsonfetch

Vue looping through nested checkbox groups

Here is an object I am working with: rightGroups: [ { name: "Admin Rights", id: 1, rights: [ { caption: 'Manage Rights', name: 'reports', ...

javascriptjsonvue.jsv-for

Using Ajax to submit two forms by clicking a submit button

Explanation : In this particular scenario, I am facing a challenge where I need to trigger another Ajax function upon successful data retrieval, but unfortunately, I am encountering some unknown obstacles. Code: ---HTML Form : <form accept-charset=" ...

javascriptphpjqueryhtmlajax

What is the best way to incorporate JavaScript in a repeater?

I am currently working on an asp.net project that involves using a repeater. <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1"> <HeaderTemplate> <asp:label ID="lblexp" runat="server" Text="05/11/1 ...

javascriptc#asp.netsubstring

Difficulty loading AngularJS 1.3 page on Internet Explorer 8

Being an avid user of Angular, it pains me to even bring up the topic of IE8, a browser that many consider to be pure evil and deserving of extinction. Despite my reservations, I am experiencing difficulties with loading Angular 1.3 in IE8. The page break ...

javascriptangularjsinternet-explorer-8

Will the point's coordinates in three.js be altered as the camera moves?

Currently, I am utilizing the raycaster function to acquire the coordinates of sections of a texture in preparation for creating interactive areas on my website. The model being used is hollow and the raycasting process involves finding the intersection wi ...

three.js