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

Question

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

我想绘制顶点之间的连接，如上图所示。对一维这样做很简单，因为它只是一个new Line(myBufferGeometry)，但是对于2D和3D如何实现相同的目的呢？我是否需要为此创建和更新单独的几何，例如 LineSegments？如何有效地做到这一点？或者也许我可以做一些“魔术”，例如使用index属性？

Answer 1

我想出了这一点，这要归功于囚犯849的评论-在文档中没有明确提及，并且在示例中也没有提及，但这正是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);