Three.js在3维空间中可视化3片热图

Question

我正在尝试使用Three.js来可视化一个3D矩阵。对于每一个2D平面，我希望可视化是一个2D热图，它看起来如下：

​

​

用户可以拖动每一架飞机来显示矩阵的不同部分。我现在面临的问题是，我无法在Three.js中找到最好的方法来可视化它。我把热图中的每个单元格分别画成一个方形，然后给它涂上颜色。然而，当矩阵的大小变得非常大时，比如说100000 * 500 * 200，它的绘制非常缓慢。

我对3D和Three.js非常陌生。我看了一些例子，在我看来，Three.js实际上可以通过使用粒子系统来可视化大量的数据，但我不确定我应该如何使用它。我在网上发现的一些例子不适用于最新版本的Three.js。

其他要求是使用户能够缩放、旋转和平移可视化。

我发现的一个很好的例子是http://www.georgeandjonathan.com/#1。在歌曲的结尾，它可视化了一长串数据，你甚至可以旋转看到最开始。

简而言之，我的问题是，考虑到three.js的大小，我可以使用什么技术来可视化这样的情节。

谢谢。

Answer 1

在我看了几个示例之后，看起来使用由一个THREE.Points构建的BufferGeometry和一个PointsMaterial就足以可视化热图了。

var PARTICLE_SIZE = 15;
var geometry = new THREE.BufferGeometry();
var material = new THREE.PointsMaterial({
    size:PARTICLE_SIZE;
    , vertexColors: THREE.VertexColors
});

var rowNumber = 200, columnNumber = 10000;
var particleNumber = rowNumber * columnNumber;
var positions = new Float32Array(particleNumber * 3);
var colors = new Float32Array(particleNumber * 3);
for (i = 0; i < rowNumber; ++i) {
    for (j = 0; j < columnNumber; ++j) {
        var index = (i * columnNumber + j) * 3;

        // put vertices on the XY plane
        positions[index] = rowIndex * PARTICLE_SIZE;
        positions[index + 1] = columnIndex * PARTICLE_SIZE;
        positions[index + 2] = 0;

        // just use random color for now
        colors[index] = Math.random();
        colors[index + 1] = Math.random();
        colors[index + 2] = Math.random();
    }
}
// these attributes will be used to render the particles
geometry.addAttribute('position', new THREE.BufferAttribute(positions, 3));
geometry.addAttribute('color', new THREE.BufferAttribute(colors, 3));
var particles = new THREE.Points(geometry, material);
scene.add(particles);

帮助我的很好的例子。

有一个问题我还没有弄清楚，那就是所有的粒子都一直面对着摄像机。当热图旋转时，这些粒子总是对着你，这样整个平面就改变了方向。当我找到解决方案时，我会发布我的更新。