I am currently working on a single page application that consists of multiple "slides," each implemented as a different hidden div, which becomes visible when it is the current slide.
One of these slides features a canvas element and a ThreeJS scene. The scene is loaded once the corresponding div (slide) is displayed.
Users can navigate to the next slide, which does not include a ThreeJS scene.
If users wish to return to the slide with the ThreeJS scene, there is no need to save the state of the scene; instead, the scene should reload entirely.
The scene is all set up now, but I have been unable to find relevant information to address my specific problem. My main concerns are memory usage and completely resetting the scene.
- Should I remove all objects from the scene and add them again if needed? If so, what would be the most effective method for doing this?
- What actually happens when using .dispose()?
- Is there a way to efficiently remove every object/group/texture/material from a scene at once and free up memory?
- Are there any other factors I should consider when resetting a scene?
I have many questions, I realize that. However, I have found that answers often pertain to outdated ThreeJS versions or do not work as expected anymore. Any insights you can provide would be greatly appreciated!