Flash/Flex学习笔记(49)：3D基础

之前我们所做的动画都是基于x,y二维坐标轴的，在三维动画中我们还需要增加一个垂直于屏幕“向里”或“向外”的Z轴，那么z轴到底是应该向外，还是向里呢?这个其实无所谓，不过为了统一，习惯上通常把z轴约定为向里，即所谓的“右手坐标系”

右手坐标系的得名：伸出右手，让食指、中指、大拇指相互垂直；然后 食指指向x轴正向，中指指向y轴正向，则大拇指所指方向即为z轴正向。(事实上这个姿势酷似周杰伦周董的招牌动作)

三维透视的基本规则：

物体在Z轴上的坐标越大(越远)，则看起来越小(将上图坐标系旋转，把z轴转到x轴方向后，得到下图)，如果距离足够远，则物体将消失于屏幕上的某个特定点(通常称为“消失点”)

技术上的主要处理：动态调整物体的scaleX与scaleY（同时因为物体的大小改变后，相应的x,y坐标值通常也会改变，所以x,y坐标也要做相应调整以符合透视规则），基本公式如下：

scale = fl/(fl+z)

var ball:Ball = new Ball();
addChild(ball);

//观察点 相对于 消失点的坐标
var xPos:Number=0;
var yPos:Number=0;
var zPos:Number=0;
var fl:Number=250;//焦距
//消失点
var vpX:Number=stage.stageWidth/2;
var vpY:Number=stage.stageHeight/2;

addEventListener(Event.ENTER_FRAME, EnterFrameHandler);
stage.addEventListener(KeyboardEvent.KEY_DOWN, KeyDownHandler);
stage.addEventListener(MouseEvent.MOUSE_WHEEL,MouseWheelHandler);

//鼠标滚轮事件(注：必须让stage获取焦点时-即用鼠标在动画上点击一下，该事件才会触发，另外还要注意：嵌入网页时，浏览器也会响应鼠标滚轮)
function MouseWheelHandler(e:MouseEvent):void {
	zPos += (e.delta*5);
}

function EnterFrameHandler(event:Event):void {
	if (zPos> -fl) {
		ball.visible=true;
		xPos=mouseX-vpX;
		yPos=mouseY-vpY;
		var scale:Number = fl / (fl + zPos);
		ball.scaleX=ball.scaleY=scale;
		ball.x=vpX+xPos*scale;
		ball.y=vpY+yPos*scale;
	} else {
		ball.visible=false;
	}
	
	//辅助线
	graphics.clear();
	graphics.lineStyle(1,0xcccccc);
	graphics.moveTo(vpX,vpY);	
	graphics.lineTo(vpX,ball.y);
	graphics.moveTo(vpX,vpY);
	graphics.lineTo(ball.x,vpY);
	
	
	graphics.lineStyle(1,0x0000ff,0.5);
	graphics.moveTo(vpX,vpY);
	graphics.lineTo(ball.x,ball.y);
	
	graphics.lineStyle(1,0xff0000,0.5);
	graphics.moveTo(ball.x,ball.y);
	graphics.lineTo(mouseX,mouseY);	
}

//键盘事件
function KeyDownHandler(e:KeyboardEvent):void {
	if (e.keyCode==Keyboard.UP) {
		zPos+=5;
	} else if (e.keyCode == Keyboard.DOWN) {
		zPos-=5;
	}
}

这个示例中，"鼠标所在位置"充当了"观察点"(即前面示意图中的"人眼"位置)，电脑屏幕所在平面即物体的成像面，用键盘上下键可调整小球在Z轴上的位置，然后移动鼠标位置，通过辅助线观察变化。

基本的3D运动：

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.KeyboardEvent;
	import flash.ui.Keyboard;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	
	public class Velocity3D extends Sprite {
		private var ball:Ball;
		
		//相当于消失点的坐标
		private var xpos:Number=0;
		private var ypos:Number=0;
		private var zpos:Number=0;
		
		//x,y,z三轴上的速度分量
		private var vx:Number=0;
		private var vy:Number=0;
		private var vz:Number=0;
		
		private var friction:Number=0.98;
		private var fl:Number=250;
		
		//消失点
		private var vpX:Number=stage.stageWidth/2;
		private var vpY:Number=stage.stageHeight/2;
		
		public function Velocity3D() {
			init();
		}
		private function init():void {
			stage.align = StageAlign.TOP_LEFT;	
			stage.scaleMode = StageScaleMode.NO_SCALE;
			ball = new Ball(20);
			addChild(ball);
			addEventListener(Event.ENTER_FRAME, EnterFrameHandler);
			stage.addEventListener(KeyboardEvent.KEY_DOWN, KeyDownHandler);
		}
		private function EnterFrameHandler(event:Event):void {
			vpX =stage.stageWidth/2;
			vpY =stage.stageHeight/2;
			
			xpos+=vx;
			ypos+=vy;
			zpos+=vz;
			vx*=friction;
			vy*=friction;
			vz*=friction;
			
			if (zpos>-fl) {
				var scale:Number = fl / (fl + zpos);
				ball.scaleX=ball.scaleY=scale;
				ball.x=vpX+xpos*scale;
				ball.y=vpY+ypos*scale;
				ball.visible=true;
			} else {
				ball.visible=false;
			}
			
			//辅助线
			graphics.clear();
			graphics.lineStyle(1,0xefefef);
			graphics.moveTo(0,stage.stageHeight/2);
			graphics.lineTo(stage.stageWidth,stage.stageHeight/2);
			graphics.lineTo(stage.stageWidth-15,stage.stageHeight/2-8);
			graphics.moveTo(stage.stageWidth,stage.stageHeight/2);
			graphics.lineTo(stage.stageWidth-15,stage.stageHeight/2+8);
			
			graphics.moveTo(stage.stageWidth/2,0);
			graphics.lineTo(stage.stageWidth/2,stage.stageHeight);
			graphics.lineTo(stage.stageWidth/2-8,stage.stageHeight-15);
			graphics.moveTo(stage.stageWidth/2,stage.stageHeight);
			graphics.lineTo(stage.stageWidth/2+8,stage.stageHeight-15);
			graphics.lineStyle(1,0xdadada);
			graphics.moveTo(vpX,vpY);
			graphics.lineTo(ball.x,ball.y);
			
			
		}
		private function KeyDownHandler(e:KeyboardEvent):void {
			switch (e.keyCode) {
				case Keyboard.UP :
					vy-=1;
					break;
				case Keyboard.DOWN :
					vy+=1;
					break;
				case Keyboard.LEFT :
					vx-=1;
					break;
				case Keyboard.RIGHT :
					vx+=1;
					break;
				case Keyboard.SHIFT :
					vz+=0.5;
					break;
				case Keyboard.CONTROL :
					vz-=0.5;
					break;
				default :
					break;
			}
		}
	}
}

