用PV3D在Flex中实现全景360

1 篇文章 0 订阅

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


将实景360场景封装为一个类,代码如下:

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程序中使用该全景类,如下图所示:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
			   creationComplete="App_creationCompleteHandler(event)" >
	<fx:Script>
		<![CDATA[
			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);
			}
			
		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
	</fx:Declarations>
	<mx:Canvas id="iCanvas" width="700" height="500"/>
</s:Application>


  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值