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
.