上下左右键控制x,y轴方向速度，shift/ctrl键控制z轴速度(当然这个示例还没考虑到3D环境中的边界反弹,下面就要谈到这个问题)

3维运动反弹：

这个需要一点想象力，二维情况下，通常只要把舞台的四个边当作边界就足够了，但是试想一下：在一个立体的空间里，要限制一个物体的活动范围，得要有6个边界面(上，下，左，右，前，后)

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	
	public class Bounce3D extends Sprite {
		private var ball:Ball;
		private var xpos:Number=0;
		private var ypos:Number=0;
		private var zpos:Number=0;
		private var vx:Number=Math.random()*12-6;
		private var vy:Number=Math.random()*12-6;
		private var vz:Number=Math.random()*12-6;
		private var fl:Number=250;
		
		//消失点
		private var vpX:Number=stage.stageWidth/2;
		private var vpY:Number=stage.stageHeight/2;
		
		//相对于消失点的六个边界面(上，下，左，右，前，后)
		private var top:Number=-100;
		private var bottom:Number=100;
		private var left:Number=-100;
		private var right:Number=100;
		private var front:Number=100;
		private var back:Number=-100;
		
		public function Bounce3D() {
			init();
		}
		private function init():void {
			stage.align = StageAlign.TOP_LEFT;	
			stage.scaleMode = StageScaleMode.NO_SCALE;
			ball=new Ball(15);
			addChild(ball);
			addEventListener(Event.ENTER_FRAME, EnterFrameHandler);
		}
		private function EnterFrameHandler(event:Event):void {
			vpX =stage.stageWidth/2;
			vpY =stage.stageHeight/2; 
			
			xpos+=vx;
			ypos+=vy;
			zpos+=vz;
			var radius:Number=ball.radius;
			//左右边界
			if (xpos+radius>right) {
				xpos=right-radius;
				vx*=-1;
			} else if (xpos - radius < left) {
				xpos=left+radius;
				vx*=-1;
			}
			//上下边界
			if (ypos+radius>bottom) {				
				ypos=bottom-radius;
				vy*=-1;
			} else if (ypos - radius < top) {
				ypos=top+radius;
				vy*=-1;
			}
			//前后边界
			if (zpos+radius>front) {
				zpos=front-radius;
				vz*=-1;
			} else if (zpos - radius < back) {
				zpos=back+radius;
				vz*=-1;
			}
			
			//换算成平面二维坐标及缩放比率
			if (zpos>- fl) {
				var scale:Number = fl / (fl + zpos);
				ball.scaleX=ball.scaleY=scale;
				ball.x=vpX+xpos*scale;
				ball.y=vpY+ypos*scale;
				ball.visible=true;
			} else {
				ball.visible=false;
			}
			
			//辅助线
			graphics.clear();
			graphics.lineStyle(1,0xccccff);
			graphics.moveTo(0,stage.stageHeight/2);
			graphics.lineTo(stage.stageWidth,stage.stageHeight/2);
			graphics.lineTo(stage.stageWidth-15,stage.stageHeight/2-8);
			graphics.moveTo(stage.stageWidth,stage.stageHeight/2);
			graphics.lineTo(stage.stageWidth-15,stage.stageHeight/2+8);
			
			graphics.moveTo(0,stage.stageHeight);
			graphics.lineTo(stage.stageWidth,0);
			graphics.lineTo(stage.stageWidth-15,2);
			graphics.moveTo(stage.stageWidth,0);
			graphics.lineTo(stage.stageWidth-6,13);
			
			graphics.moveTo(stage.stageWidth/2,0);
			graphics.lineTo(stage.stageWidth/2,stage.stageHeight);
			graphics.lineTo(stage.stageWidth/2-8,stage.stageHeight-15);
			graphics.moveTo(stage.stageWidth/2,stage.stageHeight);
			graphics.lineTo(stage.stageWidth/2+8,stage.stageHeight-15);
			graphics.lineStyle(1,0xffccff);
			graphics.moveTo(vpX,vpY);
			graphics.lineTo(ball.x,ball.y);
		}
	}
}

也许这样看得并不清楚，再加入更多的小球反弹，可能更容易理解一些，不过为了方便代码处理，先定义一个新的小球类:Ball3D

package {
	import flash.display.Sprite;
	public class Ball3D extends Sprite {
		public var radius:Number;
		private var color:uint;
		public var xpos:Number=0;
		public var ypos:Number=0;
		public var zpos:Number=0;
		public var vx:Number=0;
		public var vy:Number=0;
		public var vz:Number=0;
		public var mass:Number=1;
		public function Ball3D(radius:Number=40, color:uint=0xff0000) {
			this.radius=radius;
			this.color=color;
			init();
		}
		public function init():void {
			graphics.lineStyle(0);
			graphics.beginFill(color);
			graphics.drawCircle(0, 0, radius);
			graphics.endFill();
		}
	}
}

多个小球的3D反弹:

