Although there are numerous questions on SO that address the topic of removing everything from a scene, none of the methods I've tried seem to work as expected. There isn't a definitive solution provided in the documentation either, so I'm hoping someone can point me in the right direction.
Here is the current function I'm using to clear the scene of all objects:
function removeAll() {
while (scene.children.length > 0) {
scene.remove(scene.children[0]);
if (scene.children[0] == THREE.Mesh || scene.children[0] == THREE.Object3D || scene.children[0] == THREE.Group) {
scene.children[0].dispose();
scene.children[0].geometry.dispose();
scene.children[0].material.dispose();
}
}
}
While this method appears to visually remove everything from the scene, my issue arises when I call this function followed by the function that creates a new scene or reloads the existing one. More objects appear in the scene after calling the creation function (init()), which I confirmed using renderer.info in the console.
I've also observed that each time I use the removeAll() function and then refresh the scene, the performance decreases gradually, likely due to improper removal of objects.
Therefore, my question is this:
What is the correct way to completely clear out everything from the scene?
To provide some context:
I have an HTML menu where users can select which scene they want to transition to. It's crucial for me to eliminate all existing objects before loading the elements specific to the chosen scene. While I have successfully implemented this feature, the only hiccup lies in properly removing the preceding objects before introducing the new ones.