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

ThreeJS：创建三角带

1 个答案: