p5.j​​s rotateX不能与TriangleStrip一起使用？

Question

我正在尝试用Javascript中的p5.js制作一个小动画。

但是，rotateX()功能存在一些问题。我有以下代码：

http://codepen.io/anon/pen/JbZdRN?editors=1010

var w, h, scl, rows, cols;

function setup() {
    w = 500;
    h = 500;
    scl = 20;
    cols = w / scl;
    rows = h / scl;
    createCanvas(500, 500);
}

function draw() {
    background(0);
    noFill();
    stroke(255);
    translate(width/2, height/2);
    rotateX(radians(15));

    for(var y = 0; y < cols; y++) {
        beginShape(TRIANGLE_STRIP);
        for(var x = 0; x < rows; x++){
            vertex(x*scl, y*scl, 0);
            vertex(x*scl, (y+1)*scl, 0);
        }
        endShape();
    }
}

问题在于我无法在x轴上旋转三角形条带。

问题是，如果我使用rotate()它可以工作（但它是错误的轴）。如果我使用rotate(PI, X)或rotate(PI, Y)，它也无效。

所以我真的不能在X轴上旋转整个东西。我怎么能这样做？

Answer 1

JavaScript控制台可以最好地回答这些问题。在大多数浏览器中按F12，或在设置菜单中查找“开发人员选项”。你得到的任何错误，这将有助于你了解当事情不起作用时发生的事情。

在您的情况下，您收到错误：Uncaught not supported in p2d. Please use webgl mode

那个错误告诉你一切。您正在使用默认渲染器，该渲染器仅在2D中渲染。围绕X轴旋转需要以3D渲染。因此，要修复此错误，您需要将WEBGL渲染器传递到createCanvas()渲染器中。更多信息可以在the reference找到。

修复该错误后，您遇到了与this issue似乎有关的其他问题，但希望这会让您朝着正确的方向前进。故事的道德：检查JavaScript控制台。