PaperVision3DでFlexのUIComponentを回す その2

ソース見る機能がうまく動いていなかったので、修正して載せておきました。
http://hatena.souko105.net/20080319/RotateFlex2StyleExplorer.html#

PV3Dの基本

PaperVisionで抑えておくべきクラスは、だいたい
・SceneObject3D
・MaterialObject3D
・DisplayObject3D
・Camera3D
の4つです。

SceneObject3D

SceneObject3Dは、PV3Dの画面を構成する土台クラスです、このSceneObject3Dに対してDisplayObject3Dを
addChildすることで、そのDisplayObject3Dを画面に表示することができます。
今回のサンプルでは、InteractiveScene3Dというクラスを利用しています。このクラスは、通常のSceneObject3Dに加えて、
そこで発生したイベントを内部のDisplayObject3Dに対してdispatchする機能があるようです。
(実際のdispatch処理は、InteractiveSceneManagerが行っています。)

MaterialObject3D

MaterialObject3Dは、DisplayObject3Dを構成する素材を提供するクラスです。
素材とは、色、jpeg画像、Videoなどです。
表示したい素材は、基本的にその素材にあったMaterialObject3Dの中に入れます。

DisplayObject3D

DisplayObject3Dは、実際にSceneに表示する物の形を定義するクラスです。
このクラスの派生クラスには、Plane、Cube、Sphereなどがあり、それぞれ平面、四角、球体
の形をしています。
このクラスにMaterialObject3Dを渡すことで、「四角いビデオ画像」や「丸い写真」といった物体を構築できます。
このクラスはインスタンス化した後に、SceneObject3Dに対してaddChildします。

Camera3D

Camera3Dは、SceneObject3Dを「どこから見た表示にするか」を決めるクラスです。
このクラスには、x、y、z、zoom、focusといったプロパティがあり、これらを変化させることで
画面が変化します。
たとえばzoomを少しづつ変化させることで、SceneObject3Dの中のものが近づいてくるような
見た目になります。

UIComponentを使いたい場合

まずは、SceneObject3Dが描画対象とするSpriteを表示する必要があります。
Spriteは、ApplicationにaddChildすると、コンパイルエラーにはならないけど実行時にエラーになります。
そのため、一旦UIComponentに入れて、そのUIComponentをApplicationにaddChildする必要があります。


今回は、PaperVision3DをUIComponent上で動作させるために、「Canvas3D」というクラスを使用しています。
このクラスは、PaperVision3DのFlexFocusというサンプルについているクラスで、SpriteをApplication上に表示する
ためのクラスです。


Canvas3Dは、生成時に2つのSpriteを自身にaddChildします。1つは背景色を描画する用(backgroundSprite)で、
もうひとつはPaperVisionのオブジェクトをaddするためのもの(paperSprite)です。
従って、
Application
 |-Canvas3D
  |-Sprite(backgroundSprite)
  |-Sprite(paperSprite)
の階層でアプリが構築されます。


Canvas3DをApplicationにaddした後は、「InteractiveScene3D」というクラスをインスタンス化します。
これはSceneObject3Dの派生クラスです。
通常のScene機能に加えて、中に入っているオブジェクトに対してマウスのイベントを通知するという機能を
備えています。
次に、3D化したいUIComponentを引数にして、InteractiveMovieMaterialをいうクラスをインスタンス化します。
最後に、InteractiveMovieMaterialを引数にPlaneをインスタンス化して、Sceneにaddします。
一通り処理が終わったら、Camera3Dを引数にしてSceneのrenderCameraメソッドを呼びます。
この呼び出しを行うと、画面にオブジェクトが表示されます。

UIComponentが表示される仕組み

サンプルでは、visibleをfalseにしたFlex2StyleExplorerをApplicationに貼り付け、そのidをInteractiveMovieMaterialに
渡しています。
PaperVision3DにはUIComponetを管理する能力はないため、InteractiveMovieMaterialは渡されたUIComponentのハードコピーを作成します。
(UIComponentと同じ大きさのBitmapData)
そして、実際の表示はそのBitmapDataを使って行います。
つまり、実際に表示されているのは、どこかでインスタンス化されたUIComponentの写像というわけです。

イベントの通知

写像なので、本来はその上に載っているボタンやプルダウンのイベントは発生しないのですが、そこでInteractiveScene3Dが
がんばってくれます。


画面表示後、マウスでFlexStyleExplorerをクリックすると、はじめにそのクリックイベントをInteractiveScene3D(の中のinteractiveSceneManager)
が受け、クリックされたイベントを元に実際にどのUIComponentが押されたかを割り出して、そのUIComponentに対してVirtualMouseMouseEvent
という仮想イベントを投げます(細かく見てないですが、大体そんな感じ)
その偽のイベントを受け本物のUIComponentが動作し、その写像が3D上に表示されるため、あたかも3D上のオブジェクトが動いたかのように
見える、という仕組みです。


このような仕組みのため、ボタンなどはほぼ完璧に動きますが、プルダウンやカラーピッカーなどはうまく動きません。
ただ、それを差し引いてもUIComponentが3Dで動くのは結構面白いので、やってみる価値はあるかなと思います。