Flash PANORAMA Powered by Papervision3D

Presentation on theme: "Flash PANORAMA Powered by Papervision3D"— Presentation transcript:

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

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

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

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

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

6 制作環境 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

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

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

9 初期化 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

10 設定 ■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

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

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

13 面の読み込み 読み込んだ外部画像を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

14 正六面体の作成 分割数はある程度多めに（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

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

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

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

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

19 マウスイベントに対応させる マウスイベントに対応させるため 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

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