Using ThreeJS in an iframe on a mobile device can lead to crashes in the browser due to multiple

Question

Using ThreeJS in an iframe on a mobile device can lead to crashes in the browser due to multiple

I am encountering an issue with my ThreeJS based pages that are included via Iframe into other pages. The problem arises when switching between the two pages with ThreeJS Iframe on a mobile phone (specifically an iPhone 7 with just 1GB RAM). After two or three switches between the two links "Bota" and "Brasna", the browser crashes. Interestingly, if I navigate from a page with Iframe directly to a ThreeJS page (without Iframe) and then back to a page with ThreeJS in Iframe, everything works fine. Similarly, if I go from a page with ThreeJS in an iframe to a vanilla page without ThreeJS and then back to a page with ThreeJS in an iframe, I can do so multiple times without any issues. The problem only occurs when I switch from a page with ThreeJS in Iframe to another page with ThreeJS in an iframe. It seems that the ThreeJS page remains in memory after redirecting to another page when it is in an iframe. I am seeking advice or thoughts on why this behavior is occurring. Any insights would be greatly appreciated.

javascript iframe mobile three.js

Answer 1

Answer №1

When dealing with Three.js and having issues with memory management on redirections, it seems to be a common problem with Three.js itself. One solution is to create a custom dispose method that can be called during redirections to properly dispose of all Three.js resources. Below is an example of such a method that I use in my project. Keep in mind that in this example, `this.world` refers to `scene.children[0]`, but you can adapt it to directly traverse the scene if needed.

dispose: async function () {

    //console.log(window.performance.memory);

    return new Promise(disposed => {
        this.world.traverse(function (obj) {
            if (obj.geometry) {
                obj.geometry.dispose();
            }
            if (obj.material) {
                if (obj.material instanceof THREE.MeshFaceMaterial) {
                    obj.material.materials.forEach(function (m) {
                        m.dispose();
                        if (m.map) {
                            m.map.dispose();
                        }
                    });
                } else {
                    obj.material.dispose();
                }

                let m = obj.material;
                let md = (m.map || m.alphaMap || m.aoMap || m.bumpMap || m.displacementMap || m.emissiveMap || m.envMap || m.lightMap || m.metalnessMap || m.normalMap || m.roughnessMap)
                if (md) {
                    if (m.map) m.map.dispose();
                    if (m.alphaMap) m.alphaMap.dispose();
                    if (m.aoMap) m.aoMap.dispose();
                    if (m.bumpMap) m.bumpMap.dispose();
                    if (m.displacementMap) m.displacementMap.dispose();
                    if (m.emissiveMap) m.emissiveMap.dispose();
                    if (m.envMap) m.envMap.dispose();
                    if (m.lightMap) m.lightMap.dispose();
                    if (m.metalnessMap) m.metalnessMap.dispose();
                    if (m.normalMap) m.normalMap.dispose();
                    if (m.roughnessMap) m.roughnessMap.dispose();
                }
            }
            if (obj.dispose) {
                obj.dispose();
            }
        });
        this.scene.remove(this.world);
        this.scene.dispose();
        this.world.children = [];
        this.world = null;
        this.labelRenderer.dispose();
        this.renderer.dispose();
        disposed('dispose finished');
        //console.log(window.performance.memory);
    });
}

Answer 2

When dealing with Three.js and having issues with memory management on redirections, it seems to be a common problem with Three.js itself. One solution is to create a custom dispose method that can be called during redirections to properly dispose of all Three.js resources. Below is an example of such a method that I use in my project. Keep in mind that in this example, `this.world` refers to `scene.children[0]`, but you can adapt it to directly traverse the scene if needed.

dispose: async function () {

    //console.log(window.performance.memory);

    return new Promise(disposed => {
        this.world.traverse(function (obj) {
            if (obj.geometry) {
                obj.geometry.dispose();
            }
            if (obj.material) {
                if (obj.material instanceof THREE.MeshFaceMaterial) {
                    obj.material.materials.forEach(function (m) {
                        m.dispose();
                        if (m.map) {
                            m.map.dispose();
                        }
                    });
                } else {
                    obj.material.dispose();
                }

                let m = obj.material;
                let md = (m.map || m.alphaMap || m.aoMap || m.bumpMap || m.displacementMap || m.emissiveMap || m.envMap || m.lightMap || m.metalnessMap || m.normalMap || m.roughnessMap)
                if (md) {
                    if (m.map) m.map.dispose();
                    if (m.alphaMap) m.alphaMap.dispose();
                    if (m.aoMap) m.aoMap.dispose();
                    if (m.bumpMap) m.bumpMap.dispose();
                    if (m.displacementMap) m.displacementMap.dispose();
                    if (m.emissiveMap) m.emissiveMap.dispose();
                    if (m.envMap) m.envMap.dispose();
                    if (m.lightMap) m.lightMap.dispose();
                    if (m.metalnessMap) m.metalnessMap.dispose();
                    if (m.normalMap) m.normalMap.dispose();
                    if (m.roughnessMap) m.roughnessMap.dispose();
                }
            }
            if (obj.dispose) {
                obj.dispose();
            }
        });
        this.scene.remove(this.world);
        this.scene.dispose();
        this.world.children = [];
        this.world = null;
        this.labelRenderer.dispose();
        this.renderer.dispose();
        disposed('dispose finished');
        //console.log(window.performance.memory);
    });
}

Using ThreeJS in an iframe on a mobile device can lead to crashes in the browser due to multiple

Answer №1

Similar questions

Simulate a keyboard key being pressed and held for 5 seconds upon loading the page

Having trouble getting the Vue.js sample app to run using "npm run dev"? The error message "Error: Cannot find module 'node:url'" may

Creating a new image by converting canvas to an image and displaying it in a separate window with Ruby on Rails and

Can you please guide me on retrieving information from an API using HTML, CSS, and JavaScript?

Is it possible for XSS attacks to exploit the HREF attribute when used with jQuery?

Error: The 'length' property cannot be searched for using the 'in' operator

Illuminating and shading particles in ThreeJS using the Framebuffer Object

What are the consequences of submitting a form to a different website through POST method?

Strange behavior observed when resizing objects in Three.js WebGl

Tips for customizing the timing of a Bootstrap modal's opening delay?

Unable to get jQuery plugin to function properly within a .vue component

What is the best way to transfer an ID to a dropdown selection list?

Trigger a function from a Bootstrap modal

Using onClick function to pass the value of an input textbox in PHP

Timing of Bindings in AngularJS

Encountering difficulty accessing the object from the props within the created method

Is writeConcern not being returned by MongoDb's deleteOne function?

"Utilizing JavaScript to locate a corresponding row in a table within an MVC view

Deciphering the significance of matrices within a Three.js 3D object

Filter JSON data in AngularJS ng-repeat by a specific ID