いそっちノート: Papervision3D2.0: 2008年4月アーカイブ

Papervision3D2.0: 2008年4月アーカイブ

[Papervision3D2.0]#2 GreatWhiteでMouseEventを使うなどしてみる

isocchi

(2008年4月30日 20:09) | 個別ページ | コメント(0) | トラックバック(0) |

今回は、MouseEventについて

１．描画領域全体に対するマウスイベント
２．3Dオブジェクトに対するマウスイベント
の２つを考える。

特に後者はPapervison3Dの1.5から仕様変更があったので、そこのポイントを押さえる。

実際にやってみるのは、
１．画面上でマウスをドラッグするとCubeを回転
２．マウスオーバーすると拡大、マウスアウトすると元に戻す

ソース（myMouseEvent.mxml）

private var myScene:Scene3D;
			private var myCamera:FreeCamera3D;
			private var myViewport:Viewport3D;
			private var myRenderer:BasicRenderEngine;
			private var rootNode:DisplayObject3D;

private var cube:Cube;

private function init():void{
				//ＵＩコンポーネント作成
				var myNestingComponent:UIComponent = new UIComponent();
				addChild(myNestingComponent);
				myViewport = new Viewport3D(420, 260, false, true);
				myNestingComponent.addChild(myViewport);
				setup();

this.addEventListener(Event.ENTER_FRAME, renderLoop);//イベントリスナー登録
				// MouseEvent①
				this.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
				this.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);

}

private function setup():void{

myScene = new Scene3D();				//シーン生成
				myRenderer = new BasicRenderEngine();	//レンダリング専用クラス
				myCamera = new FreeCamera3D;				//カメラオブジェクト生成
				myCamera.zoom = 3;						//カメラズーム
				myCamera.focus = 500;					//カメラフォーカス
				rootNode = new DisplayObject3D("rootNode");	//ルートノード
				myScene.addChild(rootNode);

/* Cubeの作成 */
				// マテリアルの作成
				var frontMaterial:BitmapMaterial = new BitmapFileMaterial("img/ai.jpg")
				var backMaterial:BitmapMaterial = new BitmapFileMaterial("img/fl.jpg")
				var rightMaterial:BitmapMaterial = new BitmapFileMaterial("img/dw.jpg")
				var leftMaterial:BitmapMaterial = new BitmapFileMaterial("img/ps.jpg")
				var topMaterial:BitmapMaterial = new BitmapFileMaterial("img/air.jpg")
				var bottomMaterial:BitmapMaterial = new BitmapFileMaterial("img/ms.jpg")
				frontMaterial.interactive = true;
				backMaterial.interactive = true;
				rightMaterial.interactive = true;
				leftMaterial.interactive = true;
				topMaterial.interactive = true;
				bottomMaterial.interactive = true;
				
				
				var cubeMaterials:MaterialsList = new MaterialsList({
					front: frontMaterial,
					back : backMaterial,
					right: rightMaterial,
					left : leftMaterial,
					top  : topMaterial,
					bottom: bottomMaterial
				});

// オブジェクトの作成
				cube = new Cube(cubeMaterials, 50,50,50);
				cube.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, onMouseOver);
				cube.addEventListener(InteractiveScene3DEvent.OBJECT_OUT, onMouseOut);
				rootNode.addChild(cube);

}

//回転してレンダリング
			private function renderLoop(myEvent:Event):void{
				if(isMouseDown) {
					rootNode.rotationY += (mouseDownX - myViewport.mouseX)/20;
					rootNode.rotationX += (mouseDownY - myViewport.mouseY)/20;
				}
				myRenderer.renderScene(myScene, myCamera, myViewport);
			}

private var isMouseDown:Boolean;
			private var mouseDownX:int;
			private var mouseDownY:int;
			private function onMouseDown(e:Event):void {
				isMouseDown = true;
				mouseDownX = myViewport.mouseX;
				mouseDownY = myViewport.mouseY;
			}

private function onMouseUp(e:Event):void {
				isMouseDown = false;
			}

private function onMouseOver(e:InteractiveScene3DEvent):void {
				cube.scale = 2;
			}

private function onMouseOut(e:InteractiveScene3DEvent):void {
				cube.scale = 1;
			}
		]]>
	</mx:Script>
</mx:Application>

１．画面をドラッグするとCubeを回転
・イベント自体はPapervision3D特有のものでもなんでもなく、フツーのFlexのイベント
なので、thisにaddEventListenerするだけでマウスイベント自体は取れる

・イベントの内容は自体は、マウスが押されているかどうかを保持するisMouseDown:Booleanと、ドラッグした距離に比例して素早く回転させたいのでドラッグの始点となる座標を保持だけ

・実際の回転は、36行目でaddEventListerされたENTER_FLRAMEつまり毎フレーム呼ばれる関数内に書けばいい

２．マウスオーバー・これはPapervision3dのEventで、1.5ではSceneはInteractiveScene3Dを使わなければならなかったり、MovieScene3Dでオブジェクトをその直下に配置しなければならないなどメンドクサイことがいっぱいあったけど、GreateWhiteではScene系のクラスはScene3Dのみになっている。
なので、マウスという2次元の座標に対し、3D次元空間にあるObjectのEventの為に計算を頑張るかは、それぞれのinteractiveというプロパティがtrueになっているかによって決まる。
まず、ViewPort3Dのインスタンスのinteractiveプロパティをtrueにする。コンストラクタでいうと4番目の引数がそれであるので、trueにする。

・次にCubeのオブジェクトにイベントを付けたいので、こいつのMaterialのinteractiveプロパティもtrueにしとく。（何でもかんでもtrueにすると重くなるので、使うやつだけにする）

