3 次元的に画像を回転させる

(サンプル一覧を表示する)

3 次元的に画像を回転させるテストをしてみました。

Flash Player 10 以降の環境では、回転のプロパティに、
rotationX, rotationY, rotationZ が追加され、それぞれ X 軸, Y 軸, Z 軸に沿って
画像を回転させることができるようになりました。

Flash Player 9 以前の環境では rotationX, rotationY, rotationZ は
使えませんので注意してください。
Flash の実行画面
3 次元的に画像を回転させる

Flashプレーヤーが入っていないか、JavaScriptが無効になっているようです。

Get Adobe Flash player

3 次元的に画像を回転させる

ソースコード

package 
{
	import flash.display.Bitmap;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.geom.PerspectiveProjection;
	import flash.geom.Point;
	
	/**
	 * 3 次元的に画像を回転させるサンプル
	 * @author Hikipuro
	 */
	public class Main extends Sprite 
	{
		/**
		 * 埋め込み画像
		 */
		[Embed(source='../image/test001.png')]
		private var image:Class;
		
		/**
		 * ビットマップ
		 */
		private var bitmap1:Bitmap;
		private var bitmap2:Bitmap;
		private var bitmap3:Bitmap;
		
		/**
		 * コンストラクタ
		 */
		public function Main():void 
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
		
		/**
		 * 初期化メソッド
		 * @param	e
		 */
		private function init(e:Event = null):void 
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// entry point
			
			// ビットマップの準備
			
			// bitmap1 は、 X 軸を基準に回転させる
			bitmap1 = new image;
			bitmap1.cacheAsBitmap = true;
			bitmap1.smoothing = true;
			bitmap1.width /= 2;
			bitmap1.height /= 2;
			bitmap1.x = 50;
			bitmap1.y = 140;
			bitmap1.z = 1;
			addChild(bitmap1);
			
			// bitmap2 は、 Y 軸を基準に回転させる
			bitmap2 = new image;
			bitmap2.cacheAsBitmap = true;
			bitmap2.smoothing = true;
			bitmap2.width /= 2;
			bitmap2.height /= 2;
			bitmap2.x = 150;
			bitmap2.y = 10;
			bitmap2.z = 1;
			addChild(bitmap2);
			
			// bitmap3 は、 Z 軸を基準に回転させる
			bitmap3 = new image;
			bitmap3.cacheAsBitmap = true;
			bitmap3.smoothing = true;
			bitmap3.width /= 2;
			bitmap3.height /= 2;
			bitmap3.x = 150;
			bitmap3.y = 140;
			bitmap3.z = 1;
			addChild(bitmap3);
			
			// イベント登録
			addEventListener(Event.ENTER_FRAME, onEnterFrame);
		}
		
		/**
		 * フレーム開始イベント
		 * @param	e
		 */
		private function onEnterFrame(e:Event):void 
		{
			bitmap1.rotationX++;
			bitmap2.rotationY++;
			bitmap3.rotationZ++;
		}
		
	}
	
}
		

標準の状態では、視線が画面の中心に向かって奥まって行くような設定になっています。
中心点や、パースのかけ方を変えたい時は、DisplayObject.transform の中の、
perspectiveProjection プロパティに中心点等をセットしてみてください。

Z プロパティが 0 に設定されている表示要素は、従来の 2D の座標系が使われるようです。
Z プロパティに 0 以外の値を設定すると、座標系が 3D になります。
つまり、Z が 0 以外の場合は、X = 100, Y = 100 と設定したとしても、
X = 100, Y = 100 の位置に表示されません。


FlashDevelop で Flash Player 10 対応の SWF を作る時は、
プロジェクトのプロパティ画面を開いて、ターゲットプラットフォームを
Flash Player 10 に設定してください。


ここで Flash Player 10 を選択します。

外部リンク