javascript - 如何在 three.js 中从 BufferGeometry 绘制 2D/3D 网格

Question

我在 BufferGeometry 中有一些点。它们将自己排列成规则的 1D/2D/3D 网格。我正在对更高维度进行索引映射，并动态移动顶点，以便它们最终位于相对于其邻居的适当位置(具体来说，我正在可视化 self-organizing map)。

我想绘制顶点之间的连接，如上图。对 1D 执行此操作非常简单，因为它只是一个 new Line(myBufferGeometry)，但是如何对 2D 和 3D 执行相同的操作？我是否必须为此创建和更新单独的几何图形，比如制作很多线段？如何有效地做到这一点？或者我可以做一些“魔术”，比如 index 属性？

Answer 1

由于 prisoner849 的评论，我弄明白了这一点 - 这在文档中没有明确提及，并且有点隐藏在示例中，但这正是 index 属性的用途。当 LineSegments 与具有该属性的 GeometryBuffer 一起提供时，线条基于索引对而不是 position 属性中的点对.

这是 n x n x n 立方体的完整解决方案:

let nn = n * n;
let nnn = n * n * n;

function mapTo3D(index) {
    let x = index % n;
    let y = Math.floor(index / n) % n;
    let z = Math.floor(index / nn);
    return { x: x, y: y, z: z };
}

function mapFrom3D(x, y, z) {
    return x + y * n + z * nn;
}

// add nnn points to the position attribute of your myGeometryBuffer...

let indices3D = [];
for (let i = 0; i < nnn; i++) {
    var p = mapTo3D(i);
    if (p.x + 1 < n) {
        indices3D.push(i);
        indices3D.push(mapFrom3D(p.x + 1, p.y, p.z));
    }
    if (p.y + 1 < n) {
        indices3D.push(i);
        indices3D.push(mapFrom3D(p.x, p.y + 1, p.z));
    }
    if (p.z + 1 < n) {
        indices3D.push(i);
        indices3D.push(mapFrom3D(p.x, p.y, p.z + 1));
    }
}

myBufferGeometry.setIndex(indices3D);
let lines = new THREE.LineSegments(myBufferGeometry);