How do I clear THREE.JS Scene

Question

I am trying to find ways of clearing all the objects in a scene without destroying the scene itself. I know that naming the object is one way and then when we want to delete the object, we just "get" it by its name. However, I want to find a quick way to clear a scene of all the objects in it, regardless of their names. Is there a easy way to do it? Thanks!

Answer 1

You can traverse the child objects of the scene and remove them one by one.

As suggested in the comments, this should be done in reverse order to not modify the elements that you're iterating over.

while(scene.children.length > 0){ 
    scene.remove(scene.children[0]); 
}

Note: This is just a quick and dirty clearing of the object hierarchy. If you plan on doing this a lot you risk running in to memory leaks with the code above because the renderer has references to the objects materials, textures and geometries. A complete clean of the scene is more complicated and there are plenty other questions that goes in to more detail:

• Three.js Collada - What's the proper way to dispose() and release memory (garbage collection)?
• THREE js proper removing object from scene (still reserved in HEAP)
• Deallocating heap objects when removing mesh from scene

Answer 2

I have a more concise way of doing this. I noticed that the remove method of Object3D accepts more than one parameter for object removal. This allows us to use the entire children array by modifying the call to use each element as individual parameters by taking advantage of the built-in apply method for functions. This works like so:

scene.remove.apply(scene, scene.children);

Answer 3

Traversing all children and call dispose on their geometry, material and texture. The code below is my solution.

function clearThree(obj){
  while(obj.children.length > 0){ 
    clearThree(obj.children[0]);
    obj.remove(obj.children[0]);
  }
  if(obj.geometry) obj.geometry.dispose();

  if(obj.material){ 
    //in case of map, bumpMap, normalMap, envMap ...
    Object.keys(obj.material).forEach(prop => {
      if(!obj.material[prop])
        return;
      if(obj.material[prop] !== null && typeof obj.material[prop].dispose === 'function')                                  
        obj.material[prop].dispose();                                                      
    })
    obj.material.dispose();
  }
}   

clearThree(scene);

Answer 4

Also the next method of clearing the scene worked to me:

const n = scene.children.length - 1; 
for (var i = n; i > -1; i--) {
    scene.remove(scene.children[i]); 
} 

Iterating the items in the reversed order, it will not get the issue with the current array index.

Kind regards, Adrian B.

Answer 5

Be sure to remove all things, especially texture maps.

    function removeObjectsWithChildren(obj){

        if(obj.children.length > 0){
            for (var x = obj.children.length - 1; x>=0; x--){
                removeObjectsWithChildren( obj.children[x]);
            }
        }

        if (obj.geometry) {
            obj.geometry.dispose();
        }

        if (obj.material) {
            if (obj.material.length) {
                for (let i = 0; i < obj.material.length; ++i) {

    
                    if (obj.material[i].map) obj.material[i].map.dispose();
                    if (obj.material[i].lightMap) obj.material[i].lightMap.dispose();
                    if (obj.material[i].bumpMap) obj.material[i].bumpMap.dispose();
                    if (obj.material[i].normalMap) obj.material[i].normalMap.dispose();
                    if (obj.material[i].specularMap) obj.material[i].specularMap.dispose();
                    if (obj.material[i].envMap) obj.material[i].envMap.dispose();

                    obj.material[i].dispose()
                }
            }
            else {
                if (obj.material.map) obj.material.map.dispose();
                if (obj.material.lightMap) obj.material.lightMap.dispose();
                if (obj.material.bumpMap) obj.material.bumpMap.dispose();
                if (obj.material.normalMap) obj.material.normalMap.dispose();
                if (obj.material.specularMap) obj.material.specularMap.dispose();
                if (obj.material.envMap) obj.material.envMap.dispose();

                obj.material.dispose();
            }
        }

        obj.removeFromParent();

        return true;
    }

Answer 6

scene.clear() is what you need. Here is example code, make it become a function first, then call the function every time you want to change object.

function loadscene(path)
{
    scene.clear();
    loader.load(path,function(gltf)
    {
        const model = gltf.scene;
        model.position.set(0,0,0);
        model.rotation.set(0,0,0);
        model.scale.set(1,1,1);
        scene.add(model);
        animate();
    }, 
    undefined, function(e)
    {
        console.error(e);
    });
}