package {
	import flash.display.Sprite;
	import flash.events.Event;
		import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	
	public class MultiBounce3D extends Sprite {
		private var balls:Array;
		private var numBalls:uint=20;
		private var fl:Number=250;
		private var vpX:Number=stage.stageWidth/2;
		private var vpY:Number=stage.stageHeight/2;
		private var top:Number=-120;
		private var bottom:Number=120;
		private var left:Number=-120;
		private var right:Number=120;
		private var front:Number=120;
		private var back:Number=-120;
		public function MultiBounce3D() {
			init();
		}
		private function init():void {
			stage.align = StageAlign.TOP_LEFT;	
			stage.scaleMode = StageScaleMode.NO_SCALE;
			balls = new Array();
			for (var i:uint = 0; i < numBalls; i++) {
				var ball:Ball3D=new Ball3D(15,Math.random()*0xffffff);
				balls.push(ball);
				ball.vx=Math.random()*10-5;
				ball.vy=Math.random()*10-5;
				ball.vz=Math.random()*10-5;
				addChild(ball);
			}
			addEventListener(Event.ENTER_FRAME, onEnterFrame);
		}
		private function onEnterFrame(event:Event):void {
			vpX =stage.stageWidth/2;
			vpY =stage.stageHeight/2; 
			graphics.clear();
			for (var i:uint = 0; i < numBalls; i++) {
				var ball:Ball3D=balls[i];				
				move(ball);
			}
		}
		private function move(ball:Ball3D):void {
			var radius:Number=ball.radius;
			ball.xpos+=ball.vx;
			ball.ypos+=ball.vy;
			ball.zpos+=ball.vz;
			
			//6边界检测
			if (ball.xpos+radius>right) {
				ball.xpos=right-radius;
				ball.vx*=-1;
			} else if (ball.xpos - radius < left) {
				ball.xpos=left+radius;
				ball.vx*=-1;
			}
			if (ball.ypos+radius>bottom) {
				ball.ypos=bottom-radius;
				ball.vy*=-1;
			} else if (ball.ypos - radius < top) {
				ball.ypos=top+radius;
				ball.vy*=-1;
			}
			if (ball.zpos+radius>front) {
				ball.zpos=front-radius;
				ball.vz*=-1;
			} else if (ball.zpos - radius < back) {
				ball.zpos=back+radius;
				ball.vz*=-1;
			}
			
			//转换化2D坐标
			if (ball.zpos>- fl) {
				var scale:Number = fl / (fl + ball.zpos);
				ball.scaleX=ball.scaleY=scale;
				ball.x=vpX+ball.xpos*scale;
				ball.y=vpY+ball.ypos*scale;
				ball.visible=true;
			} else {
				ball.visible=false;
			}
			
			//辅助线			
			graphics.lineStyle(1,0xccccff);
			graphics.moveTo(0,stage.stageHeight/2);
			graphics.lineTo(stage.stageWidth,stage.stageHeight/2);
			graphics.lineTo(stage.stageWidth-15,stage.stageHeight/2-8);
			graphics.moveTo(stage.stageWidth,stage.stageHeight/2);
			graphics.lineTo(stage.stageWidth-15,stage.stageHeight/2+8);
			
			graphics.moveTo(0,stage.stageHeight);
			graphics.lineTo(stage.stageWidth,0);
			graphics.lineTo(stage.stageWidth-15,2);
			graphics.moveTo(stage.stageWidth,0);
			graphics.lineTo(stage.stageWidth-6,13);
			
			graphics.moveTo(stage.stageWidth/2,0);
			graphics.lineTo(stage.stageWidth/2,stage.stageHeight);
			graphics.lineTo(stage.stageWidth/2-8,stage.stageHeight-15);
			graphics.moveTo(stage.stageWidth/2,stage.stageHeight);
			graphics.lineTo(stage.stageWidth/2+8,stage.stageHeight-15);
			graphics.lineStyle(1,0xff99ff);
			graphics.moveTo(vpX,vpY);
			graphics.lineTo(ball.x,ball.y);
		}
	}
}

仔细观察一下，相信不少人会发现问题：物体的前后顺序不对，远处的物体居然挡住了近处的物体。(css中可以通过z-Index来调整，silverlight的canvas中也有类似的zIndex，但在As3中如何做呢?)

先跑一下题，来看一个小技巧：Object 数组的排序

var arrTest = [{age:20,name:"a"},{age:50,name:"b"},{age:30,name:"c"}]
arrTest.sortOn("age",Array.DESCENDING);//按age值倒排
for(var i:int=0,j=arrTest.length;i<j;i++){
	trace(arrTest[i].age ,arrTest[i].name);
}

是不是很好用！

ok，问题解决了：Flash的显示列表中，最后被addChild的物体总是显示在上面，在Flash内部"舞台上的每个物体"都对应一个索引值，随着物体不断被添加到舞台上，其对应的索引值也不断增加，我们可以通过调整索引值来改变物体的显示顺序.

基本测试：

var ballA = new Ball(50);
ballA.x = stage.stageWidth/2;
ballA.y = stage.stageHeight/2;
addChild(ballA);

var ballB = new Ball(45,0x0000ff);
ballB.x = ballA.x;
ballB.y = ballA.y + 20;
addChild(ballB);

btn1.addEventListener(MouseEvent.MOUSE_DOWN,btn1Click);

function btn1Click(e:MouseEvent):void{
	setChildIndex(ballB,0);
	setChildIndex(ballA,1);
}

btn2.addEventListener(MouseEvent.MOUSE_DOWN,btn2Click);

function btn2Click(e:MouseEvent):void{
	setChildIndex(ballB,1);
	setChildIndex(ballA,0);
}

