Mobile users experiencing crashes when interacting with an Iframe containing Three.js on the webpage

One of the challenges I'm facing is with a modal that contains an Iframe utilizing Three.js to load a 3D Door. While this setup works smoothly on desktop, it encounters issues on mobile devices. When interacting with the Iframe on mobile, it either crashes or unexpectedly reloads the page upon closing the modal. In the case of Safari, the page reloads initially, but on the second reload, it crashes entirely.

Page Loading the Iframe

<iframe loading="lazy" id="door-viewer" src="<?= "{$site_url}/3d-spinner.php?sku={$unique_skus[0]}"; ?>" sandbox></iframe>

File that generates the iframe

... (Code for generating iframe)

Main.js File

... (Code in main.js for initializing the 3D spinner)

Despite thorough investigation, I haven't been able to identify any memory leaks causing these issues.

javascriptiframemobilethree.js

Answer №1

After troubleshooting, I discovered the issue - the canvas was loading at a width of 3000px on mobile devices. To solve this, I updated the HTML to include:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

I also made changes to the main.js file to retrieve the width and height from the window:


  // Camera
  const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    800
  );
  camera.position.z = 5;
  camera.position.y = 0;
  camera.position.x = 0;

  // Renderer
  const renderer = new THREE.WebGLRenderer({
    antialias: true,
    devicePixelRatio: window.devicePixelRatio,
    alpha: true,
  });

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

Tips for passing down props or all the properties of an object to create a dynamic component

I am facing an issue with a v-for loop in my project. The loop is supposed to iterate through objects in a list of todos fetched from the backend. These objects are then passed down to a child component, which displays each todo individually. However, I ha ...

javascriptvue.jsvue-component

Dynamic filtering with Javascript

I am searching for inspiration on how to create a filter in the left sidebar that dynamically updates the page content when clicked, and if there are subcategories, displays them below the selected filter in the sidebar. I've discovered that AJAX is ...

javascriptmysqljsonajax

Issue with Angular4 select in dropdown not able to trigger onChange event

I am new to working with Angular 4 and I am currently in the process of building something. In my project, I have multiple components, one of which contains the following HTML code: <div class="row" style="border:1px solid black;"> <br> <d ...

javascriptangular

Can you explain the key distinctions among Highland.js, Kefir.js, and Rx.js?

Given the emphasis on objective answers on SO, my inquiry is focused on understanding the distinct functional and performance characteristics of these three functional/reactive libraries. This knowledge will guide me in selecting the most suitable option ...

javascriptrxjsfrphighland.jskefir.js

Tips for dealing with event bubbling in React

Looking for a way to add an onBlur event to the left panel so that it closes when the user clicks on the right panel. I attempted using onMouseLeave but the closing animation isn't as smooth as desired. Additionally, I'd like for users to close t ...

javascriptreactjsmaterial-ui

Add HTML code into a contenteditable element and then include additional text following the inserted HTML

I'm working with a contenteditable div and a button that inserts a simple span. <button id="insert-span">Insert</button> <div id="edit-box" contenteditable="true"></div> <script> $('#insert-span').on(' ...

javascriptjqueryhtml

How can I dynamically load a 3D model (in JSON format) at the current location of the mouse using Three.JS?

I'm currently working on a feature that involves loading a 3D model based on the mouse's position. Utilizing jQuery drag and drop functionality for this purpose has helped me load the model onto the canvas successfully, but I'm facing issues ...

javascriptthree.js

Is my rtk slice's initial state not being saved correctly in the store?

Currently diving into the world of RTK with typescript. I have created 2 slices - one using RTK query to fetch data (called apiSlice.ts) and another utilizing createSlice for handling synchronous state changes in my todo app (named snackbarSlice.ts). The ...

javascriptreactjsreduxredux-toolkit

Sorting data in AngularJS using the OrderBy filter in ascending

I am using ng-repeat in my code: <label ng-repeat="atp in Keywords | unique:'atp'"> {{atp}} </label> The values in atp are as follows: client animal zoo boat I want the final output to be: animal boat client zoo Thank you for ...

javascriptangularjsangularjs-orderby

Is it possible to apply capitalization or convert the value of props to uppercase in React?

Despite attempting the toUpperCase method, I am unable to capitalize my props value. Here's the code I have: export default function Navbar(props) { return ( <> <div> <nav class="navbar navbar-expand-lg bg-b ...

javascriptreactjs

Updating input values in AngularJS using a custom directive in AngularJS

When the value of an input does not meet a certain condition, I need to change it. In this example, if the unit price input is changed to a non-numeric value when adding a Detail, I want to set the value to "0.00". scope.$watch(attrs.ngModel, function(new ...

javascriptangularjsangularjs-directiveangularjs-scope

What is the best way to retrieve the value of a custom attribute from a dropdown list using either JavaScript or jQuery?

I have a dropdown list on a web form and I need to have a 'hidden' variable for each item in the list that can be retrieved using the onchange event on the client side. To achieve this, after databinding the dropdownlist, I am setting a custom at ...

javascriptjqueryhtmlasp.net

Utilize external functions in evaluated code

After working with a TypeScript file containing the following code: import { functionTest } from './function_test' function runnerFunctionTest() { console.log("Test"); } export class Runner { run(source : string) { eva ...

javascripttypescriptimportevaljavascript-import

Continuously running loop to retrieve data

I've been working on a function that retrieves data from the backend and then assigns it to the state for display in a web browser. Although everything seems to be functioning correctly, I've noticed that every time I make a request, the function ...

javascriptreactjs

Strategies to avoid red squiggle lines in a contenteditable div that has lost focus

While the div is focused, spell checking is enabled which works well. However, once the focus is removed and there are spelling mistakes, the red squiggle lines for spell checking remain visible. After following the advice provided in this query: spellch ...

javascripthtmlcss

There is no response provided by the function

Here is the code for inserting data into the database. However, it seems to be going into the else section as the response is empty. I have checked by alerting the response, but it remains empty. // Function to add donation via AJAX function ccjkfound ...

javascriptjqueryajaxresponse

Clicking on a radio button can trigger the selection of another radio button

I'm currently working on a form that includes 8 radio buttons - 4 for System A and 4 for System B. The options for the buttons are CF, ISO, ISO-B, and NW. My goal is to create a functionality where selecting a radio button in System A automatically se ...

javascripthtml

Using a for loop to add a nested div inside another div

Hey there, I've got a question about the loop that's currently in my code. Right now, I'm doing it manually and it seems to be working that way. $( '<div id="demo1" > <span class="value"></span> </div> ...

javascriptjqueryhtml

What is the method for specifying a string argument type from a string list and executing a mongo db query?

Is there a way to specify the argument type in a function as a string from a list of strings in order to run a MongoDB query? Here is what I am currently attempting: users.services.ts async findOne(key: "_id" | "email" | "username", value: string) { ...

javascriptmongodbnestjs

Trigger the Input event on Android with Nuxt

A unique issue has arisen with an input field that filters a list whenever a key is pressed, displaying the filtered results in the browser. While the functionality works perfectly on desktop, it behaves strangely on Android mobiles. The list only shows up ...

javascriptvue.js