papervision3D 2.X EX.05 Planeにクリックしたら「ニュル」っと滑らかに動かすTweener | 東京都世田谷区 ホームページ制作 [k]id

papervision3D 2.X EX.05 Planeにクリックしたら「ニュル」っと滑らかに動かすTweener

Category Flash Tips,Papervision3Dを試す Update 2009.05.07

twitterfacebookgoogle+はてなブックマークPocketであとで読むfeedlyで購読

前回の「クリックしたら移動」を滑らかに動かしてみたいと思います

今回滑らか動作を実現する為に使用するのはTweener
数多くの方がTweenerに関しては説明をされているので、今回はさらっと、、、、

このTweenerはAS3などでモーションなどを滑らかにするために使用できるLibで
たとえばpapervision3Dでは

Tweener.addTween(対象, {x:X軸の場所, y:Y軸の場所, z:Z軸の場所, time:時間で動かすか});

みたいな感じで「ニュル」っと感を実装できるLibです。

さて、では具体的には
Tweenerでtweener_1_31_74_as3.zipをダウンロードし(09.05.03現在)PV3DのLibraryを格納している[org]フォルダと同じとこに[caurina]を配置で準備完了!
(難しい事は考えないようにしましょう)

それで
前回のファイルに追加する項目はimportにとりあえず先程のクラスを追加

import caurina.transitions.Tweener;

さらに
クリックしたときのイベント

planeA.x = Math.random() * 200-100;

Tweener.addTween(planeA, {x:Math.random() * 200-100, y:planeA.y, z:planeA.z, time:1});

に変更するだけ

[embedSWF]http://kidokorock.com/wp-content/uploads/2009/05/plane_move2.swf[/embedSWF]
サンプル

ソースは↓です。

package {
	import flash.display.Sprite;
	import flash.events.Event;



	//------------------------------------------------------------
	//                                             クラス読み込み
	import org.papervision3d.core.geom.Lines3D;
	import org.papervision3d.core.geom.renderables.Line3D;
	import org.papervision3d.core.geom.renderables.Vertex3D;
	import org.papervision3d.materials.special.LineMaterial;

	import org.papervision3d.cameras.Camera3D;
	import org.papervision3d.objects.DisplayObject3D;
	import org.papervision3d.render.BasicRenderEngine;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.view.Viewport3D;

	//Plane オブジェクトのクラスを追加
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.materials.special.CompositeMaterial;
	import org.papervision3d.materials.WireframeMaterial;
	import org.papervision3d.materials.ColorMaterial;
	
	//クリックイベントを有効
	import org.papervision3d.events.InteractiveScene3DEvent;
	import caurina.transitions.Tweener;

	[SWF(backgroundColor="#ffffff")];

	public class Main extends Sprite {
		//------------------------------------------------------------
		//                                                    変数定義
		private var lines3D:Lines3D;
		private var viewport:Viewport3D;
		private var scene:Scene3D;
		private var camera:Camera3D;
		private var renderer:BasicRenderEngine;
		private var rootNode:DisplayObject3D;

		public function Main() {
			//------------------------------------------------------------
			//                                         カメラ視点等の定義
			viewport=new Viewport3D(0,0,true,true);
			scene=new Scene3D  ;
			camera=new Camera3D  ;
			renderer=new BasicRenderEngine  ;
			rootNode=scene.addChild(new DisplayObject3D("rootNode"));
			//
			addChild(viewport);
			camera.zoom=1;
			camera.focus=1000;
			camera.x=200;
			camera.y=200;
			camera.target=DisplayObject3D.ZERO;
			//------------------------------------------------------------
			//                              ラインを投影するための変数定義
			//[X座標の線]
			var X_line:Line3D;
			var X_strV:Vertex3D;
			var X_endV:Vertex3D;
			var X_lineM:LineMaterial=new LineMaterial(0xFF0000,0.2);
			//[Y座標の線]
			var Y_line:Line3D;
			var Y_strV:Vertex3D;
			var Y_endV:Vertex3D;
			var Y_lineM:LineMaterial=new LineMaterial(0x00FF00,0.2);
			//[Z座標の線]
			var Z_line:Line3D;
			var Z_strV:Vertex3D;
			var Z_endV:Vertex3D;
			var Z_lineM:LineMaterial=new LineMaterial(0x0000FF,0.2);
			//
			lines3D=new Lines3D  ;
			scene.addChild(lines3D);
			//
			//------------------------------------------------------------
			//                                                   X座標の線
			X_strV=new Vertex3D(-1000,0,0);
			X_endV=new Vertex3D(1000,0,0);
			X_line=new Line3D(lines3D,X_lineM,2,X_strV,X_endV);
			lines3D.addLine(X_line);
			//------------------------------------------------------------
			//                                                   Y座標の線
			Y_strV=new Vertex3D(0,-1000,0);
			Y_endV=new Vertex3D(0,1000,0);
			Y_line=new Line3D(lines3D,Y_lineM,2,Y_strV,Y_endV);
			lines3D.addLine(Y_line);
			//------------------------------------------------------------
			//                                                   Z座標の線
			Z_strV=new Vertex3D(0,0,-1000);
			Z_endV=new Vertex3D(0,0,1000);
			Z_line=new Line3D(lines3D,Z_lineM,2,Z_strV,Z_endV);
			lines3D.addLine(Z_line);

			//------------------------------------------------------------
			//                                    Plane オブジェクトを追加

			//↓pMatというマテリアルを定義(マテリアルはテクスチャみたいなもんかな)
			var pMat:CompositeMaterial = new CompositeMaterial();
			//↓pMatにワイヤーフレームの要素を追加
			pMat.addMaterial(new WireframeMaterial(0x000000));
			//↓pMatに色の要素を追加
			pMat.addMaterial(new ColorMaterial(0xff0000));
			//↓pMatに裏面に色をつける
			pMat.doubleSided = true;
			
			//マテリアルに対してクリックイベントを有効にするためにinteractiveをtrueに
			pMat.interactive=true;
			
			//↓新たにplaneBという名前でplaneを定義して
			new Plane(pMat, 100, 100, 6, 6);
			//new Plane(マテリアルを設定 , 縦 , 横 , 横の分解数, 縦の分解数)
			//という感じでPlaneを設定
			var planeA:Plane = new Plane(pMat, 100, 100, 6, 6);
			//ここでlines3Dに追加する
			lines3D.addChild(planeA);
			
			
			//クリックイベントを追加
			planeA.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, onClickHandler);
			
			addEventListener(Event.ENTER_FRAME,onFrame);

		}

		public function onFrame(e:Event):void {
			//------------------------------------------------------------
			//                               マウスの座標でZ軸を基点に回転
			lines3D.yaw((mouseX - (stage.stageWidth / 2)) / (stage.width / 2) * 5);
			renderer.renderScene(scene,camera,viewport);
		}
		private function onClickHandler(e:Event) {
			var planeA:Plane=Plane(e.target);
			Tweener.addTween(planeA, {x:Math.random() * 200-100, y:planeA.y, z:planeA.z, time:1});
		}
	}
}

ページトップへ