调整后的3D反弹

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;

	public class MultiBounce3D extends Sprite {
		private var balls:Array;
		private var numBalls:uint=20;
		private var fl:Number=250;
		private var vpX:Number=stage.stageWidth/2;
		private var vpY:Number=stage.stageHeight/2;
		private var top:Number=-120;
		private var bottom:Number=120;
		private var left:Number=-120;
		private var right:Number=120;
		private var front:Number=120;
		private var back:Number=-120;
		public function MultiBounce3D() {
			init();
		}
		private function init():void {
			stage.align=StageAlign.TOP_LEFT;
			stage.scaleMode=StageScaleMode.NO_SCALE;
			balls = new Array();
			for (var i:uint = 0; i < numBalls; i++) {
				var ball:Ball3D=new Ball3D(15,Math.random()*0xffffff);
				balls.push(ball);
				ball.vx=Math.random()*10-5;
				ball.vy=Math.random()*10-5;
				ball.vz=Math.random()*10-5;
				addChild(ball);
			}
			addEventListener(Event.ENTER_FRAME, onEnterFrame);
		}
		private function onEnterFrame(event:Event):void {
			vpX=stage.stageWidth/2;
			vpY=stage.stageHeight/2;
			graphics.clear();
			for (var i:uint = 0; i < numBalls; i++) {
				var ball:Ball3D=balls[i];
				move(ball);
			}
			sortZ();
		}

		function sortZ():void {
			balls.sortOn("zpos", Array.DESCENDING | Array.NUMERIC);
			for (var i:uint = 0; i < numBalls; i++) {
				var ball:Ball3D=balls[i];
				setChildIndex(ball, i);
			}
		}

		private function move(ball:Ball3D):void {
			var radius:Number=ball.radius;
			ball.xpos+=ball.vx;
			ball.ypos+=ball.vy;
			ball.zpos+=ball.vz;

			//6边界检测
			if (ball.xpos+radius>right) {
				ball.xpos=right-radius;
				ball.vx*=-1;
			} else if (ball.xpos - radius < left) {
				ball.xpos=left+radius;
				ball.vx*=-1;
			}
			if (ball.ypos+radius>bottom) {
				ball.ypos=bottom-radius;
				ball.vy*=-1;
			} else if (ball.ypos - radius < top) {
				ball.ypos=top+radius;
				ball.vy*=-1;
			}
			if (ball.zpos+radius>front) {
				ball.zpos=front-radius;
				ball.vz*=-1;
			} else if (ball.zpos - radius < back) {
				ball.zpos=back+radius;
				ball.vz*=-1;
			}

			//转换化2D坐标
			if (ball.zpos>- fl) {
				var scale:Number = fl / (fl + ball.zpos);
				ball.scaleX=ball.scaleY=scale;
				ball.x=vpX+ball.xpos*scale;
				ball.y=vpY+ball.ypos*scale;
				ball.visible=true;
			} else {
				ball.visible=false;
			}

			//辅助线
			graphics.lineStyle(1,0xccccff);
			graphics.moveTo(0,stage.stageHeight/2);
			graphics.lineTo(stage.stageWidth,stage.stageHeight/2);
			graphics.lineTo(stage.stageWidth-15,stage.stageHeight/2-8);
			graphics.moveTo(stage.stageWidth,stage.stageHeight/2);
			graphics.lineTo(stage.stageWidth-15,stage.stageHeight/2+8);

			graphics.moveTo(0,stage.stageHeight);
			graphics.lineTo(stage.stageWidth,0);
			graphics.lineTo(stage.stageWidth-15,2);
			graphics.moveTo(stage.stageWidth,0);
			graphics.lineTo(stage.stageWidth-6,13);

			graphics.moveTo(stage.stageWidth/2,0);
			graphics.lineTo(stage.stageWidth/2,stage.stageHeight);
			graphics.lineTo(stage.stageWidth/2-8,stage.stageHeight-15);
			graphics.moveTo(stage.stageWidth/2,stage.stageHeight);
			graphics.lineTo(stage.stageWidth/2+8,stage.stageHeight-15);
			graphics.lineStyle(1,0xff99ff);
			graphics.moveTo(vpX,vpY);
			graphics.lineTo(ball.x,ball.y);
		}
	}
}

3D粒子喷射:

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	
	//设置动画背景为黑色	
	[SWF(backgroundColor=0x000000)]//c#中的特性? 哈
	public class Fireworks extends Sprite {
		private var balls:Array;
		private var numBalls:uint=100;
		private var fl:Number=250;
		//消失点
		private var vpX:Number=stage.stageWidth/2;
		private var vpY:Number=stage.stageHeight/2;
		private var gravity:Number=0.2;
		private var floor:Number=50;//y轴反弹的边界(相对消失点而言)
		private var bounce:Number=-0.6;
		public function Fireworks() {
			init();
		}

		private function init():void {
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
			balls = new Array();
			for (var i:uint = 0; i < numBalls; i++) {
				var ball:Ball3D=new Ball3D(5,Math.random()*0xffffff);
				balls.push(ball);				
				addChild(ball);
			}
			initVelocity();
			addEventListener(Event.ENTER_FRAME, onEnterFrame);
			
		}
		
		private function initVelocity():void{
			for (var i:uint = 0; i < numBalls; i++) {
				var ball:Ball3D=balls[i];
				reset(ball);
			}			
		}
		
		private function reset(b:Ball3D):void{
			b.ypos=-250;
			b.zpos=200;		
			b.xpos=0;
			b.vx=(Math.random()*2-1)*3 //x轴方向速度为-3到+3的随机值(即:看起来有的球向左，有的球向右，在横向扩散)
			b.vy=(Math.random()-1)*4; //y轴方向为-4到0之间的随机值(即向下掉)
			b.vz=(Math.random()-1)*3;  //z轴方向速度为-3到0的随机值(即：所有球从远处向近处喷)
				
		}
		
		private function onEnterFrame(event:Event):void {			
			for (var i:uint = 0; i < numBalls; i++) {
				var ball:Ball3D=balls[i];
				move(ball);
			}
			sortZ();
		}
		private function move(ball:Ball3D):void {
			ball.vy+=gravity;
			ball.xpos+=ball.vx;
			ball.ypos+=ball.vy;
			ball.zpos+=ball.vz;
			if (ball.ypos>floor) {
				ball.ypos=floor;
				ball.vy*=bounce;
			}
			if (ball.zpos>-fl) {
				var scale:Number = fl / (fl + ball.zpos);
				ball.scaleX=ball.scaleY=scale;
				ball.x=vpX+ball.xpos*scale;
				ball.y=vpY+ball.ypos*scale;
				ball.alpha = scale;//越远的物体，越淡
				if (ball.x<0 || ball.x>stage.stageWidth || ball.y>stage.stageHeight || ball.alpha<0.05){
					reset(ball);
				}
				ball.visible=true;
			} else {
				ball.visible=false;
				reset(ball);
			}
		}
		private function sortZ():void {
			balls.sortOn("zpos", Array.DESCENDING | Array.NUMERIC);
			for (var i:uint = 0; i < numBalls; i++) {
				var ball:Ball3D=balls[i];
				setChildIndex(ball, i);
			}
		}
	}
}

