用PV3D在Flex中实现全景360

阅读更多

PV3D采用的是左手坐标系，默认的X正向指向屏幕右侧，Y正向指向屏幕上方，Z正向垂直屏幕向内，下图左侧为左手坐标系，用户默认的观察视角是沿着Z轴的负半轴方向。

将实景360场景封装为一个类，代码如下：
[java] view plaincopy
package 
{ 
    import flash.display.Sprite; 
    import flash.events.Event; 
    import flash.events.MouseEvent; 
     
    import mx.controls.Alert; 
     
    import org.papervision3d.cameras.Camera3D; 
    import org.papervision3d.materials.BitmapFileMaterial; 
    import org.papervision3d.materials.utils.BitmapMaterialTools; 
    import org.papervision3d.objects.primitives.Cylinder; 
    import org.papervision3d.objects.primitives.Sphere; 
    import org.papervision3d.render.BasicRenderEngine; 
    import org.papervision3d.scenes.Scene3D; 
    import org.papervision3d.view.Viewport3D; 
     
     
    public class MyPV3D extends Sprite 
    { 
        private var sphere:Sphere; 
        private var myMouseDown:Boolean = false; 
        private var viewport:Viewport3D; 
        private var scene:Scene3D; 
        private var camera:Camera3D; 
        private var render:BasicRenderEngine; 
         
        private var bMouseMove:Boolean = false; 
        private var OldMouseX:Number = -1; 
        private var OldMouseY:Number = -1; 
         
        public function MyPV3D(str:String) 
        { 
            super(); 
            init(str); 
        }            
         
        private function init(str:String):void 
        { 
            initObj(str); 
             
            //注册帧频侦听用于不断刷新屏幕,每出现一帧就触发该事件 
            addEventListener(Event.ENTER_FRAME,onEnterFrame); 
             
            addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown); 
            addEventListener(MouseEvent.MOUSE_UP, onMouseUp); 
            //addEventListener(MouseEvent.ROLL_OVER, onMouseUp);             
            addEventListener(MouseEvent.MOUSE_MOVE,onMouseMove); 
            addEventListener(MouseEvent.MOUSE_WHEEL,onMouseWheel); 
        } 
         
        private function initObj(str:String):void 
        { 
            viewport=new Viewport3D(700,500); 
            addChild(viewport); 
            scene = new Scene3D(); 
            camera = new Camera3D(); 
            render=new BasicRenderEngine(); 
             
             
            var material:BitmapFileMaterial=new BitmapFileMaterial(str);   
             
            //PV3D默认情况下不显示背面，doubleSided属性应设为true 
            material.doubleSided = true; 
            material.opposite = false; 
            material.smooth = true; 
             
            //实例化球体  
            sphere=new Sphere(material,200,50,50); 
            sphere.scaleX = sphere.scaleX*(-1); 
            scene.addChild(sphere); 
             
            //把摄像机移到中心位置，PV3D摄像机的默认位置是camera.z=-1000 
            camera.z=0; 
            //摄象机的缩放参数， 
            camera.zoom=.8; 
            //摄象机的焦距 
            camera.focus=300; 
            render.renderScene(scene, camera, viewport); 
            //this.useHandCursor = true;显示为手型 
            //this.buttonMode = true; 
        } 
         
        private function onEnterFrame(e:Event):void 
        {    
            render.renderScene(scene, camera, viewport); 
        } 
         
        private function onMouseDown(event:MouseEvent):void 
        { 
            myMouseDown = true; 
            this.OldMouseX = this.mouseX; 
            this.OldMouseY = this.mouseY; 
             
        } 
         
         
        private function onMouseUp(event:MouseEvent):void 
        { 
            myMouseDown = false; 
            this.OldMouseX = -1; 
            this.OldMouseY = -1; 
        } 
         
        private function onMouseMove(event:MouseEvent):void 
        { 
            if(myMouseDown) 
            {                
                if(this.OldMouseX < 0 || this.OldMouseY < 0 ) 
                { 
                    this.OldMouseX = this.mouseX; 
                    this.OldMouseY = this.mouseY; 
                } 
                else 
                { 
                    var DeltaX:Number = this.mouseX - this.OldMouseX; 
                    var DeltaY:Number = this.mouseY - this.OldMouseY; 
                    camera.rotationY += DeltaX*0.5; 
                    camera.rotationX += DeltaY*0.5; 
                     
                    if (camera.rotationX <= -90) 
                    { 
                        camera.rotationX = -90; 
                    } 
                    else if (camera.rotationX >= 90) 
                    { 
                        camera.rotationX = 90; 
                    } 
                    render.renderScene(scene, camera, viewport); 
                    this.OldMouseX = this.mouseX; 
                    this.OldMouseY = this.mouseY; 
                }                
            } 
        } 
         
        private function onMouseWheel(event:MouseEvent):void 
        { 
            if(event.delta > 0) 
            { 
                if(camera.zoom > 0.6) 
                { 
                    camera.zoom *= 0.95; 
                } 
            } 
            else if(event.delta < 0) 
            { 
                camera.zoom *= 1.05; 
            } 
        } 
         
    } 
} 
然后在一个Flex程序中使用该全景类，如下图所示:
[java] view plaincopy
 
               xmlns:s="library://ns.adobe.com/flex/spark"  
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" 
               creationComplete="App_creationCompleteHandler(event)" > 
     
                    import mx.core.UIComponent; 
            import mx.events.FlexEvent; 
             
            protected function App_creationCompleteHandler(event:FlexEvent):void 
            { 
                // TODO Auto-generated method stub 
                this.CreatePV3D(); 
                 
            } 
             
            private function CreatePV3D():void 
            { 
                var Path:String = "../Images/pv3d.jpg"; 
                var iPV3D:MyPV3D = new MyPV3D(Path); 
                var iUI:UIComponent = new UIComponent(); 
                iUI.addChild(iPV3D); 
                iCanvas.addChild(iUI); 
            } 
             
        ]]>