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

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

 

[c-sharp]  view plain copy

1. package  
2. {  
3.     import flash.display.Bitmap;  
4.     import flash.display.BitmapData;  
5.     import flash.display.Sprite;  
6.     import flash.events.Event;  
7.     import flash.events.MouseEvent;  
8.     import flash.filters.BlurFilter;  
9.     import flash.text.TextField;  
10.     import flash.text.TextFormat;  
11.       
12.     public class Cover extends Sprite  
13.     {  
14.         private var parentMovie:Sprite;  
15.         private var coverSquare:Sprite;  
16.         private var coverText:TextField;  
17.         private var text:String;  
18.         private var blurredParent:Bitmap;  
19.           
20.         private var stageW:Number;   
21.         private var stageH:Number;  
22.           
23.         public function Cover(parent:Sprite,w:Number = 465, h:Number = 400, txt:String = null)  
24.         {  
25.             parentMovie = parent;  
26.             stageW = w;  
27.             stageH = h;  
28.             text = txt;  
29.             super();  
30.             // Build the "disabled" state  
31.             coverSquare = new Sprite();  
32.             coverSquare.graphics.beginFill(0x000000,0.05);  
33.             coverSquare.graphics.drawRect(0,0,parentMovie.stage.stageWidth,parentMovie.stage.stageHeight);  
34.             coverSquare.graphics.endFill();  
35.             addChild(coverSquare);  
36.               
37.             // Create explanatory text  
38.             var format1:TextFormat = new TextFormat();  
39.             format1.color = 0x000000;  
40.             format1.size = 12;  
41.             format1.align = "center";  
42.             format1.font = "_sans";  
43.             coverText = new TextField();  
44.             if(!text){  
45.                 coverText.text = "Roll over to view";  
46.             } else {  
47.                 coverText.text = text;  
48.             }  
49.             coverText.setTextFormat(format1);  
50.             coverText.width = parentMovie.stage.stageWidth;  
51.               
52.             // Prep for blurred parent  
53.             blurredParent = new Bitmap();  
54.             this.addChild(blurredParent);  
55.             parentMovie.stage.addEventListener(Event.MOUSE_LEAVE,showCover);  
56.             parentMovie.stage.addEventListener(MouseEvent.MOUSE_OVER,hideCover);  
57.             this.addEventListener(Event.ENTER_FRAME,initCover);  
58.             showCover();  
59.         }  
60.         private function hideCover(e:MouseEvent):void  
61.         {  
62.             trace("hideCover "+e.stageX);  
63.             if(e.stageX < stageW && e.stageX > 0 && e.stageY < stageH && e.stageY > 0){  
64.                 this.visible = false;  
65.             }  
66.         }  
67.         private function showCover(e:Event = null):void  
68.         {  
69.             if(!this.visible){  
70.                 refresh();  
71.             }  
72.             // Turn on cover  
73.             this.visible = true;      
74.         }  
75.         private function initCover(e:Event):void  
76.         {  
77.             this.removeEventListener(Event.ENTER_FRAME,initCover);  
78.             refresh();  
79.             // Turn on cover  
80.             this.visible = true;              
81.         }  
82.         public function refresh():void  
83.         {  
84.             var bits:BitmapData = new BitmapData(stageW,stageH);  
85.             bits.draw(coverSquare);  
86.             bits.draw(parentMovie);  
87.             var backgroundImage:Bitmap = new Bitmap(bits);  
88.             backgroundImage.filters = new Array( new BlurFilter(6,6,4) );  
89.               
90.             // Copy the blurred text and add the text  
91.             var textOverlay:BitmapData = new BitmapData(stageW,stageW,false);  
92.             textOverlay.draw(backgroundImage);  
93.             textOverlay.draw(coverText,null,null,null,null,true);  
94.             blurredParent.bitmapData = textOverlay;  
95.         }  
96.     }  
97. }  

 

 

第一种:球形三维模型

 

图片为:

 

[c-sharp]  view plain copy

