Flash PANORAMA Powered by Papervision3D 2008/10/11 STUDIO Bloom

Background 処理速度の大幅な向上（ActionScript3.0） →公称 10倍、処理によっては100倍近くまで ライブラリの登場 　→Papervision3D…3Dエンジン 　→APE,Box2D…物理エンジン 2008/10/11 STUDIO Bloom

メリット 世界で最も普及したマルチプラットフォーム →1つのコードであらゆる環境で動作する 世界で最も普及したマルチプラットフォーム 　→1つのコードであらゆる環境で動作する ローディングなどでストレスを低減 　→サイズの大きい画像でも読み込みのストレスを与えない 操作に応じたアクションの提供 　→クリックによる情報の提供など 2008/10/11 STUDIO Bloom

デメリット（?） ActionScript3.0の習得の難しさ →ECMAScript第4版をコア言語としたオブジェクト指向言語 2008/10/11 STUDIO Bloom

Papervision3Dについて 3D描画エンジン 左手系 MIT Licence 正式バージョン… 1.5 パブリックベータ… 2.0 Great White ブランチ… 3.0 PapervisionX 奥：Z 横：X 縦：Y 2008/10/11 STUDIO Bloom

制作環境 Flex2 SDK＋Papervision3D Flash CS3＋Papervision3D package { プロパティのドキュメントクラスに任意のクラス名を入力（例：Main） .flaファイルと同じ場所にMain.asを作成・編集を行う Mainというクラスを作成 package { import org.papervision3d.view.BasicView ; public class Main extends BasicView { 2008/10/11 STUDIO Bloom

Papervision3D導入 Ver.1.5とVer.2.0 GreatWhiteであれば http://code.google.com/p/papervision3d/ でZIP圧縮をダウンロード可能 最新版やブランチはSubversionを導入 環境設定のActionScript3.0設定「クラスパス」に PV3Dの「src」ディレクトリまでのパスを設定 2008/10/11 STUDIO Bloom

Papervision3Dのパノラマ実装例 簡単な初期化とカメラの設定 面画像の読み込みと貼り付け 正六面体の作成 ホットスポットの作成 … 2008/10/11 STUDIO Bloom

初期化 GreatWhiteから（？）実装されたBasicView 2008/10/11 STUDIO Bloom import org.papervision3d.scenes.Scene3D ; import org.papervision3d.view.Viewport3D ; import org.papervision3d.render.BasicRenderEngine ; import org.papervision3d.cameras.FreeCamera3D ; public class Main extends Sprite { 　　　　public function Main():void { viewport = new Viewport3D(0, 0, true, true) ; addChild(viewport) ; scene = new Scene3D() ; renderer = new BasicRenderEngine() ; camera = new FreeCamera3D() ; stage.addEventListener( Event.ENTER_FRAME, onFrame ) ; 　　　　} 　　　　function onFrame(event:Event):void { renderer.renderScene(scene, camera, viewport) ; } import org.papervision3d.view.BasicView ; public class Main extends BasicView { 　　　　public function Main():void { super( 　　　　640, 480, 　　　　true, true, 　　　　"FREECAMERA3D“ ) ; startRendering() ; 　　　　} } 2008/10/11 STUDIO Bloom

設定 ■BasicView() ■パラメータ public function BasicView( 　 　viewportWidth:Number = 640, 　 　viewportHeight:Number = 480, 　 　scaleToStage:Boolean = true, 　 　interactive:Boolean = false, 　 　cameraType:String = "CAMERA3D “ 　) ■パラメータ 　viewportWidth:Number (default = 640) — ビューポートの幅 　viewportHeight:Number (default = 480) — ビューポートの高さ   　scaleToStage:Boolean (default = true) — 領域拡大縮小に合わせたオートスケール   　interactive:Boolean (default = false) — インタラクティブ機能を有効にするかどうか   　cameraType:String (default = “CAMERA3D”) — カメラの種類 ※GreatWhiteではcamera_typeの指定が異なる（Debug,Free,Target） 2008/10/11 STUDIO Bloom

カメラの種類 Camera3D 対象に向き続けるカメラ 移動は可能、回転は不可 FreeCamera3D 移動・回転が可能なカメラ FrustumCamera3D 　距離による表示・非表示の機能など高機能カメラ ※バージョンなどによって統合されたり復活したりマチマチな状況のようです 2008/10/11 STUDIO Bloom

カメラの設定 初期値（0,0,0）のままだとLookAt Errorが 発生するので、Z=0.1で回避 （条件に依る） Focusは100程度 　あまり小さいと歪んでしまう Zoomは7程度 　あまり小さいと歪んでしまう 2008/10/11 STUDIO Bloom

面の読み込み 読み込んだ外部画像をMaterialListへ登録 ① ② ③ var loadedBmp:Bitmap = e.target.content as Bitmap ; var bmp:BitmapData = loadedBmp.bitmapData ; // 上面画像は180度回転 if (e.target.loader.name.toString() == 'top') { 　　　　var tmp:BitmapData = new BitmapData(bmp.width, bmp.height, false, 0) ; 　　　　var flipMatrix:Matrix = new Matrix(-1, 0, 0, -1, bmp.width, bmp.height) ; 　　　　tmp.draw(bmp, flipMatrix) ; 　　　　bmp.dispose() ; 　　　　bmp = tmp ; } var material:BitmapMaterial = new BitmapMaterial(bmp) ; materials_list.addMaterial(material, e.target.loader.name.toString()) ; ① ② ③ 面：”top” , “bottom” , “left” , “right” , “front” , “back” 2008/10/11 STUDIO Bloom

正六面体の作成 分割数はある程度多めに（20前後） insideFacesにCube.ALLを指定 ■Cube public function Cube( 　　　　materials:MaterialsList, 　　　　width:Number = 500, 　　　　depth:Number = 500, 　　　　height:Number = 500, 　　　　segmentsS:int = 1, …横方向の分割数 　　　　segmentsT:int = 1, …縦方向の分割数 　　　　segmentsH:int = 1, …奥行き方向の分割数 　　　　insideFaces:int = 0, …内向きの表示面 　　　　excludeFaces:int = 0 …表示しない面 ) 3辺の大きさ 2008/10/11 STUDIO Bloom

とりあえず完成 マウスでの操作ロジックなど 2008/10/11 STUDIO Bloom

ホットスポット 平面（Plane）オブジェクトにテクスチャを貼る 六面体の各面に対して位置を指定する マウスオーバーでカーソルを変更 クリックすると… 2008/10/11 STUDIO Bloom

位置の指定 六面体の各面に貼り付けるテクスチャから ホットスポットの位置（二次元）を決定する 指定面に対応する三次元空間の位置へ V front U 2008/10/11 STUDIO Bloom

テクスチャにMovieClip MovieAssetMaterialでMovieClipを テクスチャに指定できる linkageID:String = “”, …リンケージで入力したクラス名 transparent:Boolean = false, …透明を許可 animated:Boolean = false, …アニメーションを許可 createUnique:Boolean = false, precise:Boolean = false ) 2008/10/11 STUDIO Bloom

マウスイベントに対応させる マウスイベントに対応させるため material.interactive = true ; イベントリスナを登録 　OBJECT_OVER, OBJECT_OUT, OBJECT_CLICK 等 マウスオーバーでカーソルを手の形に 離れた時に元に戻す hotspot.addEventListener( InteractiveScene3DEvent.OBJECT_OVER, function(e:InteractiveScene3DEvent) :void { Sprite(viewport).buttonMode = true; Sprite(viewport).useHandCursor = true; } ); hotspot.addEventListener( InteractiveScene3DEvent.OBJECT_OUT, function(e:InteractiveScene3DEvent) :void { Sprite(viewport).buttonMode = true; Sprite(viewport).useHandCursor = true; } ); 2008/10/11 STUDIO Bloom

Let’s Flash Panorama with Papervision3D！ まとめ 開発途中でパラメータや仕様が変わる 結構パラメータは触ってみないと分からない オペレーション方法など工夫して独自性を ホットスポットに機能付加で夢は広がる 透明FLVに対応すればPIPも。。。 敷居は高いが計り知れない可能性が！！ Let’s Flash Panorama with Papervision3D！ 2008/10/11 STUDIO Bloom