# Completely destroy scene and recreate new one

**URL:** <https://discourse.threejs.org/t/completely-destroy-scene-and-recreate-new-one/37784>\
**Category:** Questions\
**Tags:** scene, webgl-renderer\
**Created:** [May 4, 2022, 9:40am UTC](https://discourse.threejs.org/t/completely-destroy-scene-and-recreate-new-one/37784 "2022-05-04T09:40:32Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![dbazina-dev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dbazina-dev/32/26083_2.png) [@dbazina-dev](https://discourse.threejs.org/u/dbazina-dev)\
**Post date:** [May 4, 2022, 9:40am UTC](https://discourse.threejs.org/t/completely-destroy-scene-and-recreate-new-one/37784/1 "2022-05-04T09:40:32Z")

</div>

Hello guys,  
I’m struggling with the issue to “destroy” existing scene (scene, renderer, objects, materials…) and create new, “fresh one”.  
Which entities to dispose, delete, set to null ? I’ve tried to cancelAnimationFrame, dispose all objects and materials, dispose renderer, set scene to null. Despise that, after 3-4 attempts of destroying and recreating, application crashes with the Error (THREE.WebGLProgram: Shader Error 0 - VALIDATE\_STATUS false) .

Thanks in advance!

---

<div class="post-metadata">

**Author:** ![rrrr\_rrrr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rrrr_rrrr/32/7697_2.png) [@rrrr\_rrrr](https://discourse.threejs.org/u/rrrr_rrrr)\
**Post date:** [May 4, 2022, 9:56am UTC](https://discourse.threejs.org/t/completely-destroy-scene-and-recreate-new-one/37784/2 "2022-05-04T09:56:18Z")

</div>

Reload Page.

---

<div class="post-metadata">

**Author:** ![dbazina-dev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dbazina-dev/32/26083_2.png) [@dbazina-dev](https://discourse.threejs.org/u/dbazina-dev)\
**Post date:** [May 4, 2022, 9:59am UTC](https://discourse.threejs.org/t/completely-destroy-scene-and-recreate-new-one/37784/3 "2022-05-04T09:59:17Z")

</div>

Without reloading page.

---

<div class="post-metadata">

**Author:** ![rrrr\_rrrr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rrrr_rrrr/32/7697_2.png) [@rrrr\_rrrr](https://discourse.threejs.org/u/rrrr_rrrr)\
**Post date:** [May 4, 2022, 10:02am UTC](https://discourse.threejs.org/t/completely-destroy-scene-and-recreate-new-one/37784/4 "2022-05-04T10:02:32Z")

</div>

Then provide something: ( code, link , console log, … )

---

<div class="post-metadata">

**Author:** ![dbazina-dev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dbazina-dev/32/26083_2.png) [@dbazina-dev](https://discourse.threejs.org/u/dbazina-dev)\
**Post date:** [May 4, 2022, 11:52am UTC](https://discourse.threejs.org/t/completely-destroy-scene-and-recreate-new-one/37784/5 "2022-05-04T11:52:51Z")

</div>

Okay. I use THREE JS library in Angular application, and 3D scene is created when the lifecycle hook “ngAfterViewInit” is called. In that lifecycle hook, 4 methods are defined.

```javascript
this._scene = new THREE.Scene();

this.load3dObjects();
this.addLights();
this.addCamera();
this.startRenderingLoop();

```

3D objects are loaded from the obj.file and added to the scene. Then I add lights and postion camera, it is quite simple configuration. I think that the problem lies with the startRenderingLoop.

```javascript
private startRenderingLoop() {

    // *** Renderer
    this.createRenderer();

    const component: DigitalTwinComponent = this;

    (function render() {
      cancelAnimationFrame(component.digitalTwinService.rendererID)
      component.digitalTwinService.rendererID = requestAnimationFrame(render);
      component.autoRotateCamera();
      component._controls.update();

      component._raycaster.setFromCamera(component._mouse, component._camera);
      const intersects = component._raycaster.intersectObjects(component._scene.children);

      // *** Highlight 3D object on hover
      if (intersects.length > 0) {
        if (component.intersected !== intersects[0].object) {
          if (component.intersected) {
            component.intersected.material.color.setHex(component.intersected.currentHex);
          }
          let i = intersects.length

          if (intersects[0].object.visible === true)
            component.intersected = intersects[0].object;
          else
            component.intersected = intersects[i-1].object;
          component.intersected.currentHex = component.intersected.material.color.getHex();
          component.intersected.material.color.setHex(0xff0000);
        }
      } else {
        if (component.intersected) {
          component.intersected.material.color.setHex(component.intersected.currentHex);
        }
        component.intersected = null;
      }

      component._renderer.clear();
      component._renderer.render(component._scene, component._camera);
    }());
  }

```

```javascript
private createRenderer() {
    this._renderer = new THREE.WebGLRenderer({ canvas: this._canvasRef.nativeElement, antialias: true });
    this._renderer.shadowMap.enabled = true;
    this._renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    this._renderer.setPixelRatio(devicePixelRatio);
    this._renderer.setSize(this._canvasRef.nativeElement.clientWidth, this._canvasRef.nativeElement.clientHeight);

    this._controls = new OrbitControls(this._camera, this._renderer.domElement);
    this._controls.update();
  }

```

So whenever this component is initialized, these methods are called. So I’ve tried to clean the scene and renderer (if they exist) before these methods are called. I’ve used this code.

```javascript
clear(){
    this._renderer.dispose()
    this.stopAnimation()

    this._scene.traverse(object => {
      if (!object.isMesh) return
      
      this.deleteObject(object)
    })
  }

private deleteObject(object: THREE.Object){
    object.geometry.dispose()

    if (object.material instanceof Array) {
      object.material.forEach(material => material.dispose());
    } else {
        object.material.dispose();
    }
    object.removeFromParent()
    this._scene.remove(object)
  }

```

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [May 4, 2022, 4:03pm UTC](https://discourse.threejs.org/t/completely-destroy-scene-and-recreate-new-one/37784/6 "2022-05-04T16:03:15Z")

</div>

For reference — [How to Dispose of Objects](https://threejs.org/docs/index.html#manual/en/introduction/How-to-dispose-of-objects).

Could you share a demo? The code looks reasonable but is missing chunks and isn’t enough to reproduce the error.

---

<div class="post-metadata">

**Author:** ![dbazina-dev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dbazina-dev/32/26083_2.png) [@dbazina-dev](https://discourse.threejs.org/u/dbazina-dev)\
**Post date:** [May 5, 2022, 12:38pm UTC](https://discourse.threejs.org/t/completely-destroy-scene-and-recreate-new-one/37784/7 "2022-05-05T12:38:52Z")

</div>

Hello, You can find demo here: [Angular 11 New (forked) - StackBlitz](https://stackblitz.com/edit/angular-11-new-ubrxvk?file=src%2Fapp%2Fapp.component.ts).

It’s not the same as the application, but it implements similar logic. There you can find, 3D simulation, and two buttons, one to “clear scene” and other to “create new one”.  
**I know there is an option to clear all the objects from the scene and add new ones, but I don’t want to do that !**

As I’ve mentioned above, in the application, 3D setup is created on component load. Every time component loads, variables defined in component are reinitialized again, and procedure for creating 3D setup begins. The problem is that I can’t clear “previous setup” on load, and that causes application to crash.

I m also wondering what happens with 3D setup (scene, render) when user goes to other page in the same application?

**So what is my goal here?**

So when user clicks button “Clear Everything”, scene, objects, render should be destroyed or set to undefined (same as when application builds for the first time). After user has clicked “Clear Everything”, and it clicks “Start new Scene”, a new Scene should emerge.

This seems pretty simple request, create 3D setup, destroy it, and recreate it.

Thanks in advance guys !

---

<div class="post-metadata">

**Author:** ![dbazina-dev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dbazina-dev/32/26083_2.png) [@dbazina-dev](https://discourse.threejs.org/u/dbazina-dev)\
**Post date:** [May 5, 2022, 1:25pm UTC](https://discourse.threejs.org/t/completely-destroy-scene-and-recreate-new-one/37784/8 "2022-05-05T13:25:41Z")

</div>

**Important notice.**

Application (not one displayed in Demo) works properly while using Mozilla Firefox, it doesn’t crash or create errors. On the other hand, application crashes while using Chrome and Edge.

---

<div class="post-metadata">

**Author:** ![pecopeco](https://avatars.discourse-cdn.com/v4/letter/p/f9ae1b/32.png) [@pecopeco](https://discourse.threejs.org/u/pecopeco)\
**Post date:** [January 30, 2024, 7:50am UTC](https://discourse.threejs.org/t/completely-destroy-scene-and-recreate-new-one/37784/9 "2024-01-30T07:50:48Z")

</div>

any solution?

> [@When to dispose: How to completely clean up a Three.js scene](https://discourse.threejs.org/t/when-to-dispose-how-to-completely-clean-up-a-three-js-scene/1549/11):
>
> Alright, the following is what I have so far, and I’m doing it to see if there’s any difference in memory use compared to not doing it (my guess is there won’t be and the Garbage Collector will work great, but just in case). Am I missing anything? console.log('dispose renderer!') renderer.dispose() scene.traverse(object =\> { if (!object.isMesh) return console.log('dispose geometry!') object.geometry.dispose() if (object.material.isMaterial) { cleanMaterial(object.material) } else { …

2018 solutions don’t seem to clean up, memory and gpu usage are still there, even if I destroy the dom,  
if I destroy and then create repeatedly, the memory overflows

---

<div class="post-metadata">

**Author:** ![trusktr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/trusktr/32/13726_2.png) [@trusktr](https://discourse.threejs.org/u/trusktr)\
**Post date:** [February 9, 2024, 3:35am UTC](https://discourse.threejs.org/t/completely-destroy-scene-and-recreate-new-one/37784/10 "2024-02-09T03:35:58Z")

</div>

If you create 32 scenes (last I checked in Chrome) before the GC collects the webgl contexts, the new contexts will not work. Maybe that’s the issue you are seeing?

The dispose methods do not actually free memory, they just unreference things so that, _eventually_, the collector will free the memory. But _until_ the memory is freed, the webgl limit will apply.

Depending on your use case, there may be alternative solutions, like rendering multiple scenes using a single canvas.

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [February 11, 2024, 9:02am UTC](https://discourse.threejs.org/t/completely-destroy-scene-and-recreate-new-one/37784/11 "2024-02-11T09:02:02Z")

</div>

[https://threejs.org/docs/#api/en/renderers/WebGLRenderer.forceContextLoss](https://threejs.org/docs/#api/en/renderers/WebGLRenderer.forceContextLoss)

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [February 11, 2024, 9:27am UTC](https://discourse.threejs.org/t/completely-destroy-scene-and-recreate-new-one/37784/12 "2024-02-11T09:27:24Z")

</div>

> [@pecopeco](#):
>
> don’t seem to clean up

Additionally - do the [official examples](https://threejs.org/examples/?q=memo#webgl_test_memory) also cause memory leaks in your browser? If yes, that’s a base for a bug report. If not, it’s possible memory leak is caused by your custom code?

---

<div class="post-metadata">

**Author:** ![pecopeco](https://avatars.discourse-cdn.com/v4/letter/p/f9ae1b/32.png) [@pecopeco](https://discourse.threejs.org/u/pecopeco)\
**Post date:** [February 19, 2024, 1:25am UTC](https://discourse.threejs.org/t/completely-destroy-scene-and-recreate-new-one/37784/14 "2024-02-19T01:25:11Z")

</div>

yes,there is no problem with this example, the object references parsed from a huge compressed gltf model file are much more complex and are referenced everywhere. It may be a problem in my program, but it is not easy to troubleshoot. It is very difficult to test hundreds or thousands of objects, using multiple scenes seems like a good approach

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [February 19, 2024, 6:52am UTC](https://discourse.threejs.org/t/completely-destroy-scene-and-recreate-new-one/37784/15 "2024-02-19T06:52:45Z")

</div>

> [@pecopeco](#):
>
> […] are referenced everywhere […]

That’s probably a bigger issue than the scene disposal - in a long run, you’ll end up with memory leaks, so it may be a good idea to fix it up asap (model geometries, besides the loading process, are no more complex than box or sphere geometries - they just have more vertices on the GPU. Make sure you’re not storing them in random arrays and objects, and if you are - dispose those arrays and objects together with the scene.)

---

<div class="post-metadata">

**Author:** ![pecopeco](https://avatars.discourse-cdn.com/v4/letter/p/f9ae1b/32.png) [@pecopeco](https://discourse.threejs.org/u/pecopeco)\
**Post date:** [February 19, 2024, 8:13am UTC](https://discourse.threejs.org/t/completely-destroy-scene-and-recreate-new-one/37784/16 "2024-02-19T08:13:55Z")

</div>

ok, this is a meticulous job.