1. package  
2. {  
3.     import away3d.cameras.HoverCamera3D;  
4.     import away3d.cameras.TargetCamera3D;  
5.     import away3d.containers.View3D;  
6.     import away3d.core.base.Object3D;  
7.     import away3d.events.MouseEvent3D;  
8.     import away3d.primitives.Cone;  
9.     import away3d.primitives.Cube;  
10.     import away3d.primitives.Sphere;  
11.     import away3d.core.utils.Cast;  
12.     import away3d.materials.BitmapMaterial;  
13.       
14.       
15.     import flash.display.Sprite;  
16.     import flash.events.Event;  
17.     import flash.events.KeyboardEvent;  
18.     import flash.ui.Keyboard;  
19.       
20.     import flash.display.*;//可略    
21.     import flash.events.*;//可略   
22.       
23.     //[SWF(width="500", height="400", frameRate="50", backgroundColor="#FFFFFF")]  
24.     public class Basic08_sphere extends Sprite  
25.     {  
26.         private var cam:HoverCamera3D;  
27.         private var lastKey:uint;  
28.         private var keyIsDown:Boolean = false;  
29.         private var View:View3D;  
30.         private var cover:Cover;  
31.           
32.         private var sphere:Sphere;  
33.           
34.         private var tex:BitmapMaterial;  
35.         //  
36.         var move:Boolean = false;    
37.         private var lastPanAngle:Number;    
38.         private var lastTiltAngle:Number;    
39.         private var lastMouseX:Number;    
40.         private var lastMouseY:Number;    
41.      
42.           
43.         /** 
44.          * The following 2 lines are how graphics are embedded using Flex. 
45.          * If you are using the Flash IDE, simply remove the next two 
46.          * lines of code, import the image to your library and set it to 
47.          * export with the class name "texture". 
48.          **/   
49.         //[Embed(source="resources/panoramaSpherical.jpg")]  
50.         //private var texture:Class;  
51.           
52.         public function Basic08_sphere()  
53.         {  
54.             // create a "hovering" camera  
55.             cam = new HoverCamera3D();  
56.             cam.z = -1000; // make sure the camera is positioned away from the default 0,0,0 coordinate  
57.             cam.panangle = 0;  
58.             cam.tiltangle = 0;  //摄像机的,初始水平与倾斜度数  
59.               
60.             cam.targetpanangle = 0;  
61.             cam.targettiltangle = 0; //摄像机从初始水平倾斜角度,运动到当前设置的角度(这是一个运动的状态,不是单纯的属性设置)  
62.               
63.               
64.             cam.maxtiltangle=60;//设置相机的最大倾斜角度    
65.             cam.mintiltangle=-60;//设置相机的最小倾斜角度   不发生破面,根据相机位置距离决定这个值的范围  
66.               
67.               
68.             cam.zoom = 4;  
69.               
70.             // create a viewport  
71.             View = new View3D({camera:cam,x:250,y:200});  
72.             addChild(View);  
73.               
74.               
75.             tex=new BitmapMaterial( Cast.bitmap(texture));  
76.                                                                                   
77.             // add a huge surrounding sphere so we really can see what we're doing  
78.             var largeSphere:Sphere = new Sphere({radius:1500,material:tex,segmentsW:14,segmentsH:28});  
79.               
80.               
81.             largeSphere.invertFaces();  
82.               
83.             largeSphere.bothsides = true;//这一句话是必须的,让模型二面都可见,这时,当摄影机在模型内部时,才能看到贴图内容.  
84.               
85.             View.scene.addChild(largeSphere);  
86.               
87.             // update the view  
88.             cam.hover();  
89.             View.render();  
90. /****************当鼠标在影片剪辑中时影片运行***********************************************************************/  
91.             // only run when user is above the SWF  
92.             cover = new Cover(this,500,400,"Roll over and Click to activate. Use S, W and arrow keys to navigate");  
93.             addChild(cover);  
94.               
95.             // listen for key events and run every frame  
96.             this.stage.addEventListener(KeyboardEvent.KEY_DOWN,onKeyDown1);  
97.             this.stage.addEventListener(KeyboardEvent.KEY_UP,onKeyUp1);  
98.             this.addEventListener(Event.ENTER_FRAME,onEnterFrame1);  
99.               
100.               
101.             //添加鼠标控制摄像机行为侦听器  
102.             stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown1);    
103.             stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp1);    
104.   
105.         }  
106.           
107.           
108. /****************添加鼠标控制摄像机行为***********************************************************************/  
109.           
110.         private function onMouseDown1(event:MouseEvent):void    
111.                 {    
112.                   lastPanAngle = cam.targetpanangle;    
113.                   lastTiltAngle = cam.targettiltangle;    
114.                      lastMouseX = stage.mouseX;    
115.                      lastMouseY = stage.mouseY;    
116.                      move = true;    
117.                    trace("mouseDowen   "+move);     
118.               }    
119.    
120.           private function onMouseUp1(event:MouseEvent):void    
121.               {    
122.         
123.                     move = false;    
124.                     //trace("mouseUp   "+move);    
125.         
126.                 }    
127.     
128.   
129.    //主函数  
130.    private function updateCamera1(){    
131.     // rerender viewport    
132.     if (move) {    
133.         trace("go");    
134.         //每一次的camera.targetpanangle位置从当前位置开始(lastPanAngle = camera.targetpanangle,MouseDown时,开始计时)    
135.         cam.targetpanangle = 0.3*(stage.mouseX - lastMouseX) + lastPanAngle;    
136.         cam.targettiltangle = 0.3*(stage.mouseY - lastMouseY) + lastTiltAngle;    
137.         cam.hover();    
138.         View.render();  
139.     }        
140. }    
141.   
142.   
143. /***************************************************************************************************************/  
144. /***************************************************************************************************************/  
145.           
146.           
147.           
148. /****键盘控制影片剪辑行为*********************************************************************************/  
149.           
150.         private function onEnterFrame1(e:Event):void  
151.         {     
152.            updateCamera1();  
153.             if(!cover.visible)  
154.             {  
155.                 if(keyIsDown){  
156.                     // if the key is still pressed, just keep on moving  
157.                     switch(lastKey){  
158.                         case Keyboard.UP    : cam.targettiltangle -= 5; break;  
159.                         case Keyboard.DOWN  : cam.targettiltangle += 5; break;  
160.                         case 87             : cam.zoom += 0.3; break;  
161.                         case 83             : if(cam.zoom > 1.4){cam.zoom -= 0.3}; break;  
162.                         case Keyboard.LEFT  : cam.targetpanangle -= 5; break;  
163.                         case Keyboard.RIGHT : cam.targetpanangle += 5; break;  
164.                     }  
165.                 }  
166.                 // render the view  
167.                 cam.hover();  
168.                 View.render();  
169.             }  
170.         }  
171.           
172.           
173.           
174.         private function onKeyDown1(e:KeyboardEvent):void  
175.         {  
176.             lastKey = e.keyCode;  
177.             keyIsDown = true;  
178.         }  
179.           
180.         private function onKeyUp1(e:KeyboardEvent):void  
181.         {  
182.             keyIsDown = false;  
183.         }  
184.           
185.           
186.     }  
187. }  

 

 

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

 

