Matrix3Dで３Ｄ回転＋回転中心点の変更

最新のFlexSDK3.2でMatrix3Dが使えるようになっていたので勉強がてら使ってみました。
こんな感じ
http://moeten.info/flex/20081120_matrix3Dtest/bin-release/main.html

Matrix3Dはなんといっても回転の中心が設定できるのが便利(^o^)
回転点を変更するには Matrix3D.appendTranslation() を使用します。
いったん画像をずらして回転して元にもどすと画像の中心などから回転することができます。
ちょっと面倒だけどよく使うので覚えておいて損はないです。

//回転中心点をずらす
mat3D.appendTranslation(-myCanvas.width/2,-myCanvas.height/2,0);
//回転
mat3D.appendRotation(nRotationX, Vector3D.X_AXIS);
mat3D.appendRotation(nRotationY, Vector3D.Y_AXIS);
mat3D.appendRotation(nRotationZ, Vector3D.Z_AXIS);
//中心点をもどす
mat3D.appendTranslation(myCanvas.width/2,myCanvas.height/2,0);

参考リンク

• Matrix3Dクラス − 変換行列2
• Matrix3Dクラス

ソースはこちら

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    backgroundGradientColors="[0xffffff,0xcccccc]"
    creationComplete="creationCompleteHandler(event)"
    >
<mx:Script>
<![CDATA[
private function creationCompleteHandler(e:Event):void
{
    this.addEventListener(Event.ENTER_FRAME , onEnterFrameHandler );
}
private var nRotationX:int = 0;
private var nRotationY:int = 0;
private var nRotationZ:int = 0;
private function onEnterFrameHandler(e:Event):void
{
    var mat3D:Matrix3D = new Matrix3D();
    nRotationX++;
    nRotationY++;
    nRotationZ++;
    //回転中心点をずらす
    mat3D.appendTranslation(-myCanvas.width/2,-myCanvas.height/2,0);
    //回転
    mat3D.appendRotation(nRotationX, Vector3D.X_AXIS);
    mat3D.appendRotation(nRotationY, Vector3D.Y_AXIS);
    mat3D.appendRotation(nRotationZ, Vector3D.Z_AXIS);
    //中心点をもどす
    mat3D.appendTranslation(myCanvas.width/2,myCanvas.height/2,0);
    //Matrix3Dを適応
    myCanvas.transform.matrix3D = mat3D;
}
]]>
</mx:Script>
<mx:Canvas id="myCanvas" width="300" height="300" clipContent="false" backgroundAlpha="0.5"
    backgroundColor="0xffffff" borderColor="0x666666" borderStyle="solid" borderThickness="4">
    <mx:Image id="myImage" source="01.png" scaleX="0.2" scaleY="0.2" z="30" verticalCenter="0" horizontalCenter="0"/>
</mx:Canvas>
</mx:Application>