How to handle loading models in a Single Page App

I am building a web app using Vue and routing.

I find that whenever I go from the page where babylon is loaded, to another page, and back to the babylon page, the 3d scene is rendered again, causing a memory leak, eventually causing my browser to freeze, and sometimes causing my computer to freeze. How should I handle this? This is especially true when loading multiple models.

Hi @anthonypurington!

It might be difficult to answer your question without seeing some code but here is a suggestion to look into. Have you tried calling Scene.dispose() on the page component beforeDestory lifecycle hook? Or if you are using vue-router, maybe there are more appropriate places in its API to call dispose(). Not sure what version of Vue you are using (and I am more familiar with React tbh), but that’s where I would start.


Thank! I’ll give this a try. I did think about doing that, but I was wondering if there was a different way to do it by using the asset loader for some reason. I figured it would be a bit difficult to to answer without code, but I also figured that my code wouldn’t really run in the playground because its in Vue.

No worries man! Definitely understand. Just wanted to qualify my answer as non-definitive since I am kinda shooting in the dark =) Good luck and I hope it solves your issue!