[papervision3d]*Step1*マウスイベント等を付けたりしてみる。 [Edit]


むらけんです。
前回はpapervision3dを利用した、シンプルなサンプルをご紹介しましたが、今回はもう少し立ち入ってみましょう。


左のボタンや、表示内のオブジェクトをクリックしてみてください。
そうすると、目が回ります。(違 001| import caurina.transitions.Tweener;
002| import org.papervision3d.core.proto.*;
003| import org.papervision3d.scenes.*;
004| import org.papervision3d.cameras.*;
005| import org.papervision3d.objects.*;
006| import org.papervision3d.materials.*;
007| // _______________________________________________________________________
008| //                                                                    vars
009| var container : Sprite;
010| var scene     : MovieScene3D;
011| var camera    : FreeCamera3D;
012| var cloudSize :Number = 1000;
013| var objArr:Array=new Array();
014| // _______________________________________________________________________
015| //                                                             Constructor
016| ptest();
017| function ptest():void{
018|     stage.frameRate = 60;
019|     stage.quality   = "MEDIUM";
020|     stage.scaleMode = "noScale";
021|     stage.align = StageAlign.TOP_LEFT;
022|     this.addEventListener(Event.ENTER_FRAME, _enterframe);
023|     this.stage.addEventListener(Event.RESIZE, onStageResize);
024|     init();
025| }
026| // _______________________________________________________________________
027| //                                                                    Init
028| function init():void{
029|     var material:MovieMaterial;
030|     var _myclass:test;
031|     var gotoData:Object;
032|     var planeObj:Plane;
033|     var objcontainer:Sprite;
034|     
035|     //コンテナ生成
036|     container = new Sprite();
037|     addChild(container);
038|     container.x = this.stage.stageWidth  / 2;
039|     container.y = this.stage.stageHeight / 2;
040|     //シーン生成
041|     scene = new MovieScene3D( container );
042|     //カメラ設定
043|     camera=new FreeCamera3D(1,1000);
044|     //star生成
045|     starObj = scene.addChild( new Stars( new ColorMaterial(0xffffff), container ,900,2048,2048) );
046|     for(var i:Number=0;i<20;i++){
047|         _myclass = new test();
048|         _myclass.dTxt.text=i;
049|         material = new MovieMaterial( _myclass, true, {
050|                         doubleSided    :true,
051|                         smooth        :true
052|                         } );
053|         gotoData = new Object();
054|         gotoData.x = Math.random() * cloudSize - cloudSize/2;
055|         gotoData.y = Math.random() * cloudSize - cloudSize/2;
056|         gotoData.z = Math.random() * cloudSize - cloudSize/2;
057|         gotoData.rotationX = Math.random() * 360;
058|         gotoData.rotationY = Math.random() * 360;
059|         gotoData.rotationZ = Math.random() * 360;
060|         planeObj = new Plane(material,180,180,2,2,gotoData);
061|         scene.addChild(planeObj);
062|         objcontainer = planeObj.container;
063|         objcontainer.name="obj"+String(i);
064|         objcontainer.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
065|         objArr.push(planeObj);
066|     }
067|     btnSet();
068| }
069| 
070| // _______________________________________________________________________
071| //                                                                   Event
072| function _enterframe( event:Event ):void{
073|     this.scene.renderCamera( camera );
074| }
075| // _______________________________________________________________________
076| //                                                              mouseEvent
077| function mouseDown(event:MouseEvent):void{
078|     var name:String=event.currentTarget.name;
079|     var _plane:Plane;
080|     if(name.charAt(0)=="b")_plane=objArr[ event.currentTarget.index ];
081|     else _plane=objArr[ Number(name.substr(3)) ];
082|     var target :DisplayObject3D = new DisplayObject3D();
083|     target.copyTransform( _plane );
084|     target.moveBackward( 100 );
085|     Tweener.addTween( camera, {
086|                 zoom        :1,
087|                 x            :target.x,
088|                 y            :target.y,
089|                 z            :target.z,
090|                 rotationX    :_plane.rotationX,
091|                 rotationY    :_plane.rotationY,
092|                 rotationZ    :_plane.rotationZ,
093|                 time        :2,
094|                 transition    :"easeOutExpo"
095|                 } );
096| }
097| // _______________________________________________________________________
098| //                                                           buttonSetting
099| function btnSet():void{
100|     var _btn:btn;
101|     for(var i:Number=0;i<20;i++){
102|         _btn=new btn();
103|         this.addChild(_btn);
104|         _btn.name="btn"+i;
105|         _btn.y=i*15;
106|         _btn.txt.text="3dObject"+i;
107|         _btn.index=i;
108|         _btn.alpha=0.7
109|         _btn.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
110|         _btn.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
111|         _btn.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
112|     }
113| }
114| function btnOut(event:MouseEvent):void{
115|     var _btn:MovieClip=event.currentTarget;
116|     _btn.alpha=0.7;
117| }
118| function btnOver(event:MouseEvent):void{
119|     var _btn:MovieClip=event.currentTarget;
120|     _btn.alpha=1;
121| }
122| // _______________________________________________________________________
123| //                                                           onStageResize
124| function onStageResize(event:Event):void{
125|     this.container.x = this.stage.stageWidth  / 2;
126|     this.container.y = this.stage.stageHeight / 2;
127| }
128| 
ポイントはDisplayObject3Dのcontainer:Spriteにマウスイベントを設定する部分です。
しかし、DisplayObject3Dを入れ子にした場合子供のcontainerは何故か使用できないようです。推測になってしまいますが、描画自体はMovieScene3Dに直接addChildしたDisplayObject3Dしかしなくて、それ以下の物については親での描画位置を計算するにとどまるのではないかと思います。(実態はない) 入れ子にした子供にイベントを付けたい場合はalpha0のdummyObjectを用意して、入れ子の位置を計算で出して、MovieScene3Dに直接addChildするしかなさそうです。(他にスマートな方法をご存知の方いらっしゃいましたら是非教えてください。)

コンパイルにはFlash9 Public Alpha及び papervision3dとTweenerのクラスライブラリが必要です。
ソースはこちら

▽免責事項▽
 このサンプルを使用した場合、または使用できなかった等のいかなる損害も、
 制作者 むらけん 及び F-site は、その責を負いません。
 ご自身の責任においてご使用ください。

コメント

この記事にコメントを書く

記事に対するテクニカルな質問はご遠慮ください(利用規約)。

トラックバック

この記事へのトラックバック

  1. Papervision3D でマウスイベント(2007年05月30日 21:29)

    今回は 3D オブジェクトにマウスイベントを付加する話です。 何を今さら、な空気が漂いまくりの今日のネタ。 なにしろ、...
    from 閃光的網站・弛緩複合体 -Review Division-

その他の記事