マウスイベント取得とカメラの移動‐Papervision3Dのお勉強(5)‐

※外部ライブラリ学習シリーズの目次はこちらです。
※使用しているPapervision3DのバージョンはPublic Beta 2.0 - Great Whiteです。

今回はマウスイベントの利用とカメラの移動の二つを使って
「マウスが乗っているときには拡大、マウスが乗っていないときには縮小」
するというFlashを制作してみました。
コード上にて今回の要点となる部分をまず記述させていただきます。

マウスイベントの設定

マウスイベント関連でポイントになる箇所はコード上の以下の部分です。

18行目：
import org.papervision3d.events.InteractiveScene3DEvent;

InteractiveScene3DEventというクラスにマウスイベントが定義されていますのでインポートします。

45行目：
viewport = new Viewport3D(550 , 400, false, true);

マウスイベント操作のために四つ目の引数(interactive)をtrueにします。
参考までに、一つ目の引数が横幅(viewportWidth)、二つ目の引数が縦幅(viewportHeight)、三つ目の引数がステージのサイズ変更時にサイズ変更するか(autoScaleToStage)を意味しています。

58行目：
sphere_bfm.interactive = true;

図形に貼り付けた画像(BitmapFileMaterialのインスタンス)のinteractiveをtrueにします。
マウスイベントを許可するためです。

62行目・63行目：
sphere.addEventListener(InteractiveScene3DEvent.OBJECT_OVER , onOver);
sphere.addEventListener(InteractiveScene3DEvent.OBJECT_OUT , onOut);

マウスイベントの定義です。
ここではマウスのOVERとOUTを定義しています。
onOverとonOutがイベント時に呼び出すメソッド名です。

カメラの移動

物体の拡大と縮小を表現するために、物体そのものの大きさを変えることは一つの手です。 しかし、せっかく3Dを扱っているのですから、今回はカメラの移動による拡大と縮小の表現を行ってみます。

カメラ移動関連では以下のメソッドを使用しています。
これらのメソッドはDisplayObject3Dから継承しているものなので、カメラ以外でも使用します。

• moveForward 向き合っているオブジェクトの方向へと指定した距離だけ移動します。
• moveBackward 向き合っているオブジェクトと反対方向へと指定した距離だけ移動します。
• distanceTo
  引数として与えたオブジェクトとの距離を返します。

結果(オブジェクトにマウスカーソルを乗せてみてください)

ソース

/* * 拡大と縮小(カメラ距離変更) * use papervision3d */ package { //必要なクラスのimport import flash.display.Sprite; import org.papervision3d.view.Viewport3D; import org.papervision3d.scenes.Scene3D; import org.papervision3d.cameras.Camera3D; import org.papervision3d.render.BasicRenderEngine; import org.papervision3d.objects.primitives.Sphere; import flash.events.Event; import org.papervision3d.materials.BitmapFileMaterial; import org.papervision3d.events.InteractiveScene3DEvent; public class Sample06 extends Sprite { //Spriteクラス継承 public var viewport:Viewport3D; public var scene:Scene3D; public var camera:Camera3D; public var renderer:BasicRenderEngine; public var sphere:Sphere; public var sphere_bfm:BitmapFileMaterial;//貼り付け画像 public var yaw_num:Number = 5.0;//回転度数 public var move_num:Number = 20.0;//移動距離 public var min_num:Number = 200.0;//最短距離 public var max_num:Number = 3000.0;//最長距離 public var over_boo:Boolean = false;//マウスが乗っているかどうかの判定 //コンストラクタ public function Sample06() { init();//初期化関数開始 } //初期化関数 public function init(){ //マウスイベントを受け取るために四つ目の引数(interactive)をtrueにすること viewport = new Viewport3D(550 , 400 , false , true); addChild(viewport);//viewportを表示ツリーに追加 renderer = new BasicRenderEngine(); scene = new Scene3D(); camera = new Camera3D(); //BitmapFileMaterialには画像URLを引数として渡す sphere_bfm = new BitmapFileMaterial("http://www.aoharu-b.com/cgi/sk/img/study_p3d/papervision3d03back.jpg"); //マウスイベント送信を許可するため sphere_bfm.interactive = true; sphere = new Sphere(sphere_bfm); sphere.addEventListener(InteractiveScene3DEvent.OBJECT_OVER , onOver);//OVERイベント定義 sphere.addEventListener(InteractiveScene3DEvent.OBJECT_OUT , onOut);//OUTイベント定義 this.buttonMode = true;//ボタンカーソル形状変更 scene.addChild(sphere); addEventListener(Event.ENTER_FRAME , onEnterFrame);//ENTER_FRAMEイベント定義 } //ENTER_FRAME時関数 public function onEnterFrame(event:Event):void { sphere.yaw(yaw_num);//回転軸に沿って回転 //over_booの値によってカメラを前方あるいは後方へ移動させる if(over_boo != false){ //カメラを前方へ移動 //if文は最短距離以上に近づかないようにするため if(camera.distanceTo(sphere) > min_num + move_num)camera.moveForward(move_num); else camera.moveForward(camera.distanceTo(sphere) - min_num); } else{ //カメラを後方へ移動 //if文は最長距離以上に遠ざからないようにするため if(camera.distanceTo(sphere) < max_num - move_num)camera.moveBackward(move_num); else camera.moveBackward(max_num - camera.distanceTo(sphere)); } renderer.renderScene(scene, camera, viewport);//描画 } //OVER時関数 public function onOver(event:InteractiveScene3DEvent):void { over_boo = true; } //OUT時関数 public function onOut(event:InteractiveScene3DEvent):void { over_boo = false; } } }

ソースのダウンロードはこちらからどうぞ(flaファイルはasファイルをドキュメントクラス指定しているだけです)。

次回は一つの物体の複数角度からの同時表示について学習する予定です。

同時に複数方向からの表示‐Papervision3Dのお勉強(6)‐へ。
マウス位置に合わせての画像回転‐Papervision3Dのお勉強(4)‐へ。