p5.js 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，或在设置菜单中查找 "developer options"。您遇到的任何错误都在这里，这将帮助您了解当事情不起作用时发生了什么。

在你的例子中，你得到一个错误：Uncaught not supported in p2d. Please use webgl mode

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

中找到更多信息

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

p5.js rotateX 不适用于 TriangleStrip？

p5.js rotateX doesn't work with TriangleStrip?

javascript

p5.js