Creating a grid in both 2D and 3D using BufferGeometry in three.js

Question

Creating a grid in both 2D and 3D using BufferGeometry in three.js

In my BufferGeometry, I have points arranged in a 1D/2D/3D grid that are dynamically mapped to higher dimensions. The goal is for these vertices to align properly with their neighboring points, as seen in a visualization of a self-organizing map.

I am looking to draw connections between these vertices, similar to the example shown above. While achieving this for 1D is simple with new Line(myBufferGeometry), how can this be done efficiently for 2D and 3D grids? Do I need to create and update separate geometries, such as multiple LineSegments? Is there a more efficient solution or any clever tricks using the index property?

javascript graphics three.js

Answer 1

Answer №1

My breakthrough came when I stumbled upon a valuable insight from the comment left by user849. The documentation didn't explicitly cover this, but it's tucked away in some examples - the index property plays a crucial role here. Essentially, when using a GeometryBuffer with the LineSegments feature and defining the index property, the lines are formed based on pairs of indices rather than pairs of points from the position attribute.

For those looking to work with an n x n x n cube, here's a comprehensive solution:

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

Answer 2

My breakthrough came when I stumbled upon a valuable insight from the comment left by user849. The documentation didn't explicitly cover this, but it's tucked away in some examples - the index property plays a crucial role here. Essentially, when using a GeometryBuffer with the LineSegments feature and defining the index property, the lines are formed based on pairs of indices rather than pairs of points from the position attribute.

For those looking to work with an n x n x n cube, here's a comprehensive solution:

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

Creating a grid in both 2D and 3D using BufferGeometry in three.js

Answer №1

Similar questions

Combining various objects within an array using JavaScript

Swap out the old nested array for a fresh array

The event fails to propagate up to the parent component

Dispense CSS using a React element

Export individual mesh via the threejs exporter in the Blender console

Three.js reverts a 3D object back to its initial position, rotation, and geometry prior to any transformations

What prevents a click event from reaching the <body> element?

Using PHP to query the database and render text and links in the menu

JavaScript fails to load updated data that was most recently submitted

Understanding the Parameters for discord.js Slash Commands

In order to set a condition for the mat date picker to display a text box in Angular if the selected date is for someone under 18 years old

Elements in list appear to break apart when resizing

The onfocus event in Chrome's JavaScript add-on fails to trigger

When attempting to use getElementsByClassName in Selenium, the js.executeScript function does not function as expected

When the initial page is loaded, Jquery is successfully loaded. However, when the page is reloaded within an

If I were to utilize my own Threejs canvas,Rephrased

Please upload JSON data into a database using Node.js

Ways to extract additional information beyond just the 'Webpack Compilation Error' while using Cypress

Content Security Policy: The website's security measures prevented a resource from being loaded

What is the correct method for calculating the sum of one input field and multiple output fields?