FIVe3D + Tweener で簡単3Dモーション

AS3の3Dライブラリは数多くあるけども、とりあえず触ってみようと思ったのが「FIVe3D」。

「PaperVision3D」も気になる存在ではあるが、今のところ、ここまで本格的な3Dを扱う予定はない。まずは簡単に簡易的にさくっと導入できる「FIVe3D」を触ってみようと思う。さらについでなんで「Tweener」を利用してオブジェクトをアニメーションさせてみる。

サンプル

マウスをクリックするとオブジェクトが動きます。

ソースはこちら

package {
	//クラス読み込み
	import flash.display.StageScaleMode;
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	//FIVe3Dv2.1
	import five3D.display.Scene3D;
	import five3D.display.Sprite3D;
	import five3D.utils.Drawing;
	//Tweener 1.31.71
	import caurina.transitions.Tweener;
	
	public class Main extends Sprite {
		
		private var sc3D:Scene3D;
		private var base3D:Sprite3D;
		private var sp3D:Sprite3D;
		
		//コンストラクタ
		public function Main() {
			
			//ステージサイズ設定
			stage.scaleMode = StageScaleMode.NO_SCALE;
			
			//シーン設定
			sc3D = new Scene3D();
			sc3D.x = stage.stageWidth / 2;
			sc3D.y = stage.stageHeight / 2;
			addChild(sc3D);
			
			//ベースオブジェクト生成
			sp3D = new Sprite3D();
			with(sp3D) {
				graphics3D.beginFill(0xFF9900);
				graphics3D.drawRoundRect(-40, -40, 80, 80, 10, 10);
				graphics3D.endFill();
			}
			sc3D.addChild(sp3D);
			
			//イベント設定
			stage.addEventListener(MouseEvent.CLICK, stageClick);
		}
		
		private function stageClick(e:MouseEvent):void {
			Tweener.addTween(sp3D, {
				time:1,
				x:100-Math.random()*200,
				y:100-Math.random()*200,
				z:500-Math.random()*1000,
				rotationX:180-Math.random()*360,
				rotationY:180-Math.random()*360,
				rotationZ:180-Math.random()*360,
				transition:"easeOutSine"
			});
		}
	}
}

※上記ソースには「FIVe3D」と「Tweener」が別途必要です。

private var sc3D:Scene3D;
//シーン設定
sc3D = new Scene3D();
sc3D.x = stage.stageWidth / 2;
sc3D.y = stage.stageHeight / 2;
addChild(sc3D);

↑
FIVe3Dの使い方は簡単。上記は毎回お決まりみたいなもので、まずはシーンというオブジェクトを作成する。

private var sc3D:Scene3D;
//ベースオブジェクト生成
sp3D = new Sprite3D();
with(sp3D) {
	graphics3D.beginFill(0xFF9900);
	graphics3D.drawRoundRect(-20, -20, 40, 40, 10, 10);
	graphics3D.endFill();
}
sc3D.addChild(sp3D);

↑
次に3D用のオブジェクトを作成し、先ほどのシーンの中に addChild する。

Tweener.addTween(sp3D, {
	time:1,
	x:100-Math.random()*200,
	y:100-Math.random()*200,
	z:100-Math.random()*200,
	rotationX:180-Math.random()*360,
	rotationY:180-Math.random()*360,
	rotationZ:180-Math.random()*360,
	transition:"easeOutSine"
});

↑
あとは、Tweener で、主なプロパティ、x, y, z, rotationX, rotationY, rotationZ, scaleX, scaleY, scaleZ などを任意に数値を変えて遊んでみる。

しかし、こういうライブラリを利用すると、お手軽簡単に3Dの表現をすることができるので非常に楽だね。

コンテンツの内容にもよるのだが、個人的にはもっと簡易的な3DでもOKな時があるので、AS2で作ってたライブラリを暇な時にでもAS3に移植してみようかなと思う。