javascript - 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 轴上旋转三 Angular 形带。

问题是，如果我使用 rotate() 它会起作用(但它是错误的轴)。如果我使用 rotate(PI, X) 或 rotate(PI, Y)，它也不起作用。

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

Answer 1

诸如此类的问题最好由 JavaScript 控制台来回答。在大多数浏览器中按 F12，或在设置菜单中查找“开发人员选项”。您遇到的任何错误都会放在这里，这将帮助您了解当事情不起作用时发生了什么。

在你的例子中，你得到一个错误:Uncaught not supported in p2d.请使用webgl模式

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

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