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。在歌曲的结尾，它显示了一长串数据，您甚至可以旋转查看开头。

简而言之，我的问题是，考虑到大小，我可以使用 three.js 中的哪些技术来可视化此类绘图。

谢谢。

Answer 1

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

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 这对我有帮助。

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