Flash Player 10 (コードネーム Astro)でzパラメータやrotationX, rotationY, rotationZが追加されて、
LabelとかImageとかなら、めーーーっっっ　　ちゃ簡単に３次元表示できるようになって、今更こんなことしても意味ないじゃん！！って思われがちだけど、そこはスルーしつつ、基礎を学ぼうってことで


今回は最初だからとりあえず表示するのが目標なので、ポリゴンとか遠近とか光源とかテクスチャとか・・・もはや、なにそれおいしいの？？？笑


id:nitoyonさんのてっく煮 ブログのAS3.0 で 3D プログラミングを１から勉強するシリーズが参考になるよー。




まず、回転について、（構成は最初に数学的な説明で、あとでMatrix3Dクラスの使い方）


rotationZ = 30とかってやると、点(1, 0, 0)が、点(0, 1, 0)に移るわけだけど、なかで回転行列使ってるわけね。回転行列知らない人はグーグル先生に聞いてみるといいよ！！！
ぁ、ハチロク世代以前な人には残念なお知らせなんだけど、ゆとりっ子は、高校で習うよ！！数Cだよ！！！

↓みたいな式で、θだけ反時計回りに回転するよ！！！





で、今は、3次元について考えてるから、これの３次元バージョン

・X軸について回転



・Y軸について回転



・Z軸について回転




・使い方（X軸回転）





んで、回転行列とかアフィン変換とか3Dとかでググると、↓こんなの出てくる時もあるけど、


これは、座標系が左手系で、行優先のベクトルを使ってるからで、
DirectXがこの左手系らしく、ぐぐるといっぱいでてくる。

ゆとりでも知ってるように、行列の乗算は交換法則が成り立たないからA*BとB*Aはまったくばつものだよ！！

OpenGLとかASのMatrix3Dクラスは列優先っぽいので、DirectXとか爆発すればいいお^^




んで、行列を使うメリットは、これってこれをまとめれること。

てっく煮でも説明があるけど、

ある点Pを回転させる時に、PをまずX軸で回転して、次にY軸で回転して・・・ってやると、
回転させる点が1つとかだと別にいいんだけど、ポリゴンはフツーいっぱい点をもってて、
　　ポリゴンを回転させる = すべての点を回転させる
だから、めっちゃ計算大変なのね。

もうCPUが暖房器具になれるよ！！


行列は、交換法則は成り立たないけど、結合法則は成り立つ！！
だから、先にX軸回転とY軸回転とZ軸回転の行列を掛けておいて、
その結果１つを、各頂点に書ければとってもえころじー

たぶん文字でみてもわかんないから、下に書くASのソースみると分かりやすいかも



んで、今まで全力でスルーしてきたけど、

3次元をやってるのに行列は4*4になってる！！！


4*4にしたのは、回転に加えて平行移動も一緒にやっちゃうから
x軸方向にtx、y軸方向にty、z軸方向にtz平行移動させる時に、
for each(point in polygon) {
  p.x += tx;
  p.y += ty;
  p.z += tz;
}
なんてやらなくても、今までのように、



ってやればok


んで、そろそろ数学飽きてきたからこれをActionScriptに翻訳するよ！！

// 単位行列を生成 var matrix:Matrix3D = new Matrix3D(); // X軸回転の回転行列を掛ける matrix.appendRotation(rotateX, Vector3D.X_AXIS); // Y軸回転の回転行列を掛ける matrix.appendRotation(rotateY, Vector3D.Y_AXIS); // Z軸回転の回転行列を掛ける matrix.appendRotation(rotateZ, Vector3D.Z_AXIS); // 平行移動の回転行列を掛ける matrix.appendTranslation(offsetX, offsetY, offsetZ);


まず、Matrix3Dクラスは、引数なしでnewすると4*4の単位行列が生成されます。

んで、行列の掛け算ってめっちゃめんどいんだけど、メソッドが用意されているので使うんだけど、

行列は、A*BとB*Aが違うから、自分より前に掛けるか後ろに掛けるかで２種類用意されてます。

それが、append〜系とprepend〜系のメソッド。

A.append(B)の場合、B*A
A.prepend(B)の場合、A*B

となるらしいです。


んで、回転させるのに、↑のsinとかcosとかめんどくさいよー＞＜って思ってたら
めっちゃ簡単だったww

あるMatrix3DのインスタンスにX軸回転の回転行列を掛けるとき、
Matrix3D#appendRotate(rotateX, Vector3D.X_AXIS)とかやると、行列にrotateX度回転する機能を付与してくれるよ！！
んで、実際の点を移動させるのは、Matrix3D#transformVector(Vector3D):void！！

残りは、説明しないけど、空気を読めばわかるはず！！



んで、上で説明した。行列だと計算回数が減ってhappyっていう話は、
var rotateXMatrix:Matrix3D = new Matrix3D().appendRotation(rotateX, Vector3D.X_AXIS); var rotateYMatrix:Matrix3D = new Matrix3D().appendRotation(rotateY, Vector3D.Y_AXIS); var rotateZMatrix:Matrix3D = new Matrix3D().appendRotation(rotateZ, Vector3D.Z_AXIS); for each(var point:Vector3D in polygon) { point = rotateXMatrix.transformVector(point); point = rotateYMatrix.transformVector(point); point = rotateZMatrix.transformVector(point); point.x += _offsetX; point.y += _offsetY; point.z += _offsetZ; newPolygon.push(point); }

ってやると、for文の中がいっぱい処理があって大変だけど、 /** * 座標変換行列を返す。 * * @param rotateX X軸での回転。単位はdeg * @param rotateY Z軸での回転。単位はdeg * @param rotateZ Z軸での回転。単位はdeg * @param offsetX X軸方向への平行移動 * @param offsetY Y軸方向への平行移動 * @param offsetZ Z軸方向への平行移動 * * @return 座標変換行列 */ private function getGeometryMatrix(rotateX:Number, rotateY:Number, rotateZ:Number, offsetX:Number, offsetY:Number, offsetZ:Number):Matrix3D { // 単位行列を生成 var matrix:Matrix3D = new Matrix3D(); // X軸回転の回転行列を掛ける matrix.appendRotation(rotateX, Vector3D.X_AXIS); // Y軸回転の回転行列を掛ける matrix.appendRotation(rotateY, Vector3D.Y_AXIS); // Z軸回転の回転行列を掛ける matrix.appendRotation(rotateZ, Vector3D.Z_AXIS); // 平行移動の回転行列を掛ける matrix.appendTranslation(offsetX, offsetY, offsetZ); return matrix; } var geometryMatrix:Matrix3D = getGeometryMatrix(_rotateX, _rotateY, _rotateZ, _offsetX, _offsetY, _offsetZ); for each(var point:Vector3D in polygon) { newPolygon.push(geometryMatrix.transformVector(point)); }

って言う風に、最初に座標変換行列を用意しておいて、それを掛けるだけにするととっても楽ですよ。みたいな


んで、動くもの。(FlashPlayer10が必要)




3Dを2Dに変換するとこの投影変換は、並行投影を使うということで、Z座標を無視して表示しただけwww


ってか、HSliderをドラッグした時にすぐに描画されないのはなぜ？？updateDisplayListは走ってるはずなんだけどなぁー
ソースは右クリックで


11/17 追記
HSliderのlivedraggingプロパティをtrueにしたら反映されるようになりました。