Three.js可视化3D空间中的3片热图

Question

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

用户可以拖动每个平面以显示矩阵的不​​同切片。我现在遇到的问题是我无法在Three.js中找到最佳方式来实现它。我将热图中的每个单元格单独绘制成方形并为其着色。然而，当矩阵的大小变得非常大时，比如100000 * 500 * 200，绘制起来非常缓慢。

我是3D和Three.js的新手。我查看了一些例子，在我看来，Three.js实际上可以通过粒子系统可视化大量数据，但我不确定我应该如何利用它。我在网上找到的一些例子不适用于最新版本的Three.js。

其他要求是允许用户缩放，旋转和平移可视化。

我发现的一个很好的例子是http://www.georgeandjonathan.com/#1。在歌曲结束时，它可以显示一长串数据，你甚至可以旋转即可查看。

简而言之，我的问题是，在考虑尺寸的情况下，我可以使用哪些技术可用于可视化这样的情节。

感谢。

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);

A good example帮助了我。

我还有一个问题尚未解决，那就是所有粒子都一直面向相机。当热图旋转时，这些粒子将始终面向您，因此整个平面的方向都会改变。当我找到解决方案时，我会发布我的更新。