flex/flash 3d基础-摄像机（Camera）的概念

【http://www.newflash3d.com---flash3D先锋队：北京贝武易科技公司】
有疑问请联系我QQ:363596350
下面我们讨论一下Flex里面的相机和物体之间的相对运动。


物体的运动与相机的运动是现对的。我们可以让物体不动，而相机运动，产生的效果是一样的。
我们假设我们的角色名称为Joe。
我们让Joe是一个3d物体。还记得我们自己设定好的3d类吗。
Object3d.as
代码如下：

package hjh3dcom
{
	public class Object3d extends Object
	{
		private var _x3din:Number;
		private var _y3din:Number;
		private var _z3din:Number;
		
		public function Object3d()
		{
			super();
			init();
		}
		private function init():void{
			_x3din=0;
			_y3din=0;
			_z3din=0;
		}
        //----------------------------------------
		public function set x3d(x3din:Number):void
		{
			_x3din = x3din;	
		}
		public function get x3d():Number
		{
			return _x3din;	
		}
		//----------------------------------------
		public function set y3d(y3din:Number):void
		{
			_y3din = y3din;	
		}
		public function get y3d():Number
		{
			return _y3din;	
		}
		//----------------------------------------
		public function set z3d(z3din:Number):void
		{
			_z3din = z3din;	
		}
		public function get z3d():Number
		{
			return _z3din;	
		}
		
		
	}
}

那么我们定义Joe坐标为：

Joe.x3d = 0;
Joe.y3d = 0;
Joe.z3d = 0;
Joe.dir = 1;

代码如下：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:myCanvas3D="myCanvas3D.*" applicationComplete="init();">
	<mx:Script>
		<![CDATA[
			import hjh3dcom.Object3d;
			
			[Embed(source='assets/Figure.swf')]   
	        public var FG:Class;   
	        public var joe:MovieClip = new FG as MovieClip; 
	        
	        private var joe3d:Object3d;
	        private var FocalLength:Number;
	        private var dir:Number;
	        private var speed:Number;
	        private var scaleRatio:Number;
	        
			private function init():void{
				joe3d=new Object3d();
				joe3d.x3d=0;
				joe3d.y3d=0;
				joe3d.z3d=0;
				dir=1;
				FocalLength=300;
				speed=20;
				joe.x=250;
				joe.y=200;
				joe.scaleX=joe.scaleY=1;
				mycanvas.canvas.addChild(joe);
				this.addEventListener(Event.ENTER_FRAME,onenterframe);
			}
			private function come3dto2d():void{
				joe.x=joe3d.x3d*scaleRatio+250;
				joe.y=-joe3d.y3d*scaleRatio+200;
				joe.scaleX=joe.scaleY=1*scaleRatio;//需要注意的是贴图是靠Sprite物体的缩放实现的
			}
			private function onenterframe(evt:Event):void{
				movejoe3d();
				scaleRatio=FocalLength/(FocalLength+joe3d.z3d);
				come3dto2d();
			}
			private function movejoe3d():void{
				joe3d.z3d += speed*dir;
				if (joe3d.z3d > 500){
					joe3d.z3d = 500;
					dir = -1; // moving forward now
				}else if (joe3d.z3d < 0){
					joe3d.z3d = 0;
					dir = 1; // now moving back again
				}
			}
		]]>
	</mx:Script>
	<myCanvas3D:Canvas3D id="mycanvas" width="500" height="400" backgroundColor="0xFFFFFF"/>
</mx:Application>

我们设定了坐标的大小为：width="500" height="400"
所以，我们的中心点为（250，200），所以

				joe.x=joe3d.x3d*scaleRatio+250;
				joe.y=-joe3d.y3d*scaleRatio+200;

我们把物体移动到了中心画布的中心坐标。
我们用的基本方法为：

function init()//初始化
function come3dto2d()//从三维转换到二维
function onenterframe(evt:Event)//随着时间运动
function movejoe3d()//控制运动的函数

上面我们一直没有出现相机的概念，下面我们就来构造一个相机。
这里有一个特别深奥的地方，也就是投影坐标的变换，也就是说如果我们的相机是运动的话，我们的观察坐标（也就是我们赖与测试参考的坐标它本身是运动的！这就麻烦了），作为初学者，这种相对运动的变换，的确是一个不容易的事情。
在原来的基础上增加一个视平面：

				//增加一个相机视图物体（注意：这个是视平面）
				cameraview=new Object3d();
				cameraview.x3d=0;
				cameraview.y3d=0;
				cameraview.z3d=0;

他们的关系如图：


结果的代码是：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:myCanvas3D="myCanvas3D.*" applicationComplete="init();">
	<mx:Script>
		<![CDATA[
			import hjh3dcom.Object3d;
			
			[Embed(source='assets/Figure.swf')]   
	        public var FG:Class;   
	        public var joe:MovieClip = new FG as MovieClip; 
	        
	        private var joe3d:Object3d;
	        private var cameraview:Object3d;
	        private var FocalLength:Number;
	        private var dir:Number;
	        private var speed:Number;
	        private var scaleRatio:Number;
	        
			private function init():void{
				joe3d=new Object3d();
				joe3d.x3d=0;
				joe3d.y3d=0;
				joe3d.z3d=0;
				//增加一个相机视图物体（注意：这个是视平面）
				cameraview=new Object3d();
				cameraview.x3d=0;
				cameraview.y3d=0;
				cameraview.z3d=0;
				dir=1;
				FocalLength=300;
				speed=20;
				joe.x=250;
				joe.y=200;
				joe.scaleX=joe.scaleY=1;
				mycanvas.canvas.addChild(joe);
				this.addEventListener(Event.ENTER_FRAME,onenterframe);
			}
			private function come3dto2d():void{
				joe.x=(joe3d.x3d-cameraview.x3d)*scaleRatio+250;
				joe.y=-(joe3d.y3d-cameraview.y3d)*scaleRatio+200;
				joe.scaleX=joe.scaleY=1*scaleRatio;//需要注意的是贴图是靠Sprite物体的缩放实现的
			}
			private function onenterframe(evt:Event):void{
				movejoe3d();
				scaleRatio=FocalLength/(FocalLength-cameraview.z3d);
				come3dto2d();
			}
			private function movejoe3d():void{
				cameraview.z3d += speed*dir;
				if (cameraview.z3d < -500){
					cameraview.z3d = -500;
					dir = 1; // moving forward now
				}else if (cameraview.z3d > 0){
					cameraview.z3d = 0;
					dir = -1; // now moving back again
				}
			}
		]]>
	</mx:Script>
	<myCanvas3D:Canvas3D id="mycanvas" width="500" height="400" backgroundColor="0xFFFFFF"/>
</mx:Application>

这里用了一个关键的因素是坐标的变换概念：


如果我们用A坐标系来描述B点的位置，则B点的位置为：
Bx=X2-X1；
By=Y2-Y1；
同样，在新的坐标中，如果相机移动，那么我们的物体的位置为

X=joe3d.x3d-cameraview.x3d；
Y=joe3d.y3d-cameraview.y3d；
Z=joe3d.z3d-cameraview.z3d；

OK，结果为：

【http://www.newflash3d.com---flash3D先锋队：北京贝武易科技公司】
有疑问请联系我QQ:363596350