・最後にaddEventListerして終わり。

以上メモ終わり

[Papervision3D2.0]#1GreatWhiteを使ってみる

isocchi

(2008年4月 9日 23:24) | 個別ページ | コメント(0) | トラックバック(0) |

1.5から仕様変更が起こったので、基本的なPrimitiveObjectを表示するだけのソースを作成。

ポイントをメモ。

ソース（PrimitiveObject.mxml）

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
	creationComplete="init()" width="420" height="260">
	<mx:Script>
		<![CDATA[
			import org.papervision3d.materials.utils.MaterialsList;
			import org.papervision3d.materials.BitmapFileMaterial;
			import org.papervision3d.materials.ColorMaterial;
			import org.papervision3d.objects.primitives.Cone;
			import org.papervision3d.objects.primitives.Cube;
			import org.papervision3d.objects.primitives.Plane;
			import org.papervision3d.objects.DisplayObject3D;
			import org.papervision3d.cameras.FreeCamera3D;
			import mx.core.UIComponent;
			import org.papervision3d.render.BasicRenderEngine;
			import org.papervision3d.view.Viewport3D;
			import org.papervision3d.scenes.Scene3D;
		
			private var myScene:Scene3D;
			private var myCamera:FreeCamera3D;
			private var myViewport:Viewport3D;
			private var myRenderer:BasicRenderEngine;
			private var rootNode:DisplayObject3D;
		
			private var cube:Cube;
		
			private function init():void{
				//ＵＩコンポーネント作成
				var myNestingComponent:UIComponent = new UIComponent();
				addChild(myNestingComponent);
				myViewport = new Viewport3D(420, 260, false, false);
				myNestingComponent.addChild(myViewport);
				setup();
		
				this.addEventListener(Event.ENTER_FRAME, renderLoop);//イベントリスナー登録
		
			}
		
		
			private function setup():void{
			
				myScene = new Scene3D();				//シーン生成
				myRenderer = new BasicRenderEngine();	//レンダリング専用クラス
				myCamera = new FreeCamera3D;				//カメラオブジェクト生成
				myCamera.zoom = 3;						//カメラズーム
				myCamera.focus = 500;					//カメラフォーカス
				rootNode = new DisplayObject3D("rootNode");	//ルートノード
				myScene.addChild(rootNode);
				
				/* Planeの作成 */				
				// マテリアルの作成
				var planeMaterial:BitmapFileMaterial = new BitmapFileMaterial("img/ms.jpg");
				planeMaterial.doubleSided = true;
				planeMaterial.smooth = true;
				
				// オブジェクトの作成
				var plane:Plane = new Plane(planeMaterial, 48, 45, 1, 1);
				rootNode.addChild(plane);
				
				
				
				/* Cubeの作成 */
				// マテリアルの作成
				var cubeMaterials:MaterialsList = new MaterialsList({
					front: new BitmapFileMaterial("img/ai.jpg"),
					back: new BitmapFileMaterial("img/fl.jpg"),
					right: new BitmapFileMaterial("img/dw.jpg"),
					left: new BitmapFileMaterial("img/ps.jpg"),
					top: new BitmapFileMaterial("img/air.jpg"),
					bottom: new BitmapFileMaterial("img/ms.jpg")
				});
				
				// オブジェクトの作成
				cube = new Cube(cubeMaterials, 50,50,50);
				cube.x = 100;
				rootNode.addChild(cube);
				
				
				
				/* Coneの作成 */
				// マテリアルの作成
				var coneMaterial:ColorMaterial = new ColorMaterial(0xcc0000);
				
				// オブジェクトの作成
				var cone:Cone = new Cone(coneMaterial, 50, 50);
				cone.x = -100;
				rootNode.addChild(cone);

}
		
			//回転してレンダリング
			private function renderLoop(myEvent:Event):void{
				myCamera.rotationZ += 5;
				cube.rotationX += 10;
				rootNode.rotationY += 5;
				myRenderer.renderScene(myScene, myCamera, myViewport);
			}
				
		]]>
	</mx:Script>
</mx:Application>

svnソースは、http://papervision3d.googlecode.com/svn/trunk/のbranches/GreatWhite/src/にあるので、ビルドパスに追加

・Viewport3Dには、描画を計算するサイズを指定。mx:applicationと同じにしとけばとりあえず無駄は無い

・カメラはFreeCameraを使うと、カメラを移動させたり回転させたりできる。

・オブジェクトはSceneに直接addChildせずに、rootNodeを作って用途ごとに階層化すれば、rootNodeごと移動とか回転とかできる。

・BitmapFileMaterialで画像のマテリアルを作れる。doubleSidedで裏から見ても描画される

・カメラはFreeCameraを使うと、カメラを移動させたり回転させたりできる。

・Cubeは6面持っているので、MaterialListに1つずつ貼る。別にBitmapFIleMaterial以外のMaterialを使ってもいい。frontや、backとか以外にもallがある。

・ColorMaterialも使ってみた。他にもMovieMaterialやWireframeMaterialなどがある。 Interractive～MaterialやPrecise～Materialは、廃止され、propertyでtrueすればいい

・eventLisnerに追加してあるので、毎フレーム自動的よばれて描画してくれる。とりあえず、回転を3種類の方法でやってみた。

以上メモ終わり

Papervision3D2.0: 2008年4月アーカイブ

[Papervision3D2.0]#2 GreatWhiteでMouseEventを使うなどしてみる

[Papervision3D2.0]#1GreatWhiteを使ってみる

検索

最近のブログ記事

カテゴリ

iKnow