Three.js to visualize 3 slices of heatmaps in 3D space
<p>I'm trying to use Three.js to visualize a 3D matrix. For each 2D plane, I want the visualization to be a 2D heatmap, it will look like:</p>

<p><a href="https://i.stack.imgur.com/Kj5yb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Kj5yb.png" alt="Each plane can slide to show different slice of the matrix"></a></p>

<p>Users can drag each plane to show different slice of the matrix. The problem I'm having now is I can't find the best way in Three.js to visualize it. I drew each cell in the heatmap individually as a squre and color it. However, when the size of the matrix gets really huge, say 100000 * 500 * 200, it's very sluggish to draw.</p>

<p>I'm very new to 3D and Three.js. I looked into some examples and it seems to me that Three.js can actually visualize a huge amount of data by using particle system but I'm not sure how exactly I should utilize it. Some examples I found online didn't work for the latest version of Three.js.</p>

<p>Other requirements are to enable users to zoom, rotate and pan over the visualization.</p>

<p>A good example I found is <a href="http://www.georgeandjonathan.com/#1" rel="nofollow noreferrer">http://www.georgeandjonathan.com/#1</a>. At the end of the song, it has visualized a long sequence of data and you can rotate to see even the very beginning.</p>

<p>In short, my question is what techniques are available in three.js that I can use to visualize such plot, considering the size.</p>

<p>Thanks.</p>