Z轴上的屏幕环绕：

类似2d中的处理，当物体在z轴的坐标达到某一限定值时，重新将其设置为相反值，通俗点讲：物体太远(接近看不见时)，重新将其放在无限近的地方(通常是观察者背后)，物体太近（甚至跑到观察者背后时），重新将其放在无限远处.

var trees:Array;
var numTrees:uint=100;
var fl:Number=250;
var vpX:Number=stage.stageWidth/2;
var vpY:Number=stage.stageHeight/2;
var floor:Number=50;
var vz:Number=0;
var friction:Number=0.98;
var temp:Number=0;


function init():void {
	trees = new Array();
	for (var i:uint = 0; i < numTrees; i++) {
		var tree:Tree = new Tree();
		trees.push(tree);
		tree.xpos=Math.random()*2000-1000;
		tree.ypos=floor;
		tree.zpos=Math.random()*10000;
		addChild(tree);
	}
	addEventListener(Event.ENTER_FRAME, EnterFrameHandler);
	stage.addEventListener(KeyboardEvent.KEY_DOWN, KeyDownHandler);
}

function EnterFrameHandler(event:Event):void {
	for (var i:uint = 0; i < numTrees; i++) {
		var tree:Tree=trees[i];
		move(tree);
	}
	vz*=friction;
	sortZ();

	//自动播放的处理
	if (temp>500) {
		vz-=0.5;		
	} else {
		vz+=0.5;
	}
	temp++;	
	if (temp==1000){
		temp=0;
	}	
	trace(temp);
}

//按上下键时的速度处理
function KeyDownHandler(event:KeyboardEvent):void {
	if (event.keyCode==Keyboard.UP) {
		vz-=1;
	} else if (event.keyCode == Keyboard.DOWN) {
		vz+=1;
	}
}


function move(tree:Tree):void {
	tree.zpos+=vz;
	
	//如果物体跑到观察点后面了，则重新将其放在无限远处
	if (tree.zpos<fl*-1) {
		tree.zpos+=10000;
	}
	
	//如果物体跑得太远了，重新将其放在观察点身后
	if (tree.zpos>10000-fl) {
		tree.zpos-=10000;
	}
	
	var scale:Number = fl / (fl + tree.zpos);
	tree.scaleX=tree.scaleY=scale;
	tree.x=vpX+tree.xpos*scale;
	tree.y=vpY+tree.ypos*scale;
	tree.alpha=scale*0.8+0.2;
}

//z轴排序
function sortZ():void {
	trees.sortOn("zpos", Array.DESCENDING | Array.NUMERIC);
	for (var i:uint = 0; i < numTrees; i++) {
		var tree:Tree=trees[i];
		setChildIndex(tree, i);
	}
}

init();

这个示例中用到了一个新的类Tree，代码如下：

package {
	import flash.display.Sprite;
	public class Tree extends Sprite {
		public var xpos:Number=0;
		public var ypos:Number=0;
		public var zpos:Number=0;
		public function Tree() {
			init();
		}
		public function init():void {
			graphics.lineStyle(0,0xffffff);
			graphics.lineTo(0,-140-Math.random()*20);
			graphics.moveTo(0,-30-Math.random()*30);
			graphics.lineTo(Math.random()*80-40,-100-Math.random()*40);
			graphics.moveTo(0,-60-Math.random()*40);
			graphics.lineTo(Math.random()*60-30,-110-Math.random()*20);
		}
	}
}

