我正在使用 Isomer JS 库创建 3d 网格,需要帮助找出增量循环的逻辑。这是代码笔:
https://codepen.io/anon/pen/wqwrzL
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);
}
}
}
此代码片段创建实心 block :
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,这将开始将 block 放置在新行上。这也应该发生 8 次,有效地填充网格。
最佳答案
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 增量循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45250503/