Extensive memory usage in IE. It goes out of memory on Refresh (Only in IE)

Questions
1

I am using Angular 6 with three.js. I am also destroying mesh in ngOnDestroy.

ngOnDestroy() {
        for (var i = this.model.children.length - 1; i >= 0; i--) {
            console.log(this.model.children[i].name);
            this.model.children[i].material.map.dispose();
            this.model.children[i].geometry.dispose();
            this.model.children[i].material.dispose();
            this.model.remove(this.model.children[i]);
        }
        this.scene.remove(this.model);
        this.model.dispose();
        this.model = [];
        window.cancelAnimationFrame(this.animateRequest);
    }

But out of memory error is still there.

Also, while the 3D model is loading, the whole screen in IE freezes for that time and any angular ngModel update is not reflected in the view. I have tried console.log statements, which actually are visible.

2

Any chances to demonstrate the memory leak as a live example? It seems you dispose materials and geometries correctly so it’s necessary to make a performance analysis of the app.

3

@Mugen87 I am using ObjLoader2 from now on. It considerably improves performace in IE as well. Also moved my three.js model rendering outside angular zone. That also seems to help. Anyway, Thanks for the follow up.

4

It’s best to totally move away from OBJ and use glTF instead. This will further improve the performance of your asset delivery. OBJ is actually a very old format and should not be used anymore. glTF is the recommended 3D format of three.js. Read the following guide for more information:

https://threejs.org/docs/index.html#manual/en/introduction/Loading-3D-models