Roger Chi

Three.js creates for specific objects like geometries or materials WebGL related entities like buffers or shader programs, which are not released automatically by GC. So it’s important to manually dispose these objects before updating or discarding a scene to prevent memory leak.

According to Three.js document How to dispose of objects, all disposable entities have a dispose method, such as Geometries, Materials, Textures, Render Targes and Scenes. If you want to totally update your scene or discard it, below is the best practice I come up with.

// traverse the scene for all disposables
scene.traverse(function(obj) {
  // dispose geometry
  if (obj.geometry) {
    obj.geometry.dispose();
  }
  // dispose materials
  if (obj.material) {
    // a mesh's material may be an array
    if (Array.isArray(obj.material)) {
      obj.material.forEach(function(mtl) {
        mtl.dispose();
      })
    } else {
      obj.material.dispose();
    }
  }
});

// dispose textures, cache them while constructing the scene
textures.forEach(function(t) {
  t.dispose();
});

// dispose the scene if needed
scene.dispose();

Based on Three.js version r107.