问题
In my current project Im using Threejs for buildin a level with meshes. All the graphical stuff with camera, scene, projector, renderer and so on is done in one object. For test purposes I want to reset the whole scene with different parameters, for example different level sizes.
Because I want measure time of an algorithm I want a "full" reset. So my current approach is deleting the div-box containing the scene/canvas and deleting the whole object which has the threejs code. After this I instantiate a new object for the graphical level. Unfortunately doing this like 10 times in a row results in drastical performance loss.
I also tried deleting all meshes in the scene with scene.delete() and deleting things like scene, renderer and so on before deleting the whole object. But still performance issues.
So how can I achieve a whole reset of all graphical webgl components without performance loss?
Thanks in advance.
回答1:
Deleting everything to do with three won't solve the problem, because even as your WebGLRenderer is deleted, it never releases it's WebGL context, so you end up with multiple WebGL contexts running simultaneously. Performance will degrade for each additional live context. Eventually, a limit will be hit.
Refer to this question for a hacked way to release the context.
Releasing the context is not supported by three.js since you really shouldn't need to recreate the context. In my case, using Angular with multiple application phases where some use WebGL and some don't, I simply persist an instance of the renderer in the page-level controller, such that I can access it in subcontrollers and so never need to recreate the WebGLRenderer nor, thus, the context.
回答2:
Two functions that may increase your performance resetting: for each object obj in your scene, try both:
scene.remove( obj );
renderer.deallocateObject( obj );
来源：https://stackoverflow.com/questions/10823408/performance-drops-when-trying-to-reset-whole-scene-with-three-js