Question

我正在使用Isomer JS库创建一个3d网格，需要帮助找出增量循环的逻辑。这是Codepen：

使用Javascript：

function draw() {
    var iso = new Isomer(document.getElementById("grid"));

    var Shape = Isomer.Shape;
    var Point = Isomer.Point;
    var Path = Isomer.Path;
    var Color = Isomer.Color;
    var cube = Shape.Prism(Point.ORIGIN);
    var white = new Color(255, 255, 255, 0.4);

    makeGrid(8, 8, 0, new Color(100, 100, 100, 0.6));

    for (x = 0; x < 8; x++) {
        iso.add(Shape.Prism(new Point(x, 0, 0), 1, 1, .5), white);
    }

    // GridMaker
    function makeGrid(xSize, ySize, zHeight, gridColor) {
        for (x = 0; x < xSize + 1; x++) {
            iso.add(new Path([
            new Point(x, 0, zHeight),
            new Point(x, xSize, zHeight),
            new Point(x, 0, zHeight)
            ]), gridColor);
        }
        for (y = 0; y < ySize + 1; y++) {
            iso.add(new Path([
            new Point(0, y, zHeight),
            new Point(ySize, y, zHeight),
            new Point(0, y, zHeight)
            ]), gridColor);
        }
    }
}

此代码段创建固体块：

for (x = 0; x < 8; x++) {
            iso.add(Shape.Prism(new Point(x, 0, 0), 1, 1, .5), white);
        }

订购了

new Point()个值：x，y，z。在每第8次迭代之后，我需要将y值增加1，这将开始在新行上放置块。这也应该发生8次，有效地填补了网格。

Answer 1

function draw() {
    var iso = new Isomer(document.getElementById("grid"));

    var Shape = Isomer.Shape;
    var Point = Isomer.Point;
    var Path = Isomer.Path;
    var Color = Isomer.Color;
    var cube = Shape.Prism(Point.ORIGIN);
    var white = new Color(255, 255, 255, 0.4);

    makeGrid(8, 8, 0, new Color(100, 100, 100, 0.6));

    for (x = 0; x < 8; x++) {
      for (y = 0; y < 8; y++) {
        iso.add(Shape.Prism(new Point(x, y, 0), 1, 1, .5), white);
      }
    }

    // GridMaker
    function makeGrid(xSize, ySize, zHeight, gridColor) {
        for (x = 0; x < xSize + 1; x++) {
            iso.add(new Path([
            new Point(x, 0, zHeight),
            new Point(x, xSize, zHeight),
            new Point(x, 0, zHeight)
            ]), gridColor);
        }
        for (y = 0; y < ySize + 1; y++) {
            iso.add(new Path([
            new Point(0, y, zHeight),
            new Point(ySize, y, zHeight),
            new Point(0, y, zHeight)
            ]), gridColor);
        }
    }
}

Javascript增量循环

1 个答案: