CODEWITHSUNDEEP
javascriptthree.js
Norman
Norman

Reputation: 805

ThreeJS: Create Triangle Strip

I know this has been asked multiple times, but I can't seem to find the right answer for me.
Here is where I am: https://codepen.io/normanwink/pen/VXpbLj

I'm creating a grid according to window size and storing it in an array. Then I traverse through that array and try to create some kinda triangle mesh.

const gridSize = 50;

// some other code...

var gridX = Math.ceil(windowX / gridSize);
var gridY = Math.ceil(windowY / gridSize);

// render grid
for (var y = 0; y < gridY; y++) {
    var currentY = y * gridSize;
    grid[y] = [];

    for (var x = 0; x < gridX; x++) {
        var currentX = x * gridSize;
        grid[y].push(new THREE.Vector3(currentX, currentY, Math.random() * 100));
    }
}

// create triangle strip
for (var y = 0; y+1 < grid.length; y++) {
    var current = grid[y];

    for (var x = 0; x+1 < current.length; x++) {
        var arrayPosition = x + y;

        // triangle
        var v1 = grid[y][x];
        var v2 = grid[y+1][x];
        var v3 = grid[y][x+1];

        geom.vertices.push(v1);
        geom.vertices.push(v2);
        geom.vertices.push(v3);

        geom.faces.push( new THREE.Face3( arrayPosition, arrayPosition + 1, arrayPosition +2 ) );

    }
}

var obj = new THREE.Mesh( geom, material );
scene.add(obj);

This code is supposed to create the mesh. But for some reason I can't figure out, it just runs through the first Y coordinates and disregards the following grid points.

I believe the issue is somewhere inside the create triangle strip loop, but I can't find it. Can someone help out?

Thanks!

Upvotes: 1

Views: 986

Answers (1)

manthrax
manthrax

Reputation: 5036

I think your var arrayPosition = x + y; is wrong.

I think you want something like ((y*current.length)+x)*3

Upvotes: 1

Related Questions