上面这个示例的加强版：(左右键控制x轴加速度，上下键控制z轴加速度，空格键整体下落)

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.KeyboardEvent;
	import flash.ui.Keyboard;
	
	[SWF(backgroundColor=0x000000)]
	public class Trees2 extends Sprite {
		private var trees:Array;
		private var numTrees:uint=100;
		
		private var fl:Number=250;
		
		//消失点
		private var vpX:Number=stage.stageWidth/2;
		private var vpY:Number=stage.stageHeight/2;
		
		private var floor:Number=50;
		
		
		//加速度
		private var ax:Number=0;
		private var ay:Number=0;
		private var az:Number=0;
		
		//速度
		private var vx:Number=0;
		private var vy:Number=0;
		private var vz:Number=0;
		
		//重力与摩擦力
		private var gravity:Number=0.3;
		private var friction:Number=0.98;
		
		public function Trees2() {
			init();
		}
		
		private function init():void {
			trees = new Array();
			for (var i:uint = 0; i < numTrees; i++) {
				var tree:Tree = new Tree();
				trees.push(tree);
				tree.xpos=Math.random()*2000-1000;
				tree.ypos=floor;
				tree.zpos=Math.random()*10000;
				addChild(tree);
			}
			addEventListener(Event.ENTER_FRAME, onEnterFrame);
			stage.addEventListener(KeyboardEvent.KEY_DOWN, KeyDownHandler);
			stage.addEventListener(KeyboardEvent.KEY_UP, KeyUpHandler);
		}
		
		private function onEnterFrame(event:Event):void {
			vx+=ax;
			vy+=ay;
			vz+=az;
			vy-=gravity;//负重力？哈，好好理解一下，这一行结合后面的y轴坐标检测，才保证了所有树在空格键松开时，能在y轴方向上恢复原状
			for (var i:uint = 0; i < numTrees; i++) {
				var tree:Tree=trees[i];
				move(tree);
			}
			vx*=friction;
			vy*=friction;
			vz*=friction;
			sortZ();
		}
		
		//键盘按下时，处理加速度
		private function KeyDownHandler(event:KeyboardEvent):void {
			switch (event.keyCode) {
				case Keyboard.UP :
					az=-1;
					break;
				case Keyboard.DOWN :
					az=1;
					break;
				case Keyboard.LEFT :
					ax=1;
					break;
				case Keyboard.RIGHT :
					ax=-1;
					break;
				case Keyboard.SPACE :
					ay=1;
					break;
				default :
					break;
			}
		}
		
		//按键抬起时，加速度置0
		private function KeyUpHandler(event:KeyboardEvent):void {
			switch (event.keyCode) {
				case Keyboard.UP :
				case Keyboard.DOWN :
					az=0;
					break;
				case Keyboard.LEFT :
				case Keyboard.RIGHT :
					ax=0;
					break;
				case Keyboard.SPACE :
					ay=0;
					break;
				default :
					break;
			}
		}
		
		
		private function move(tree:Tree):void {
			tree.xpos+=vx;
			tree.ypos+=vy;
			tree.zpos+=vz;
			
			
			//y轴上的坐标判断，否则所有树将一直向上跑
			if (tree.ypos<floor) {
				tree.ypos=floor;
			}
			
			//z轴屏幕环绕
			if (tree.zpos<fl*-1) {
				tree.zpos+=10000;
			}
			if (tree.zpos>10000-fl) {
				tree.zpos-=10000;
			}
			
			var scale:Number = fl / (fl + tree.zpos);
			tree.scaleX=tree.scaleY=scale;
			tree.x=vpX+tree.xpos*scale;
			tree.y=vpY+tree.ypos*scale;
			tree.alpha=scale*0.8 + 0.2;
		}
		
		//z轴排序
		private function sortZ():void {
			trees.sortOn("zpos", Array.DESCENDING | Array.NUMERIC);
			for (var i:uint = 0; i < numTrees; i++) {
				var tree:Tree=trees[i];
				setChildIndex(tree, i);
			}
		}
	}
}

3D缓动：

package {
	import flash.display.Sprite;
	import flash.events.Event;
	public class Easing3D extends Sprite {		
		private var balls:Array;
		private var ballNum:Number=20;
		private var easing:Number=.1;
		private var fl:Number=250;
		private var vpX:Number=stage.stageWidth/2;
		private var vpY:Number=stage.stageHeight/2;

		public function Easing3D() {
			init();
		}
		private function init():void {
			balls=new Array(ballNum);
			for (var i:int=0; i<ballNum; i++) {
				balls[i]=new Ball3D(20,Math.random()*0xffffff);
				balls[i].tx=(Math.random()*2-1)*200;
				balls[i].ty=(Math.random()*2-1)*200;
				balls[i].tz=(Math.random()*2-1)*500;
				addChild(balls[i]);
			}
			addEventListener(Event.ENTER_FRAME, onEnterFrame);
		}
		
		
		private function onEnterFrame(event:Event):void {
			for (var i:int=0; i<ballNum; i++) {
				move(balls[i]);
			}
			sortZ();
		}

		function move(b:Ball3D):void {
			var dx:Number=b.tx-b.xpos;
			var dy:Number=b.ty-b.ypos;
			var dz:Number=b.tz-b.zpos;
			//缓动公式
			b.xpos+=dx*easing;
			b.ypos+=dy*easing;
			b.zpos+=dz*easing;
			var dist:Number=Math.sqrt(dx*dx+dy*dy+dz*dz);
			if (dist<1) {
				b.tx=(Math.random()*2-1)*200;
				b.ty=(Math.random()*2-1)*200;
				b.tz=(Math.random()*2-1)*500;
			}
			if (b.zpos > -fl) {
				var scale:Number = fl / (fl + b.zpos);
				b.scaleX=b.scaleY=scale;
				b.x=vpX+b.xpos*scale;
				b.y=vpY+b.ypos*scale;
				b.alpha=scale*0.7+0.3;
				b.visible=true;
			} else {
				b.visible=false;
			}
		}

		//z轴排序  
		function sortZ():void {
			balls.sortOn("zpos", Array.DESCENDING | Array.NUMERIC);
			for (var i:uint = 0; i < ballNum; i++) {
				var b:Ball3D=balls[i];
				setChildIndex(b, i);
			}

		}


	}
}

当然这个示例中，要对Ball3D做一些改造：

package {
	import flash.display.Sprite;
	public class Ball3D extends Sprite {
		public var radius:Number;
		private var color:uint;
		
		public var xpos:Number=0;
		public var ypos:Number=0;
		public var zpos:Number=0;
		
		public var vx:Number=0;
		public var vy:Number=0;
		public var vz:Number=0;
		
		public var tx:Number=0;
		public var ty:Number=0;
		public var tz:Number=0;
		
		public var mass:Number=1;
		
		public function Ball3D(radius:Number=40, color:uint=0xff0000) {
			this.radius=radius;
			this.color=color;
			init();
		}
		public function init():void {
			graphics.lineStyle(0);
			graphics.beginFill(color);
			graphics.drawCircle(0, 0, radius);
			graphics.endFill();
		}
	}
}

