p5.js rotateX не работает с TriangleStrip?

Question

Я пытаюсь сделать небольшую анимацию с p5.js в Javascript.

Однако у меня есть некоторые проблемы с функцией 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(); 
    } 
} 

Проблема заключается в том, что не может вращать треугольник полосы на оси х.

Дело в том, что если я использую 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.