How to draw a 2D/3D grid from BufferGeometry in three.js

I have some points in a BufferGeometry. They arrange themselves into a regular 1D/2D/3D grid. I'm doing index mapping to higher dimensions, and moving the vertices dynamically so they end up in a proper spot relative to their neighbors (specifically, I'm visualizing a self-organizing map).

BufferGeometry

I want to draw the connections between vertices, like the above picture. Doing that for 1D is straightforward enough because it's just a new Line(myBufferGeometry), but how can the same be achieved for 2D and 3D? Do I have to create and update separate geometries for this, like make lots of
LineSegments? How can this be done efficiently? Or maybe is there some "magic" I can do, like with the index property?

new Line(myBufferGeometry)

LineSegments

index

THREE.LineSements()

THREE.BufferGeometry()

1 Answer
1

I figured this out thanks to prisoner849's comment - this isn't explicitly mentioned in the docs and kinda hidden away in examples, but this is exactly what the index property is for. When LineSegments is provided with a GeometryBuffer that has the property, the lines are based on pairs of indices rather than pairs of points in the position property.

index

LineSegments

GeometryBuffer

position

Here's a complete solution for a n x n x n cube:

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


Resources

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.