まずは立体を描画してみる
まずは、基本的な3Dモデルである立方体(cube)を表示、コントロールするところから始めてみましょう。
ここでは、processingの環境で一番一般的な、P3Dというライブラリを使います。これは、特別な準備をしなくても初めから使えるようになっています。
下図のように、立方体を表示します。
まず先に、全体のコードを見てみましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 | //Y軸を中心に60度回転した立方体を描画 void setup(){ size(400, 400, P3D); //P3Dと書くことによって、3D空間であることを明示する } void draw(){ background(0); translate(width/2, height/2); //立体の中心を画面中央に移動 rotateY(radians(60)); //Y軸に対して60度回転 box(150, 150, 150); //150 x 150 x 150pxの立方体を描画 } |
上記のコードを解説します。
サイズを宣言する際に、末尾に「P3D」を宣言します。
1 | size(400, 400, P3D); |
次に、「translate」を使って、中心点を移動します。
1 | translate(width/2, height/2); |
そして、Y軸を中心にして60度回転します。
1 | rotateY(radians(60)); |
最後に、150 x 150 x 150pxの立方体を描画します。
1 | box(150, 150, 150); |
x, y, z軸の理解
それでは、x, y, z軸の関係性を確認しましょう。3Dの場合はz軸が加わります。
z軸の値を変えてみましょう。一見立方体が小さくなったかのようですが、これは遠くなっているということです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | //立方体を画面の中央でなおかつ200px奥に配置 //そして、Y軸を中心に60度回転した立方体を描画 void setup(){ size(400, 400, P3D); //P3Dと書くことによって、3D空間であることを明示する } void draw(){ background(0); translate(width/2, height/2, -200); //立体の中心を画面中央に移動し、奥行きを200pxを奥にする。 rotateY(radians(60)); //Y軸に対してangleの数値分だけ回転 box(150, 150, 150); //150 x 150 x 150pxの立方体を描画 } |