ThreeJS：創建三角形條

Question

我知道這個問題已經被問過多次了，但是我似乎找不到適合我的答案。
這是我的位置： https : //codepen.io/normanwink/pen/VXpbLj

我正在根據窗口大小創建網格並將其存儲在數組中。 然后，我遍歷該數組並嘗試創建某種三角形的網格。

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

該代碼應創建網格。 但是由於某種原因，我無法弄清楚，它只是通過第一個Y坐標運行而忽略了隨后的網格點。

我相信問題出在create triangle strip循環內，但是我找不到。 有人可以幫忙嗎？

謝謝！

Answer 1

我認為您的var arrayPosition = x + y; 是錯的。

我想你想要類似（（y * current.length）+ x）* 3的東西