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

今回は、MouseEventについて

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

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

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









ソース（myMouseEvent.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.BitmapMaterial; import flash.events.MouseEvent; import flash.events.Event; import org.papervision3d.events.InteractiveScene3DEvent; import org.papervision3d.materials.utils.MaterialsList; import org.papervision3d.materials.BitmapFileMaterial; import org.papervision3d.objects.primitives.Cube; 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, 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するだけでマウスイベント自体は取れる

// MouseEvent① this.addEventListener(MouseEvent.MOUSE_UP, onMouseUp); this.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);

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

・実際の回転は、36行目でaddEventListerされたENTER_FLRAMEつまり毎フレーム呼ばれる関数内に書けばいい
if(isMouseDown) { rootNode.rotationY += (mouseDownX - myViewport.mouseX)/20; rootNode.rotationX += (mouseDownY - myViewport.mouseY)/20; }


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

myViewport = new Viewport3D(420, 260, false, true);

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

・最後にaddEventListerして終わり。
cube.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, onMouseOver); cube.addEventListener(InteractiveScene3DEvent.OBJECT_OUT, onMouseOut);


以上メモ終わり