3D 入門

p5.js 預設的渲染器（render）是2D，基於HTML5，它也支援3D 渲染器，基於WebGL，如果你對WebGL 有興趣，我也撰寫了〈語言技術：WebGL〉可供參考。

在p5.js... 回P5JS p5.js預設的渲染器（render）是2D，基於HTML5，它也支援3D渲染器，基於WebGL，如果你對WebGL有興趣，我也撰寫了〈語言技術：WebGL〉可供參考。

在p5.js中進行3D繪製，當然不用涉入WebGL的繁複細節，只需要在createCanvas的第三個參數指定WEBGL，例如，來繪製一個3D正立方體： 嗯？不是要繪製3D嗎？怎麼看來是個2D方塊而已？這是因為p5.js預設的座標系統是： 在使用p5.js進行3D繪製時，你其實是透過一個相機在看物體，相機的螢幕就是畫布，因為在2D繪圖時，畫布時右方是x正方向，下方是y正方向，為了符合原本2D的座標系統，3D版本的座標也就是朝右是x正方向，朝下是y正方向，不過要注意的是，原點是在畫布中心，而且z的正方向是朝向你。

這是因為WebGL是採取左手座標（Left-handCoordinate），也就是把你的左手拿出來，姆指指向符合x軸正方向，食指指向符合y軸正方向，而掌心朝向符合z正方向的話，那該系統就是採用左手座標，而為了符合2D座標系統時畫布的x與y方向，z正方向就是朝向你了。

box繪製時會以原點為中心，如上圖所示，你看到的只有一個面，為了能看到3D立方體的其他面，方式之一是透過rotate、rotateX、rotateY或rotateZ等旋轉後續程式碼建立的3D物體之繪製資訊（像是頂點座標、像素顏色等），旋轉時用左手姆指指向該軸正方向，四個手指的彎曲方向就是轉動時的角度正值。

例如，讓方塊看來像是繞x軸旋轉： 範例中紅色是x軸、綠色是y軸，藍色是z軸，因為z軸朝向你，因此只看到箭頭符號的一小條藍線，你可以試著加入rotateY、rotateZ，就可以看到不同旋轉方式下，立方體的其他面。

你可能會想，能否指定box的位置或直接轉動box呢？不行！在p5.js的3D支援中，內建的3D物件沒辦法指定這些資訊。

想看到立方體其他面的另一種方式是移動相機，這可以使用camera函式，根據camera的說明，camera的前三個參數是用來指定相機的位置(x,y,z)，而相機預設會擺放在(0,0,(height/2.0)/tan(PI*30.0/180.0))，就上例來說，若要看到立方體在x軸方向的面，可以改變一下這個位置，例如，往右往下移一些： camera的第4、5、6個參數是相機看向的位置，而最後三個參數是相機頂部的方向，是的！就我們的觀點來看，相機預設是倒著擺的，就座標軸來看，相機的頂部是朝y正方向。

相機其實只是一種比擬，在3D的世界裡，相機通常代表著可以調整觀察方向、角度的一種方式，將最後繪製的畫面，比擬為物體在相機鏡頭上的投影，實際上還有其他的投影方式，可調整的參數不同，這就留待下一篇文件再來談了…