3D弹性运动：

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	public class Spring3D extends Sprite {

		private var balls:Array;
		private var ballNum:Number=20;

		private var spring:Number=.1;
		private var friction:Number=.94;
		private var fl:Number=250;
		private var vpX:Number=stage.stageWidth/2;
		private var vpY:Number=stage.stageHeight/2;
		
		var temp:Number = 0;
		
		public function Spring3D() {
			init();
		}
		private function init():void {
			balls=new Array(ballNum);
			for (var i:int=0; i<ballNum; i++) {
				balls[i]=new Ball3D(20,Math.random()*0xffffff);
				balls[i].tx=(Math.random()*2-1)*200;
				balls[i].ty=(Math.random()*2-1)*200;
				balls[i].tz=(Math.random()*2-1)*300;
				addChild(balls[i]);
			}
			addEventListener(Event.ENTER_FRAME, onEnterFrame);
			
		}
		private function onEnterFrame(event:Event):void {
			for (var i:int=0; i<ballNum; i++) {
				move(balls[i]);
			}
			sortZ();
			
			temp++;
			if (temp>=250){
				reset();
				temp=0;
			}
			//trace(temp);
		}

		function move(b:Ball3D):void {
			var dx:Number=b.tx-b.xpos;
			var dy:Number=b.ty-b.ypos;
			var dz:Number=b.tz-b.zpos;
			b.vx+=dx*spring;
			b.vy+=dy*spring;
			b.vz+=dz*spring;
			b.xpos+=b.vx;
			b.ypos+=b.vy;
			b.zpos+=b.vz;
			b.vx*=friction;
			b.vy*=friction;
			b.vz*=friction;
			if (b.zpos>- fl) {
				var scale:Number = fl / (fl + b.zpos);
				b.scaleX=b.scaleY=scale;
				b.x=vpX+b.xpos*scale;
				b.y=vpY+b.ypos*scale;
				b.alpha=scale*0.8+0.2;
				b.visible=true;
			} else {
				b.visible=false;
			}
		}

		private function reset():void {
			for (var i:int=0; i<ballNum; i++) {
				balls[i].tx=(Math.random()*2-1)*200;
				balls[i].ty=(Math.random()*2-1)*200;
				balls[i].tz=(Math.random()*2-1)*300;
			}
		}

		//z轴排序  
		function sortZ():void {
			balls.sortOn("zpos", Array.DESCENDING | Array.NUMERIC);
			for (var i:uint = 0; i < ballNum; i++) {
				var b:Ball3D=balls[i];
				setChildIndex(b, i);
			}

		}
	}
}

3D坐标旋转：

其实跟2D坐标旋转几乎完全相同，只不过要指定绕哪个轴旋转

绕z轴旋转

x1 = cos(angleZ) * x - sin(angleZ) * y;
y1 = cos(angleZ) * y + sin(angleZ) * x;

绕y轴旋转
x1 = cos(angleY) * x - sin(angleY) * z;
z1 = cos(angleY) * z + sin(angleY) * x;

绕x轴旋转
y1 = cos(angleX) * y - sin(angleX) * z;
z1 = cos(angleX) * z + sin(angleX) * y;

package {
	import flash.display.Sprite;
	import flash.events.Event;
	public class RotateY extends Sprite {
		private var balls:Array;
		private var numBalls:uint=50;

		private var fl:Number=250;
		private var vpX:Number=stage.stageWidth/2;
		private var vpY:Number=stage.stageHeight/2;
		public function RotateY() {
			init();
		}
		private function init():void {
			balls = new Array();
			for (var i:uint = 0; i < numBalls; i++) {
				var ball:Ball3D=new Ball3D(10,Math.random()*0xffffff);
				balls.push(ball);
				ball.xpos=Math.random()*200-100;
				ball.ypos=Math.random()*200-100;
				ball.zpos=(Math.random()*2-1)*100;
				addChild(ball);
			}
			addEventListener(Event.ENTER_FRAME, onEnterFrame);
		}
		private function onEnterFrame(event:Event):void {
			var angleY:Number = (mouseX - vpX) * .0004;//旋转的角度与鼠标的水平位置关联
			for (var i:uint = 0; i < numBalls; i++) {
				var ball:Ball3D=balls[i];
				rotateY(ball, angleY);
			}
			sortZ();
		}
		
		//绕y轴旋转
		private function rotateY(ball:Ball3D, angleY:Number):void {
			var cosY:Number=Math.cos(angleY);
			var sinY:Number=Math.sin(angleY);
			var x1:Number=ball.xpos*cosY-ball.zpos*sinY;
			var z1:Number=ball.zpos*cosY+ball.xpos*sinY;
			ball.xpos=x1;
			ball.zpos=z1;
			if (ball.zpos>- fl) {
				var scale:Number = fl / (fl + ball.zpos);
				ball.scaleX=ball.scaleY=scale;
				ball.x=vpX+ball.xpos*scale;
				ball.y=vpY+ball.ypos*scale;
				ball.alpha = scale*0.8;
				ball.visible=true;
			} else {
				ball.visible=false;
			}
		}
		private function sortZ():void {
			balls.sortOn("zpos", Array.DESCENDING | Array.NUMERIC);
			for (var i:uint = 0; i < numBalls; i++) {
				var ball:Ball3D=balls[i];
				setChildIndex(ball, i);
			}
		}
	}
}

这个示例还可以扩充到3个轴的同时旋转：

var balls:Array;
var numBalls:uint=50;

var fl:Number=250;
var vpx:Number=stage.stageWidth/2;
var vpy:Number=stage.stageHeight/2;

function init():void {
	balls=new Array(numBalls);
	for (var i:uint=0; i<numBalls; i++) {
		var ball:Ball3D=new Ball3D(10,Math.random()*0xffffff);
		balls[i]=ball;
		ball.xpos = (Math.random()*2-1)*100;
		ball.ypos = (Math.random()*2-1)*100;
		ball.zpos = (Math.random()*2-1)*100;
		addChild(ball);
	}
	addEventListener(Event.ENTER_FRAME,EnterFrameHandler);
}

function EnterFrameHandler(e:Event):void {	
	var dx:Number = mouseX - vpx;
	var dy:Number = mouseY - vpy;	
	var angleY:Number =dx*0.0005;
	var angleX:Number =dy*0.0005;
	var angleZ:Number = Math.sqrt(dx*dx + dy*dy)*0.0005;
	
	if (dx>0){angleZ *=-1;}//以鼠标所在点的x坐标相对于消失点的位置为判断依据，左侧z轴正向旋转，右侧z轴反向旋转
	
	for (var i:uint; i<numBalls; i++) {
		var b:Ball3D=balls[i];
		rotateX(b,angleX);
		rotateY(b,angleY);
		rotateZ(b,angleZ);
		doPerspective(b);
	}
	sortZ();
}

