In my current three.js project, I have implemented a feature that allows users to switch between scenes containing various mesh objects. All objects are loaded simultaneously when the page loads, but the performance is affected by the textures on these objects.
To address this issue, I am looking to dynamically remove all objects from scenes that the user has not selected. For example, if the user selects scene 4 as the currentScene, then scenes 1 through 3 and 5 through 10 should be cleared of unnecessary objects that may impact performance. This action should also occur upon initial load. The objects would only be restored when the user revisits those specific scenes again.
You can view an example of my project with essential code in this FIDDLE. I am currently utilizing the remove() and dispose() methods for this functionality.
//scene to be removed and disposed
var destroyScenes = scenes[1];
//process to remove and dispose all objects in the specified scene
for (i = destroyScenes.children.length - 1; i >= 0; i--) {
obj = destroyScenes.children[i];
destroyScenes.remove(obj);
obj.geometry.dispose();
obj.material.dispose();
obj.texture.
}
My main question revolves around restoring these removed objects once they have been disposed of. Is this method appropriate for achieving this goal, and are there better alternatives available?
Furthermore, how can I target all scenes except for the currentScene? Any insights or suggestions on optimizing this process would be greatly appreciated.
PS: I am aware that switching between scenes may result in some loading time, but I prioritize performance optimization in this scenario.