p5.jsの3D機能を利用すると、3次元空間内に立体的なオブジェクトを描画したり、カメラを移動したり、光源を制御したりすることができる。
createCanvas関数の第３引数に定数WEBGLを指定することで、３D関連の関数が使用できるようになる。
createCanvas(400, 400, WEBGL);３Dオブジェクトを操作する主な関数として以下がある。各関数の詳細な引数は省略した。
| 3D関数 | 機能 |
| box( w, [h] ) | 幅ｗ、高さｈの直方体。ｈを省略すれば立方体 |
| shere( r ) | 半径ｒの球体 |
| torus( r ) | 半径ｒの円環面 |
| toranslate( x, y, [z] ) | 座標原点の移動 |
| rotateX( angle ) | ｘ軸回りにangleラジアン回転 |
| rotateY( angle ) | ｙ軸回りにangleラジアン回転 |
例題 4-5-1
立方体を、frameCount を使って回転させる。rotateX() と rotateY() を使って、立方体をなめらかに動かす。
コード
function setup() {
createCanvas(400, 400, WEBGL);
}
function draw() {
background(200);
normalMaterial()
push();
translate(0, 0);
rotateX(frameCount * 0.01);
rotateY(frameCount * 0.01);
box(100);
pop();
}練習問題4-5-1
2つの立方体を、左右に分けて配置し、
それぞれ別々の回転をするようにしなさい。
📌 たとえば、次のようにしてもよい：
- 左の立方体：ゆっくり時計回りに回転（
frameCount * 0.01） - 右の立方体：速く反対向きに回転（
-frameCount * 0.02）
回転する向き（X軸まわり、Y軸まわりなど）やスピードは自由に変えてみよう。translate()、rotateX()、rotateY() をうまく使って表現しよう。