//x轴的坐标旋转
function rotateX(ball:Ball3D, angleX:Number):void {
	var cosX:Number=Math.cos(angleX);
	var sinX:Number=Math.sin(angleX);
	var y1:Number=ball.ypos*cosX-ball.zpos*sinX;
	var z1:Number=ball.zpos*cosX+ball.ypos*sinX;
	ball.ypos=y1;
	ball.zpos=z1;
}

//y轴的坐标旋转
function rotateY(ball:Ball3D, angleY:Number):void {
	var cosY:Number=Math.cos(angleY);
	var sinY:Number=Math.sin(angleY);
	var x1:Number=ball.xpos*cosY-ball.zpos*sinY;
	var z1:Number=ball.zpos*cosY+ball.xpos*sinY;
	ball.xpos=x1;
	ball.zpos=z1;
}

//z轴的坐标旋转
function rotateZ(ball:Ball3D, angleZ:Number):void {
	var cosZ:Number=Math.cos(angleZ);
	var sinZ:Number=Math.sin(angleZ);
	var x1:Number=ball.xpos*cosZ-ball.ypos*sinZ;
	var y1:Number=ball.ypos*cosZ+ball.xpos*sinZ;
	ball.xpos=x1;
	ball.ypos=y1;
}

//3D透视处理
function doPerspective(ball:Ball3D):void {
	if (ball.zpos>-fl) {
		var scale:Number = fl / (fl + ball.zpos);
		ball.scaleX=ball.scaleY=scale;
		ball.x=vpx+ball.xpos*scale;
		ball.y=vpy+ball.ypos*scale;
		//ball.alpha = scale*0.65;
		ball.visible=true;
	} else {
		ball.visible=false;
	}
}

//z轴排序
function sortZ():void {
	balls.sortOn("zpos",Array.DESCENDING|Array.NUMERIC);
	for (var i:uint=0; i<numBalls; i++) {
		setChildIndex(balls[i],i);
	}
}

init();

3D碰撞检测：

基本原理仍然可以套用前面讲过的“基于距离的检测”，当二个球之间的距离小于二球的半径合时，即认为发生了碰撞，至于碰撞检测出来以后再如何处理，就要发挥想象了

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.geom.ColorTransform;
	public class Collision3D extends Sprite {
		private var balls:Array;
		private var numBalls:uint=8;
		private var fl:Number=250;
		private var vpX:Number=stage.stageWidth/2;

		private var vpY:Number=stage.stageHeight/2;
		private var top:Number=-100;
		private var bottom:Number=100;
		private var left:Number=-100;
		private var right:Number=100;
		private var front:Number=100;
		private var back:Number=-100;
		public function Collision3D() {
			init();
		}
		private function init():void {
			balls = new Array();
			for (var i:uint = 0; i < numBalls; i++) {
				var ball:Ball3D=new Ball3D(10);
				balls.push(ball);
				ball.xpos=Math.random()*400-200;
				ball.ypos=Math.random()*400-200;
				ball.zpos=Math.random()*400-200;
				ball.vx=Math.random()*10-5;
				ball.vy=Math.random()*10-5;
				ball.vz=Math.random()*10-5;
				addChild(ball);
			}
			addEventListener(Event.ENTER_FRAME, onEnterFrame);
		}
		private function onEnterFrame(event:Event):void {
			for (var i:uint = 0; i < numBalls; i++) {
				var ball:Ball3D=balls[i];
				move(ball);
			}
			for (i = 0; i < numBalls - 1; i++) {
				var ballA:Ball3D=balls[i];
				for (var j:uint = i + 1; j < numBalls; j++) {
					var ballB:Ball3D=balls[j];
					var dx:Number=ballA.xpos-ballB.xpos;
					var dy:Number=ballA.ypos-ballB.ypos;
					var dz:Number=ballA.zpos-ballB.zpos;
					var dist:Number=Math.sqrt(dx*dx+dy*dy+dz*dz);
					if (dist<ballA.radius+ballB.radius) {
						var newTransform:ColorTransform =
						new ColorTransform(0, 1, 1, 1, Math.random()*255, Math.random()*255, Math.random()*255, 0);
						ballA.transform.colorTransform=newTransform;
						ballB.transform.colorTransform=newTransform;
					}
				}
			}
			sortZ();
		}
		private function move(ball:Ball3D):void {

			var radius:Number=ball.radius;
			ball.xpos+=ball.vx;
			ball.ypos+=ball.vy;
			ball.zpos+=ball.vz;
			if (ball.xpos+radius>right) {
				ball.xpos=right-radius;
				ball.vx*=-1;
			} else if (ball.xpos - radius < left) {
				ball.xpos=left+radius;
				ball.vx*=-1;
			}
			if (ball.ypos+radius>bottom) {
				ball.ypos=bottom-radius;
				ball.vy*=-1;
			} else if (ball.ypos - radius < top) {
				ball.ypos=top+radius;
				ball.vy*=-1;
			}
			if (ball.zpos+radius>front) {
				ball.zpos=front-radius;
				ball.vz*=-1;
			} else if (ball.zpos - radius < back) {
				ball.zpos=back+radius;
				ball.vz*=-1;
			}
			if (ball.zpos>- fl) {
				var scale:Number = fl / (fl + ball.zpos);
				ball.scaleX=ball.scaleY=scale;
				ball.x=vpX+ball.xpos*scale;
				ball.y=vpY+ball.ypos*scale;
				ball.visible=true;
			} else {
				ball.visible=false;
			}
		}
		private function sortZ():void {
			balls.sortOn("zpos", Array.DESCENDING | Array.NUMERIC);
			for (var i:uint = 0; i < numBalls; i++) {
				var ball:Ball3D=balls[i];
				setChildIndex(ball, i);
			}
		}
	}
}

上面的示例中，生二球发生碰撞后，颜色变为随机色（当然您可以处理根据前面讲过的动量守恒原理对速度做处理，不过在3D空间中要同时计算x,y,z三个轴的速度大小以及方向，运算量是比较大的，各位有兴趣可自行尝试）