Papervision3D 2.0 オブジェクトを入れ子にして個別に Tweener で動かしてみる

PV3D で複数オブジェクトを制御してみる。オブジェクト数がちょっと多いので入れ子にして、全体を動かしつつ個別に Tweener で動かしてみようと思う。

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

上記サンプルでは、マウスの座標位置で全体的に回転を行い、さらにクリックすることで各オブジェクトが座標を変えて形が変わるようにしている。

//obj3D生成
obj3D = new DisplayObject3D();
scene.addChild(obj3D);

↑まずは空の 3D オブジェクトを生成し配置する。

for (var i = 0; i < 27; i++)
{
	var sphere:Sphere = new Sphere(new ColorMaterial(0xFF6600), 15, 12, 10);
	sphereArr.push(sphere);
	obj3D.addChild(sphereArr[i]);
}

↑次に球体のオブジェクトを27個生成して先ほどの obj3D 内に配置する。この時に各オブジェクトの情報を配列 sphereArr に記憶しておく。

private function changeForm(no:uint):void
{
	for (var i = 0; i < sphereArr.length; i++)
	{
		var r:Number = 360 / sphereArr.length * i;
		if (no == 0)
		{
			Tweener.addTween(sphereArr[i], {
				time:0.7,
				delay:0.02 * i,
				x:Math.cos(r * Math.PI / 180) * 300,
				y:0,
				z:Math.sin(r * Math.PI / 180) * 300,
				transition:"easeOutBack"
			});
		}
		：
		：
	}
}

↑あとはステージ上をクリックしたら、changeForm() が処理されるようにする。for 文を使用して、オブジェクトの情報を記憶しておいた sphereArr 配列から指定すればOK

3D でのオブジェクトの形状を座標で指定するのって意外に面倒だね…。いや、面倒というか、計算式をどう記述すれば良いかが分からない、という根本的なものだけど（汗

ホントは球状とかピラミッド型とかやってみたかったんだけども、途中で面倒になって 3 パターンで「もういいや」とかなってしまった…。この辺も勉強しておかないとなー。ハート型とかで並べようとも思って、こことかここを参考にしたんだけども途中で断念。そのうち再チャレンジしよう。

全ソースは下記。

package
{
	import flash.display.*;
	import flash.events.*;
	import flash.geom.*;
	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.*;
	import org.papervision3d.objects.DisplayObject3D;
	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 obj3D:DisplayObject3D;
		private var sphereArr:Array = [];
		private var nowForm:uint = 0;
		/*============================================================
		コンストラクタ
		============================================================*/
		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);
			
			//obj3D生成
			obj3D = new DisplayObject3D();
			scene.addChild(obj3D);
			
			//オブジェクト
			for (var i = 0; i < 27; i++)
			{
				var sphere:Sphere = new Sphere(new ColorMaterial(0xFF6600), 15, 12, 10);
				sphereArr.push(sphere);
				obj3D.addChild(sphereArr[i]);
			}
			
			//形状変化
			changeForm(nowForm);
			
			//イベント
			stage.addEventListener(Event.ENTER_FRAME, onEnterFrame);
			stage.addEventListener(MouseEvent.CLICK, stageClick);
		}
		/*============================================================
		レンダリング
		============================================================*/
		private function onEnterFrame(event:Event):void
		{
			var mousePos:Point = new Point(stage.mouseX, stage.mouseY);//マウスカーソルの位置
			mousePos.offset( -stage.stageWidth / 2, -stage.stageHeight / 2); //ステージの中心にオフセット
			obj3D.rotationX += mousePos.y / 20;
			obj3D.rotationY += mousePos.x / 20;
			renderer.renderScene(scene, camera, viewport);//レンダリング
		}
		/*============================================================
		クリック処理
		============================================================*/
		private function stageClick(event:MouseEvent):void
		{
			nowForm++;
			nowForm = (nowForm >= 3) ? 0 : nowForm;
			changeForm(nowForm);
		}
		/*============================================================
		形状変化
		============================================================*/
		private function changeForm(no:uint):void
		{
			for (var i = 0; i < sphereArr.length; i++)
			{
				var r:Number = 360 / sphereArr.length * i;
				if (no == 0)
				{
					Tweener.addTween(sphereArr[i], {
						time:0.7,
						delay:0.02 * i,
						x:Math.cos(r * Math.PI / 180) * 300,
						y:0,
						z:Math.sin(r * Math.PI / 180) * 300,
						transition:"easeOutBack"
					});
				}
				else if (no == 1)
				{
					Tweener.addTween(sphereArr[i], {
						time:0.7,
						delay:0.02 * i,
						x:Math.cos(r * 3 * Math.PI / 180) * 100,
						y:Math.sin(r * 3 * Math.PI / 180) * 100,
						z:i * 20 - 200,
						transition:"easeOutBack"
					});
				}
				else if (no == 2)
				{
					Tweener.addTween(sphereArr[i], {
						time:0.7,
						delay:0.02 * i,
						x:(Math.floor(i / 3) - Math.floor(i / 9) * 3) * 100 - 100,
						y:i % 3 * 100 - 100,
						z:Math.floor(i / 9) * 100 - 100,
						transition:"easeOutBack"
					});
				}
			}
		}
	}
}

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