图片为:

 

[c-sharp]  view plain copy

1. package  
2. {  
3.     import away3d.cameras.HoverCamera3D;  
4.     import away3d.containers.View3D;  
5.     import away3d.materials.BitmapMaterial;  
6.     import away3d.primitives.Skybox6;  
7.     import away3d.primitives.Sphere;  
8.     import away3d.core.utils.Cast;  
9.       
10.     import flash.display.Bitmap;  
11.     import flash.display.Sprite;  
12.     import flash.events.Event;  
13.     import flash.events.KeyboardEvent;  
14.     import flash.ui.Keyboard;  
15.       
16.   
17.     import flash.events.*;//可略   
18.       
19.     //[SWF(width="500", height="400", frameRate="50", backgroundColor="#FFFFFF")]  
20.     public class Basic08_skybox6 extends Sprite  
21.     {  
22.         private var cam:HoverCamera3D;  
23.         private var lastKey:uint;  
24.         private var keyIsDown:Boolean = false;  
25.         private var View:View3D;  
26.         private var cover:Cover;  
27.           
28.         private var largeCube:Skybox6;  
29.         var move:Boolean = false;    
30.         private var lastPanAngle:Number;    
31.         private var lastTiltAngle:Number;    
32.         private var lastMouseX:Number;    
33.         private var lastMouseY:Number;    
34.         /** 
35.          * The following 2 lines are how graphics are embedded using Flex. 
36.          * If you are using the Flash IDE, simply remove the next two 
37.          * lines of code, import the image to your library and set it to 
38.          * export with the class name "texture". 
39.          **/   
40.         //[Embed(source="resources/panoramaSpherical_out.png")]  
41.        // private var texture:Class;  
42.           
43.         public function Basic08_skybox6()  
44.         {  
45.             // create a "hovering" camera  
46.             cam = new HoverCamera3D();  
47.             cam.panangle = 0;  
48.             cam.tiltangle = 0;  
49.             cam.targetpanangle = 0;  
50.             cam.targettiltangle = 0;  
51.             cam.mintiltangle = -90;  
52.             cam.zoom = 4;  
53.               
54.             // create a viewport  
55.             View = new View3D({camera:cam,x:250,y:200});  
56.             addChild(View);  
57.               
58.             // add skybox6  
59.             var mat:BitmapMaterial = new BitmapMaterial( Cast.bitmap(texture1) );  
60.             largeCube = new Skybox6(mat);  
61.             largeCube.quarterFaces();  
62.             View.scene.addChild(largeCube);  
63.               
64.             // update the view  
65.             cam.hover();  
66.             View.render();  
67.               
68.             // only run when user is above the SWF  
69.             cover = new Cover(this,500,400,"Roll over and Click to activate. Use the arrow keys to navigate and S, W to zoom");  
70.             addChild(cover);  
71.               
72.             // listen for key events and run every frame  
73.             this.stage.addEventListener(KeyboardEvent.KEY_DOWN,onKeyDown1);  
74.             this.stage.addEventListener(KeyboardEvent.KEY_UP,onKeyUp1);  
75.             this.addEventListener(Event.ENTER_FRAME,onEnterFrame);  
76.               
77.             //添加鼠标控制摄像机行为侦听器  
78.             stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown1);    
79.             stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp1);  
80.         }  
81.           
82.           
83.           
84.           
85. /****************添加鼠标控制摄像机行为***********************************************************************/  
86.           
87.         private function onMouseDown1(event:MouseEvent):void    
88.                 {    
89.                   lastPanAngle = cam.targetpanangle;    
90.                   lastTiltAngle = cam.targettiltangle;    
91.                      lastMouseX = stage.mouseX;    
92.                      lastMouseY = stage.mouseY;    
93.                      move = true;    
94.                    trace("mouseDowen   "+move);     
95.               }    
96.    
97.           private function onMouseUp1(event:MouseEvent):void    
98.               {    
99.         
100.                     move = false;    
101.                       
102.         
103.                 }    
104.     
105.   
106.    //主函数  
107.    private function updateCamera1(){    
108.     // rerender viewport    
109.     if (move) {    
110.         trace("go");    
111.         //每一次的camera.targetpanangle位置从当前位置开始(lastPanAngle = camera.targetpanangle,MouseDown时,开始计时)    
112.         cam.targetpanangle = 0.3*(stage.mouseX - lastMouseX) + lastPanAngle;    
113.         cam.targettiltangle = 0.3*(stage.mouseY - lastMouseY) + lastTiltAngle;    
114.         cam.hover();    
115.         View.render();  
116.     }        
117. }    
118.   
119.   
120. /***************************************************************************************************************/  
121. /***************************************************************************************************************/  
122.         private function onEnterFrame(e:Event):void  
123.         {  
124.             updateCamera1();  
125.             if(!cover.visible)  
126.             {  
127.                 if(keyIsDown){  
128.                     // if the key is still pressed, just keep on moving  
129.                     switch(lastKey){  
130.                         case Keyboard.UP    : cam.targettiltangle -= 5; break;  
131.                         case Keyboard.DOWN  : cam.targettiltangle += 5; break;  
132.                         case 87             : cam.zoom += 0.3; break;  
133.                         case 83             : if(cam.zoom > 1.4){cam.zoom -= 0.3}; break;  
134.                         case Keyboard.LEFT  : cam.targetpanangle -= 5; break;  
135.                         case Keyboard.RIGHT : cam.targetpanangle += 5; break;  
136.                     }  
137.                 }  
138.                 // render the view  
139.                 cam.hover();  
140.                 View.render();  
141.             }  
142.         }  
143.         private function onKeyDown1(e:KeyboardEvent):void  
144.         {  
145.             lastKey = e.keyCode;  
146.             keyIsDown = true;  
147.         }  
148.         private function onKeyUp1(e:KeyboardEvent):void  
149.         {  
150.             keyIsDown = false;  
151.         }  
152.     }  
153. }  

 

 

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