Problem with Destroy() in Angular Component

Questions
,
1

Hi, I created an angular component that uses threejs (as a service.ts). The component is in the expander so if I open it ngOnInit () and close ngOnDestroy () more than 8 times, there will be a problem with:

WARNING: Too many active WebGL contexts. Oldest context will be lost.
THREE.WebGLRenderer: Context Lost.

Does anyone have solution to destroy Threejs / WebGL contexts ?

 public destory(): void {
    this.renderer.domElement = null;
    this.renderer = null;
  }

because the above code does not work…
Ps. in the component I used a multiscene but I have one renderer

2

Hi, I have some knowledge of Angular so I might be able to help you.
Can I see the full source code on codesandbox, CodePen or github?

3

Do it like so:

this.renderer.dispose();
this.renderer.forceContextLoss();

forceContextLoss() is not automatically called in dispose() because of certain compatibility issues with existing apps. More information in this PR: Revert "Force context loss in renderer.dispose" by mrdoob · Pull Request #19022 · mrdoob/three.js · GitHub

4

Hey !
I have developed this solution, tell me if it works for you !
You have to declare and assign each element, of course !

  public ngOnDestroy(): void {
    this.cleanObjects();
    this.cleanScene();
  }

  private cleanScene() {
    if (this.renderer) {
      this.renderer.dispose();
    }
    if (this.scene) {
      this.scene.dispose();
    }
  }

  private cleanObjects(): void {
    if (this.geometry) {
      this.geometry.dispose();
    }
    if (this.material) {
      this.material.dispose();
    }
    if (this.mesh) {
      this.scene.remove(this.mesh);
    }
    if (this.texture) {
      this.texture.dispose();
    }
  }