How to mange memory used by A-Frame?

Question

I'm building a web app which has 360 degree images loaded into an a-sky primitive. I'm using aframe-react. There are total of 20+ 360 degree images and only one img asset inside a-assets. once user switches scene react will change src of asset img and scene will re render. Everything works fine but it's using lot of memory because of caching. One time it used 4GB+ memory. In mobile the web page crashes after switching through ~8+ images. How do I handle this situation?

I tried looking into THREE.Cache but images are not cached there.

Is this memory usage has anything to do with using React?

Answer 1

There's an issue for A-Frame to automatically manage it, but right now have to hack around to clear textures.

AFRAME.scenes[0].systems.material.textureCache[url].then(function (texture) {
  texture.dispose();    
});