まずは立体を描画してみる
まずは、基本的な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の立方体を描画
} |
