Away 3D实现360度全景图的二种全景图.

 

01:触发3D代码运行的Cover.as类

 

package { import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; import flash.filters.BlurFilter; import flash.text.TextField; import flash.text.TextFormat; public class Cover extends Sprite { private var parentMovie:Sprite; private var coverSquare:Sprite; private var coverText:TextField; private var text:String; private var blurredParent:Bitmap; private var stageW:Number; private var stageH:Number; public function Cover(parent:Sprite,w:Number = 465, h:Number = 400, txt:String = null) { parentMovie = parent; stageW = w; stageH = h; text = txt; super(); // Build the "disabled" state coverSquare = new Sprite(); coverSquare.graphics.beginFill(0x000000,0.05); coverSquare.graphics.drawRect(0,0,parentMovie.stage.stageWidth,parentMovie.stage.stageHeight); coverSquare.graphics.endFill(); addChild(coverSquare); // Create explanatory text var format1:TextFormat = new TextFormat(); format1.color = 0x000000; format1.size = 12; format1.align = "center"; format1.font = "_sans"; coverText = new TextField(); if(!text){ coverText.text = "Roll over to view"; } else { coverText.text = text; } coverText.setTextFormat(format1); coverText.width = parentMovie.stage.stageWidth; // Prep for blurred parent blurredParent = new Bitmap(); this.addChild(blurredParent); parentMovie.stage.addEventListener(Event.MOUSE_LEAVE,showCover); parentMovie.stage.addEventListener(MouseEvent.MOUSE_OVER,hideCover); this.addEventListener(Event.ENTER_FRAME,initCover); showCover(); } private function hideCover(e:MouseEvent):void { trace("hideCover "+e.stageX); if(e.stageX < stageW && e.stageX > 0 && e.stageY < stageH && e.stageY > 0){ this.visible = false; } } private function showCover(e:Event = null):void { if(!this.visible){ refresh(); } // Turn on cover this.visible = true; } private function initCover(e:Event):void { this.removeEventListener(Event.ENTER_FRAME,initCover); refresh(); // Turn on cover this.visible = true; } public function refresh():void { var bits:BitmapData = new BitmapData(stageW,stageH); bits.draw(coverSquare); bits.draw(parentMovie); var backgroundImage:Bitmap = new Bitmap(bits); backgroundImage.filters = new Array( new BlurFilter(6,6,4) ); // Copy the blurred text and add the text var textOverlay:BitmapData = new BitmapData(stageW,stageW,false); textOverlay.draw(backgroundImage); textOverlay.draw(coverText,null,null,null,null,true); blurredParent.bitmapData = textOverlay; } } }

 

 

第一种:球形三维模型

 

图片为:

 

package { import away3d.cameras.HoverCamera3D; import away3d.cameras.TargetCamera3D; import away3d.containers.View3D; import away3d.core.base.Object3D; import away3d.events.MouseEvent3D; import away3d.primitives.Cone; import away3d.primitives.Cube; import away3d.primitives.Sphere; import away3d.core.utils.Cast; import away3d.materials.BitmapMaterial; import flash.display.Sprite; import flash.events.Event; import flash.events.KeyboardEvent; import flash.ui.Keyboard; import flash.display.*;//可略 import flash.events.*;//可略 //[SWF(width="500", height="400", frameRate="50", backgroundColor="#FFFFFF")] public class Basic08_sphere extends Sprite { private var cam:HoverCamera3D; private var lastKey:uint; private var keyIsDown:Boolean = false; private var View:View3D; private var cover:Cover; private var sphere:Sphere; private var tex:BitmapMaterial; // var move:Boolean = false; private var lastPanAngle:Number; private var lastTiltAngle:Number; private var lastMouseX:Number; private var lastMouseY:Number; /** * The following 2 lines are how graphics are embedded using Flex. * If you are using the Flash IDE, simply remove the next two * lines of code, import the image to your library and set it to * export with the class name "texture". **/ //[Embed(source="resources/panoramaSpherical.jpg")] //private var texture:Class; public function Basic08_sphere() { // create a "hovering" camera cam = new HoverCamera3D(); cam.z = -1000; // make sure the camera is positioned away from the default 0,0,0 coordinate cam.panangle = 0; cam.tiltangle = 0; //摄像机的,初始水平与倾斜度数 cam.targetpanangle = 0; cam.targettiltangle = 0; //摄像机从初始水平倾斜角度,运动到当前设置的角度(这是一个运动的状态,不是单纯的属性设置) cam.maxtiltangle=60;//设置相机的最大倾斜角度 cam.mintiltangle=-60;//设置相机的最小倾斜角度 不发生破面,根据相机位置距离决定这个值的范围 cam.zoom = 4; // create a viewport View = new View3D({camera:cam,x:250,y:200}); addChild(View); tex=new BitmapMaterial( Cast.bitmap(texture)); // add a huge surrounding sphere so we really can see what we're doing var largeSphere:Sphere = new Sphere({radius:1500,material:tex,segmentsW:14,segmentsH:28}); largeSphere.invertFaces(); largeSphere.bothsides = true;//这一句话是必须的,让模型二面都可见,这时,当摄影机在模型内部时,才能看到贴图内容. View.scene.addChild(largeSphere); // update the view cam.hover(); View.render(); /****************当鼠标在影片剪辑中时影片运行***********************************************************************/ // only run when user is above the SWF cover = new Cover(this,500,400,"Roll over and Click to activate. Use S, W and arrow keys to navigate"); addChild(cover); // listen for key events and run every frame this.stage.addEventListener(KeyboardEvent.KEY_DOWN,onKeyDown1); this.stage.addEventListener(KeyboardEvent.KEY_UP,onKeyUp1); this.addEventListener(Event.ENTER_FRAME,onEnterFrame1); //添加鼠标控制摄像机行为侦听器 stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown1); stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp1); } /****************添加鼠标控制摄像机行为***********************************************************************/ private function onMouseDown1(event:MouseEvent):void { lastPanAngle = cam.targetpanangle; lastTiltAngle = cam.targettiltangle; lastMouseX = stage.mouseX; lastMouseY = stage.mouseY; move = true; trace("mouseDowen "+move); } private function onMouseUp1(event:MouseEvent):void { move = false; //trace("mouseUp "+move); } //主函数 private function updateCamera1(){ // rerender viewport if (move) { trace("go"); //每一次的camera.targetpanangle位置从当前位置开始(lastPanAngle = camera.targetpanangle,MouseDown时,开始计时) cam.targetpanangle = 0.3*(stage.mouseX - lastMouseX) + lastPanAngle; cam.targettiltangle = 0.3*(stage.mouseY - lastMouseY) + lastTiltAngle; cam.hover(); View.render(); } } /***************************************************************************************************************/ /***************************************************************************************************************/ /****键盘控制影片剪辑行为*********************************************************************************/ private function onEnterFrame1(e:Event):void { updateCamera1(); if(!cover.visible) { if(keyIsDown){ // if the key is still pressed, just keep on moving switch(lastKey){ case Keyboard.UP : cam.targettiltangle -= 5; break; case Keyboard.DOWN : cam.targettiltangle += 5; break; case 87 : cam.zoom += 0.3; break; case 83 : if(cam.zoom > 1.4){cam.zoom -= 0.3}; break; case Keyboard.LEFT : cam.targetpanangle -= 5; break; case Keyboard.RIGHT : cam.targetpanangle += 5; break; } } // render the view cam.hover(); View.render(); } } private function onKeyDown1(e:KeyboardEvent):void { lastKey = e.keyCode; keyIsDown = true; } private function onKeyUp1(e:KeyboardEvent):void { keyIsDown = false; } } }

 

 

第二种:3x2立方图模型(skybox6)

 

图片为:

 

package { import away3d.cameras.HoverCamera3D; import away3d.containers.View3D; import away3d.materials.BitmapMaterial; import away3d.primitives.Skybox6; import away3d.primitives.Sphere; import away3d.core.utils.Cast; import flash.display.Bitmap; import flash.display.Sprite; import flash.events.Event; import flash.events.KeyboardEvent; import flash.ui.Keyboard; import flash.events.*;//可略 //[SWF(width="500", height="400", frameRate="50", backgroundColor="#FFFFFF")] public class Basic08_skybox6 extends Sprite { private var cam:HoverCamera3D; private var lastKey:uint; private var keyIsDown:Boolean = false; private var View:View3D; private var cover:Cover; private var largeCube:Skybox6; var move:Boolean = false; private var lastPanAngle:Number; private var lastTiltAngle:Number; private var lastMouseX:Number; private var lastMouseY:Number; /** * The following 2 lines are how graphics are embedded using Flex. * If you are using the Flash IDE, simply remove the next two * lines of code, import the image to your library and set it to * export with the class name "texture". **/ //[Embed(source="resources/panoramaSpherical_out.png")] // private var texture:Class; public function Basic08_skybox6() { // create a "hovering" camera cam = new HoverCamera3D(); cam.panangle = 0; cam.tiltangle = 0; cam.targetpanangle = 0; cam.targettiltangle = 0; cam.mintiltangle = -90; cam.zoom = 4; // create a viewport View = new View3D({camera:cam,x:250,y:200}); addChild(View); // add skybox6 var mat:BitmapMaterial = new BitmapMaterial( Cast.bitmap(texture1) ); largeCube = new Skybox6(mat); largeCube.quarterFaces(); View.scene.addChild(largeCube); // update the view cam.hover(); View.render(); // only run when user is above the SWF cover = new Cover(this,500,400,"Roll over and Click to activate. Use the arrow keys to navigate and S, W to zoom"); addChild(cover); // listen for key events and run every frame this.stage.addEventListener(KeyboardEvent.KEY_DOWN,onKeyDown1); this.stage.addEventListener(KeyboardEvent.KEY_UP,onKeyUp1); this.addEventListener(Event.ENTER_FRAME,onEnterFrame); //添加鼠标控制摄像机行为侦听器 stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown1); stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp1); } /****************添加鼠标控制摄像机行为***********************************************************************/ private function onMouseDown1(event:MouseEvent):void { lastPanAngle = cam.targetpanangle; lastTiltAngle = cam.targettiltangle; lastMouseX = stage.mouseX; lastMouseY = stage.mouseY; move = true; trace("mouseDowen "+move); } private function onMouseUp1(event:MouseEvent):void { move = false; } //主函数 private function updateCamera1(){ // rerender viewport if (move) { trace("go"); //每一次的camera.targetpanangle位置从当前位置开始(lastPanAngle = camera.targetpanangle,MouseDown时,开始计时) cam.targetpanangle = 0.3*(stage.mouseX - lastMouseX) + lastPanAngle; cam.targettiltangle = 0.3*(stage.mouseY - lastMouseY) + lastTiltAngle; cam.hover(); View.render(); } } /***************************************************************************************************************/ /***************************************************************************************************************/ private function onEnterFrame(e:Event):void { updateCamera1(); if(!cover.visible) { if(keyIsDown){ // if the key is still pressed, just keep on moving switch(lastKey){ case Keyboard.UP : cam.targettiltangle -= 5; break; case Keyboard.DOWN : cam.targettiltangle += 5; break; case 87 : cam.zoom += 0.3; break; case 83 : if(cam.zoom > 1.4){cam.zoom -= 0.3}; break; case Keyboard.LEFT : cam.targetpanangle -= 5; break; case Keyboard.RIGHT : cam.targetpanangle += 5; break; } } // render the view cam.hover(); View.render(); } } private function onKeyDown1(e:KeyboardEvent):void { lastKey = e.keyCode; keyIsDown = true; } private function onKeyUp1(e:KeyboardEvent):void { keyIsDown = false; } } }

 

 

第三种:6张分解图合成三维,例示于第二种,便是操作步骤多了点,略.