papervision3D 2.X EX.04 Planeにクリックしたら動くようにしてみる - [k]id東京都世田谷区　ホームページ制作　[k]id

前回に続きまして、せっかくオブジェクトを描画できたので、せっかくなので
クリックしたら動くようにしてみたいと思います。

結構これがややこしくて追加する項目が結構あります。
具体的には
インポートではクリックによるインタラクティブな動作を有効にするための
InteractiveScene3DEventのクラスをインポート

//クリックイベントを有効
import org.papervision3d.events.InteractiveScene3DEvent;

そんで
クリックする場所を決めるため（AS2.0の時のMuvieClipみたいなものかな）
マテリアルに対して「ここを押したら動いてください」的な感じで

//マテリアルに対してクリックイベントを有効にするためにinteractiveをtrueに
pMat.interactive=true;

それでクリックしたらどう動くかをfunctionで定義

private function onClickHandler(e:Event) {
	//まずplaneAを親から引き継ぎ
	var planeA:Plane=Plane(e.target);
	//クリックされたらランダムに移動してくださいな
	planeA.x = Math.random() * 200-100;
}

ここではじめてイベントを記述できるわけで

//クリックイベントを追加
planeA.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, onClickHandler);

って感じで各部位に追加する要素を追加すると
以下のように（赤い面を）クリックするとオブジェクトが
ランダムに動くクリックイベントを指定できるわけです。

[embedSWF]http://kidokorock.com/wp-content/uploads/2009/05/plane_move1.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;
	

	[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);
			planeA.x = Math.random() * 200-100;
			
		}
	}
}