javascript - 三个JS : Create Triangle Strip

Question

我知道这个问题已被多次询问，但我似乎找不到适合我的正确答案。
这是我所在的位置:https://codepen.io/normanwink/pen/VXpbLj

我正在根据窗口大小创建一个网格并将其存储在一个数组中。然后我遍历该数组并尝试创建一些三 Angular 形网格。

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 这样的东西