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-hand Coordinate），也就是把你的左手拿出來，姆指指向符合 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 的世界裡，相機通常代表著可以調整觀察方向、角度的一種方式，將最後繪製的畫面，比擬為物體在相機鏡頭上的投影，實際上還有其他的投影方式，可調整的參數不同，這就留待下一篇文件再來談了…