Papervision3D 2.0 のオブジェクトを Tweener で動かしてみる

PV3D のオブジェクトを自由自在に制御するために Tweener を利用してみる。

※上記の枠内をクリックするとオブジェクトがランダムに動きます。

といっても、スクリプトは非常に簡単。

Tweener.addTween(cube1, {
	time:0.7,
	x:600 - Math.random() * 1200,
	y:100 - Math.random() * 200,
	z:1000 - Math.random() * 2000,
	alpha:0.2 + Math.random() * 0.8,
	rotationX:180 - Math.random() * 360,
	rotationY:180 - Math.random() * 360,
	rotationZ:180 - Math.random() * 360,
	transition:"easeOutSine"
});

↑3D オブジェクトのプロパティ（x, y, z や rotationX, rotationY, rotationZ など）を Tweener で指定するのみ。

ただ、alpha を扱う場合はちょっと注意が必要になってくる。

cube1 = new Cube(materials1, 300, 200, 100);//Cube生成
cube1.x = 250;
cube1.useOwnContainer = true;

↑こんな感じでオブジェクトを生成後、useOwnContainer プロパティを true にする必要があるようだ。これを true にすると、alpha だけではなくフィルターも使用できるようになるみたい。

Tweener.addTween(cube2, {
	time:1,
	scale:0.5 + Math.random() * 1.5,
	alpha:0.2 + Math.random() * 0.8,
	rotationX:180 - Math.random() * 360,
	rotationY:180 - Math.random() * 360,
	rotationZ:180 - Math.random() * 360,
	transition:"easeOutSine"
});

↑あと全てのスケールを同じく設定する場合は、scaleX, scaleY, scaleZ と個別で指定しなくても scale で指定すればOKのようだ。

以下、参考サイト。

papervision3D | alphaを操作する - DUBFLASH

alpha を操作するためのコツ。

PaperVision3D 2.0で被写界深度が実現できたよ | ClockMaker Blog

上記と関連して、フィルターを利用したデモのサンプル。

[pv3d] PaperVision3D 2.0 Betaでマウスインタラクティブ - Vox

useOwnContainer を true にした場合、クリックイベントなどが使えなくなるらしく、その対応方法。今回は特に関連が無いが今後のためにメモ

全ソースは下記。

package
{
	import flash.display.*;
	import flash.events.*;
	import caurina.transitions.Tweener;
	//Papervision3D 2.0.883
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.cameras.Camera3D;
	import org.papervision3d.view.Viewport3D;
	import org.papervision3d.render.BasicRenderEngine;
	import org.papervision3d.objects.primitives.Cube;
	import org.papervision3d.materials.ColorMaterial;
	import org.papervision3d.materials.WireframeMaterial;
	import org.papervision3d.materials.special.CompositeMaterial;
	import org.papervision3d.materials.utils.MaterialsList;
	public class Main extends Sprite
	{
		public var main:MovieClip;
		private var scene:Scene3D;
		private var camera:Camera3D;
		private var viewport:Viewport3D;
		private var renderer:BasicRenderEngine;
		private var cube1:Cube;
		private var cube2:Cube;
		/*============================================================
		コンストラクタ
		============================================================*/
		public function Main()
		{
			init();
			init3D();
		}
		/*============================================================
		初期設定
		============================================================*/
		public function init():void
		{
			//ステージ
			stage.showDefaultContextMenu = false;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
		}
		/*============================================================
		3D処理
		============================================================*/
		public function init3D():void
		{
			scene = new Scene3D();//シーン
			camera = new Camera3D();//カメラ
			renderer = new BasicRenderEngine();//レンダラー
			viewport = new Viewport3D(0, 0, true);//ビューポート
			viewport.opaqueBackground = 0x000000;//背景色
			addChild(viewport);
			
			//オブジェクト1
			var compMaterial1:CompositeMaterial = new CompositeMaterial(); //コンポジットマテリアル
			compMaterial1.addMaterial(new ColorMaterial(0xFF6600));
			compMaterial1.addMaterial(new WireframeMaterial(0xFFFFFF));
			var materials1:MaterialsList = new MaterialsList
			({
				all : compMaterial1
			});
			cube1 = new Cube(materials1, 300, 200, 100);//Cube生成
			cube1.x = 250;
			cube1.useOwnContainer = true;
			scene.addChild(cube1);
			
			//オブジェクト2
			var compMaterial2:CompositeMaterial = new CompositeMaterial(); //コンポジットマテリアル
			compMaterial2.addMaterial(new ColorMaterial(0x0066FF));
			compMaterial2.addMaterial(new WireframeMaterial(0xFFFFFF));
			var materials2:MaterialsList = new MaterialsList
			({
				all : compMaterial2
			});
			cube2 = new Cube(materials2, 100, 100, 100);//Cube生成
			cube2.x = -250;
			cube2.useOwnContainer = true;
			scene.addChild(cube2);
			
			//イベント
			stage.addEventListener(Event.ENTER_FRAME, onEnterFrame);
			stage.addEventListener(MouseEvent.CLICK, stageClick);
		}
		/*============================================================
		レンダリング
		============================================================*/
		private function onEnterFrame(event:Event):void
		{
			renderer.renderScene(scene, camera, viewport);//レンダリング
		}
		/*============================================================
		クリック処理
		============================================================*/
		private function stageClick(event:MouseEvent):void
		{
			Tweener.addTween(cube1, {
				time:0.7,
				x:600 - Math.random() * 1200,
				y:100 - Math.random() * 200,
				z:1000 - Math.random() * 2000,
				alpha:0.2 + Math.random() * 0.8,
				rotationX:180 - Math.random() * 360,
				rotationY:180 - Math.random() * 360,
				rotationZ:180 - Math.random() * 360,
				transition:"easeOutSine"
			});
			Tweener.addTween(cube2, {
				time:1,
				scale:0.5 + Math.random() * 1.5,
				alpha:0.2 + Math.random() * 0.8,
				rotationX:180 - Math.random() * 360,
				rotationY:180 - Math.random() * 360,
				rotationZ:180 - Math.random() * 360,
				transition:"easeOutSine"
			});
		}
	}
}

この記事をブックマークしておく