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을 누르거나 설정 메뉴에서 '개발자 옵션'을 찾으십시오. 오류가 발생하면 여기로 이동하면 문제가 발생했을 때 상황을 이해하는 데 도움이됩니다. 귀하의 경우에는

는 오류 얻을 : Uncaught not supported in p2d. Please use webgl mode

을 그리고 오류가 당신에게 모든 것을 알려줍니다. 2D로만 렌더링하는 기본 렌더러를 사용하고 있습니다. X 축을 중심으로 회전하려면 3D로 렌더링해야합니다. 따라서이 오류를 수정하려면 createCanvas() 렌더러에 전달하여 WEBGL 렌더러를 사용해야합니다. 더 많은 정보는 the reference에서 찾을 수 있습니다.

이 오류를 수정 한 후에는 this issue과 관련된 것으로 보이는 다른 문제가 있지만 잘하면이 방향으로 나아갈 수 있습니다. 이야기의 도덕적 인 부분 : 자바 스크립트 콘솔을 확인하십시오.