3Dを基礎から勉強する 3次元の回転

前回のサンプルの内容をこれから少しずつ説明していきます。
http://jsdo.it/yaju3D/pixD

AS3.0 で 3D プログラミングを１から勉強する (2) - 行列の導入
AS3.0 で 3D プログラミングを１から勉強する (3) - 透視投影

今回は、3次元の回転についてです。
mouseのチェックボックスをオンにすると、マウスで立方体を回転することが出来るのですが
その部分のソースリストが下記となります。

    //マウス座標をラジアンに変換
    matrix.rotateY(this.mouse.x / 180 * Math.PI);
    matrix.rotateZ(this.mouse.y / 180 * Math.PI);

マウスを横方向に動かすと左右に回転、マウスを縦方向に動かすと平面に回転します。
今まで2次元の回転をやってきて疑問に思うのが、左右の回転なのに何故か「rotateY」と"Y"になっていることです。
そこで「rotateZ」を「rotateX」に書き換えてみてマウスを縦方向に動かすと、上下に回転します。

イメージが沸かない方は、下記サイトを見るとトラのキャラクターの回転アニメーションがみれます。
X軸回転、Y軸回転、Z軸回転
http://digicon6.typepad.jp/flash/2010/01/19-3d2-917b.html

これは何故かというと、3次元の回転については下記の図を見ると理解しやすいかと思います。

y軸の回転というのは、バレリーナのように体の軸を中心にスピンするイメージです。
フライトシュミレーション用語ではヨーといいます。

x軸の回転というのは、体操選手が鉄棒を軸に前転または後転するイメージです。
フライトシュミレーション用語ではピッチといいます。

z軸の回転というのは、飛行機のように両手を広げて体を左右に曲げてみるイメージです。
フライトシュミレーション用語ではロールといいます。

飛行機でのイメージでは下図となります。

パイロットから見たロール、ヨー、ピッチ
http://nippon.zaidan.info/seikabutsu/2001/00367/contents/00006.htm

mouseのチェックボックスをオフにすると、立方体を自動回転させています。
30度前におじぎした立方体を、まんべんなく回転させて見せています。

   // 自動回転 
   matrix.rotateX(Math.PI / 6); //30度
   matrix.rotateY(this.rad / 180 * Math.PI * 3); //少し速めに回転
   matrix.rotateZ(this.rad / 180 * Math.PI);
　 // 角度更新
   this.rad = (this.rad + 1) % 360;

次回は透視投影について説明していきます。