学習日
2025年7月8日
名前
樋口桜大
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） のようにやってみよう！
コード
function setup() {
createCanvas(400, 400, WEBGL);
}
function draw() {
background(200);
normalMaterial()
push();
translate(-100, 0);
rotateX(frameCount * 0.01);
rotateY(frameCount * 0.01);
box(100);
pop();
normalMaterial()
push();
translate(100, 0);
rotateX(-frameCount * 0.02);
rotateY(-frameCount * 0.02);
box(100);
pop();
}📷 実行結果
まとめ・感想
・回転の速さを上げるときに、どのくらいの数を増やせば良いのかを考えることができた。
・図形を逆回転させるときに、frameCountに「ー（マイナス）」をつけるという発想は自分になかったから、もっと文章の意味を理解したいと思った。
・座標を真ん中が、（０，０）になっていることを忘れてしまったから、次からは凡ミスをなくしたい。