What is the right way to remove a mesh completely from the scene in three.js?

Question

How can I remove meshes from three.js scene completely without causing memory leaks. I could find that loading the same models again and again causes the browser to crash, so it seems like the memory is not being deallocated.

Answer 1

Use the dispose method on the geometry and material. Also, ensure that nothing is holding references to these objects, as that will prevent garbage collection.

var myMesh = new THREE.Mesh(geo, mat);
scene.add(myMesh);
//...
scene.remove(myMesh);
myMesh.geometry.dispose();
myMesh.material.dispose();
myMesh = undefined;