Recently, I have been working on a Tile Renderer for three.js and so far, everything appears to be functioning correctly.
The process is quite simple:
a) It creates multiple cameras, b) Renders the scene using each camera c) Generates a 'toDataURL' and downloads it.
Here is a snippet of the code:
this.renderer.render( this.scene , this.camera );
var imgData = this.renderer.domElement.toDataURL();
//this.imageData.push( imgData );
var a = document.createElement('a');
a.href = imgData;
a.download = this.title + "_"+this.x+"_"+this.y+".png";
a.click();
However, when this process is repeated numerous times, it ends up producing an excessive amount of images. This causes my Chrome tab to crash without fail. Is there any way to prevent or mitigate this issue? Perhaps by adjusting certain settings in Chrome or modifying the code itself. I have attempted adding timeouts for each render call (such as pausing the renderer, rendering one image, and saving it every 10 seconds), but even this method does not seem to resolve the problem.
If you are curious to witness the crash, feel free to visit the following link: (simply press 'p' to attempt capturing the images; note that the page may take a moment to load).
Thank you in advance for any assistance!
Sincerely, Isaac / Cabbibo