In my current project, I am utilizing Threejs to construct a level with various meshes. All the visual components such as camera, scene, projector, renderer, etc., are encapsulated within one object. For testing purposes, I need to reset the entire scene with different parameters, like changing the size of the level.
Because I need to accurately measure the time taken by an algorithm, I require a complete reset. Currently, my approach involves deleting the div-box that contains the scene/canvas and removing the object containing the Threejs code. Then, I create a new object for the graphical level. However, repeating this process multiple times in succession leads to significant performance degradation.
I have attempted other methods like removing all meshes in the scene using scene.delete() or deleting elements like the scene and renderer before getting rid of the main object. Despite these efforts, performance issues persist.
How can I successfully achieve a complete reset of all WebGL components without sacrificing performance?
Thank you in advance.