Flash/Flex学习笔记(50)：3D线条与填充

3D线条：把上一篇中的3D坐标旋转示例稍做修改，用线把各个小球连接起来即可。

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

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(0,0x000000);//注意：我们只需要线条，不需要小球，所以这里把小球的半径设置为0
		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);
	}

	//画线(注：画线处理，只能在所有旋转及透视完成之后再处理，否则如果先画好线，再处理旋转的话，因为小球的坐标已经变了，所以看上去线条的接头有可能不连续)
	graphics.clear();
	graphics.lineStyle(0);
	graphics.moveTo(balls[0].x, balls[0].y);
	for (i = 1; i < numBalls; i++) {		
		graphics.lineTo(balls[i].x, balls[i].y);
	}
	graphics.lineTo(balls[0].x, balls[0].y);

	//sortZ(); //注意:这里不能加z轴排序，因为z轴排序会不断修正小球的数组索引，导致上面的每跟线条的连接两端不断变化，在视觉上就产生了抖动
}

//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();

如果从性能优化的角度考虑：Ball3D类用在这里比较浪费，Ball3D继承自Sprite，而我们在这里其实仅仅只要一个拥有少数几个属性(比如xpos,ypos,zpos之类)的点而已，对于Sprite默认的其它属性，包括事件支持，都是不需要的。

所以...我们又多出了一个新类Point3D

package {
	public class Point3D {
		public var fl:Number=250;
		private var vpX:Number=0;
		private var vpY:Number=0;
		private var cX:Number=0;
		private var cY:Number=0;
		private var cZ:Number=0;
		public var x:Number=0;
		public var y:Number=0;
		public var z:Number=0;		

		public function Point3D(x:Number=0, y:Number=0, z:Number=0) {
			this.x=x;
			this.y=y;
			this.z=z;
		}
		public function setVanishingPoint(vpX:Number, vpY:Number):void {
			this.vpX=vpX;
			this.vpY=vpY;
		}
		public function setCenter(cX:Number,cY:Number,cZ:Number=0):void {
			this.cX=cX;
			this.cY=cY;
			this.cZ=cZ;
		}
		public function get screenX():Number {
			var scale:Number = fl / (fl + z + cZ);
			return vpX + cX + x * scale;
		}
		public function get screenY():Number {
			var scale:Number = fl / (fl + z + cZ);
			return vpY + cY + y * scale;
		}
		public function rotateX(angleX:Number):void {
			var cosX:Number=Math.cos(angleX);
			var sinX:Number=Math.sin(angleX);
			var y1:Number=y*cosX-z*sinX;
			var z1:Number=z*cosX+y*sinX;
			y=y1;
			z=z1;
		}
		public function rotateY(angleY:Number):void {
			var cosY:Number=Math.cos(angleY);
			var sinY:Number=Math.sin(angleY);
			var x1:Number=x*cosY-z*sinY;
			var z1:Number=z*cosY+x*sinY;
			x=x1;
			z=z1;
		}
		public function rotateZ(angleZ:Number):void {
			var cosZ:Number=Math.cos(angleZ);
			var sinZ:Number=Math.sin(angleZ);
			var x1:Number=x*cosZ-y*sinZ;
			var y1:Number=y*cosZ+x*sinZ;
			x=x1;
			y=y1;
		}
	}
}

利用这个类重写最开头的示例：

package {
	import flash.display.Sprite;
	import flash.events.Event;
	public class Lines3D_B extends Sprite {
		private var points:Array;
		private var numPoints:uint=50;
		private var fl:Number=250;
		private var vpX:Number=stage.stageWidth/2;
		private var vpY:Number=stage.stageHeight/2;

		public function Lines3D_B() {
			init();
		}
		private function init():void {
			points = new Array();
			for (var i:uint = 0; i < numPoints; i++) {
				var point:Point3D=new Point3D(Math.random()*200-100,Math.random()*200-100,Math.random()*200-100);
				point.setVanishingPoint(vpX, vpY);
				points.push(point);
			}
			addEventListener(Event.ENTER_FRAME, onEnterFrame);
		}
		private function onEnterFrame(event:Event):void {
			var angleX:Number = (mouseY - vpY) * .001;
			var angleY:Number = (mouseX - vpX) * .001;
			for (var i:uint = 0; i < numPoints; i++) {
				var point:Point3D=points[i];
				point.rotateX(angleX);
				point.rotateY(angleY);
			}
			graphics.clear();
			graphics.lineStyle(0);
			graphics.moveTo(points[0].screenX, points[0].screenY);
			for (i = 1; i < numPoints; i++) {
				graphics.lineTo(points[i].screenX, points[i].screenY);
			}
		}
	}
}

上面的示例各线条的节点都是随机分布在三维空间的，如果把这些点按一定的顺序排列好，结果会更有趣：

上图示意了一个z轴平面的正方形，其4个顶点的(x,y,z)坐标如图所示

package {
	import flash.display.Sprite;
	import flash.events.Event;
	public class Square3D extends Sprite {
		private var points:Array;
		private var numPoints:uint=4;
		private var fl:Number=250;
		private var vpX:Number=stage.stageWidth/2;
		private var vpY:Number=stage.stageHeight/2;
		public function Square3D() {
			init();
		}
		
		private function init():void {
			points = new Array();
			points[0]=new Point3D(-80,-80,50);
			points[1]=new Point3D(80,-80,50);
			points[2]=new Point3D(80,80,50);
			points[3]=new Point3D(-80,80,50);
			
			//设置每个点的消失点
			for (var i:uint = 0; i < numPoints; i++) {
				points[i].setVanishingPoint(vpX, vpY);
			}
			
			addEventListener(Event.ENTER_FRAME, EnterFrameHandler);
		}
		private function EnterFrameHandler(e:Event):void {
			var dx:Number = mouseX - vpX;
			var dy:Number = mouseY - vpY;
			
			var angleX:Number = dy * 0.001;
			var angleY:Number = dx * 0.001;
			var angleZ:Number = Math.sqrt(dx*dx+dy*dy)*0.0005;
			if (dx>0){angleZ*=-1;}
			for (var i:uint = 0; i < numPoints; i++) {
				var point:Point3D=points[i];
				point.rotateX(angleX);
				point.rotateY(angleY);
				point.rotateZ(angleZ);
			}
			graphics.clear();
			graphics.lineStyle(0);
			graphics.moveTo(points[0].screenX, points[0].screenY);			
			for (i = 1; i < numPoints; i++) {
				graphics.lineTo(points[i].screenX, points[i].screenY);
			}
			graphics.lineTo(points[0].screenX, points[0].screenY);
		}
	}
}

ok，我们成功的搞出了一个在三维空间晃荡的正方形!

理解这种思路后，理论上可以做出任意的几何形状，比如下面这张图：

var pointNum:int=10;
var points:Array = new Array();
var vpX:Number=stage.stageWidth/2;
var vpY:Number=stage.stageHeight/2;

function Init():void {
	points.push(new Point3D(-100,-140,0));
	points.push(new Point3D(100,-140,0));
	points.push(new Point3D(100,-90,0));
	points.push(new Point3D(-40,-90,0));
	points.push(new Point3D(-40,-40,0));
	points.push(new Point3D(80,-40,0));
	points.push(new Point3D(80,10,0));
	points.push(new Point3D(-40,10,0));
	points.push(new Point3D(-40,140,0));
	points.push(new Point3D(-100,140,0));

	for (var i:uint = 0; i < pointNum; i++) {
		points[i].setVanishingPoint(vpX, vpY);
		points[i].setCenter(0, 0, 100);
	}
	addEventListener(Event.ENTER_FRAME, EnterFrameHandler);
}


function EnterFrameHandler(e:Event):void {
	var dx:Number=mouseX-vpX;
	var dy:Number=mouseY-vpY;
	var angleX:Number=dy*0.001;
	var angleY:Number=dx*0.001;
	var angleZ:Number=Math.sqrt(dx*dx+dy*dy)*0.0005;
	if (dx>0) {
		angleZ*=-1;
	}
	for (var i:uint = 0; i < pointNum; i++) {
		var point:Point3D=points[i];
		point.rotateX(angleX);
		point.rotateY(angleY);
		point.rotateZ(angleZ);
	}
	Draw();
}

function Draw():void {
	graphics.clear();
	graphics.lineStyle(1);
	graphics.beginFill(0xff0000);
	graphics.moveTo(points[0].screenX,points[0].screenY);
	for (var i:uint=1; i<pointNum; i++) {
		graphics.lineTo(points[i].screenX,points[i].screenY);
	}
	graphics.lineTo(points[0].screenX,points[0].screenY);
	graphics.endFill();
}

Init();

如果形状是没有空洞的，上面的办法无疑是最方便的办法，但是如果形状本身上有“洞”，比如下面这样：

如果仍然套用上面的方法，至少还得多写段代码处理中间这个空洞的"画线"，再极端一点想象：如果形状中的空洞不止一个，有很多个的话，处理的代码就更复杂了。通常在3D编程中，业内更倾向于用“三角形”来处理这种复杂情况。如上图所示：整个A可以看作是0到10一共是11个小三角形组成的，可以先把三角形抽象成一个类

package 
{
	import flash.display.Graphics;
	public class Triangle
	{
		private var pointA:Point3D;
		private var pointB:Point3D;
		private var pointC:Point3D;
		private var color:uint;
		public function Triangle(a:Point3D, b:Point3D, c:Point3D, color:uint)
		{
			pointA = a;
			pointB = b;
			pointC = c;
			this.color = color;
		}
		public function draw(g:Graphics):void
		{
			g.beginFill(color);
			g.moveTo(pointA.screenX, pointA.screenY);
			g.lineTo(pointB.screenX, pointB.screenY);
			g.lineTo(pointC.screenX, pointC.screenY);
			g.lineTo(pointA.screenX, pointA.screenY);
			g.endFill();
		}
	}
}

接下来的事情就比较简单了，定义一个三角形数组，然后根据顶点坐标初始化这个数组，然后各顶点的坐标该咋旋转就咋旋转，完事之后重新填充绘制三角形数组。

var pointNum:int = 11;
var points:Array = new Array(pointNum);
var triangles:Array;//三角形数组
var vpX:Number = stage.stageWidth / 2;
var vpY:Number = stage.stageHeight / 2;

function Init():void {
	points[0] = new Point3D(-50,-250,100);
	points[1] = new Point3D(50,-250,100);
	points[2] = new Point3D(200,250,100);
	points[3] = new Point3D(100,250,100);
	points[4] = new Point3D(50,100,100);
	points[5] = new Point3D(-50,100,100);
	points[6] = new Point3D(-100,250,100);
	points[7] = new Point3D(-200,250,100);
	points[8] = new Point3D(0,-150,100);
	points[9] = new Point3D(50,0,100);
	points[10] = new Point3D(-50,0,100);
	for (var i:uint = 0; i < pointNum; i++) {
		points[i].setVanishingPoint(vpX, vpY);
		points[i].setCenter(0, 0, 450);
	}
	
	//根据顶点赋值三角形数组
	triangles = new Array();
	triangles[0] = new Triangle(points[0],points[1],points[8],0xff0000);
	triangles[1] = new Triangle(points[1],points[9],points[8],0xff0000);
	triangles[2] = new Triangle(points[1],points[2],points[9],0xff0000);
	triangles[3] = new Triangle(points[2],points[4],points[9],0xff0000);
	triangles[4] = new Triangle(points[2],points[3],points[4],0xff0000);
	triangles[5] = new Triangle(points[4],points[5],points[9],0xff0000);
	triangles[6] = new Triangle(points[9],points[5],points[10],0xff0000);
	triangles[7] = new Triangle(points[5],points[6],points[7],0xff0000);
	triangles[8] = new Triangle(points[5],points[7],points[10],0xff0000);
	triangles[9] = new Triangle(points[0],points[10],points[7],0xff0000);
	triangles[10] = new Triangle(points[0],points[8],points[10],0xff0000);

	addEventListener(Event.ENTER_FRAME, EnterFrameHandler);
}

function EnterFrameHandler(e:Event):void {
	var dx:Number = mouseX - vpX;
	var dy:Number = mouseY - vpY;
	var angleX:Number = dy * 0.001;
	var angleY:Number = dx * 0.001;
	var angleZ:Number = Math.sqrt(dx * dx + dy * dy) * 0.0005;
	if (dx > 0) {
		angleZ *=  -1;
	}
	
	for (var i:uint = 0; i < pointNum; i++) {
		var point:Point3D = points[i];
		point.rotateX(angleX);
		point.rotateY(angleY);
		point.rotateZ(angleZ);
	}
	graphics.clear();
	
	//画三角形
	for (i=0; i<triangles.length; i++) {
		triangles[i].draw(graphics);
	}
}

Init();

旋转的立方体

示意图如下:

var pointNum:int = 8;
var points:Array = new Array(pointNum);
var triangles:Array;//三角形数组
var vpX:Number = stage.stageWidth / 2;
var vpY:Number = stage.stageHeight / 2;

function Init():void {
	//前面四个角
	points[0] = new Point3D(-100,-100,-100);
	points[1] = new Point3D( 100,-100,-100);
	points[2] = new Point3D( 100, 100,-100);
	points[3] = new Point3D(-100, 100,-100);
	//后面四个角
	points[4] = new Point3D(-100,-100, 100);
	points[5] = new Point3D( 100,-100, 100);
	points[6] = new Point3D( 100, 100, 100);
	points[7] = new Point3D(-100, 100, 100);	
	
	for (var i:uint = 0; i < pointNum; i++) {
		points[i].setVanishingPoint(vpX, vpY);
		points[i].setCenter(0, 0, 100);
	}
	
	//根据顶点赋值三角形数组
	triangles = new Array();
	
	var _t:Number = Math.random() * 0xffffff;
	
	triangles[0] = new Triangle(points[0],points[1],points[2],_t);
	triangles[1] = new Triangle(points[0],points[2],points[3],_t);
	
	_t = Math.random() * 0xffffff;
	triangles[2] = new Triangle(points[0],points[5],points[1],_t);
	triangles[3] = new Triangle(points[0],points[4],points[5],_t);
	
	_t = Math.random() * 0xffffff;
	triangles[4] = new Triangle(points[4],points[6],points[5],_t);
	triangles[5] = new Triangle(points[4],points[7],points[6],_t);
	
	_t = Math.random() * 0xffffff;
	triangles[6] = new Triangle(points[3],points[2],points[6],_t);
	triangles[7] = new Triangle(points[3],points[6],points[7],_t);
	
	_t = Math.random() * 0xffffff;
	triangles[8] = new Triangle(points[1],points[5],points[6],_t);
	triangles[9] = new Triangle(points[1],points[6],points[2],_t);
	
	_t = Math.random() * 0xffffff;
	triangles[10] = new Triangle(points[4],points[0],points[3],_t);
	triangles[11] = new Triangle(points[4],points[3],points[7],_t);

	addEventListener(Event.ENTER_FRAME, EnterFrameHandler);
}

function EnterFrameHandler(e:Event):void {
	var dx:Number = mouseX - vpX;
	var dy:Number = mouseY - vpY;
	var angleX:Number = dy * 0.001;
	var angleY:Number = dx * 0.001;
	var angleZ:Number = Math.sqrt(dx * dx + dy * dy) * 0.0005;
	if (dx > 0) {
		angleZ *=  -1;
	}
	
	for (var i:uint = 0; i < pointNum; i++) {
		var point:Point3D = points[i];
		point.rotateX(angleX);
		point.rotateY(angleY);
		point.rotateZ(angleZ);
	}
	graphics.clear();
	
	//画三角形
	for (i=0; i<triangles.length; i++) {
		triangles[i].draw(graphics);
	}
}

Init();

当然，在学习"背面剔除"前，为了防止六个面同时填充颜色相互遮挡，我们可以先把Triangle.cs中的draw方法临时修改一下

public function draw(g:Graphics):void
{
	g.beginFill(color,0.4);//改成40%透明度填充
	g.moveTo(pointA.screenX, pointA.screenY);
	g.lineTo(pointB.screenX, pointB.screenY);
	g.lineTo(pointC.screenX, pointC.screenY);
	g.lineTo(pointA.screenX, pointA.screenY);
	g.endFill();
}

利用这个原理，可以创建更多复杂的3D模型

3D金字塔型：

var pointNum:int = 5;
var points:Array = new Array(pointNum);
var triangles:Array;//三角形数组
var vpX:Number = stage.stageWidth / 2;
var vpY:Number = stage.stageHeight / 2;

function Init():void {
	points[0] = new Point3D(0,-200,0);
	points[1] = new Point3D(200,200,-200);
	points[2] = new Point3D(-200,200,-200);
	points[3] = new Point3D(-200,200,200);
	points[4] = new Point3D(200,200,200);

	for (var i:uint = 0; i < pointNum; i++) {
		points[i].setVanishingPoint(vpX, vpY);
		points[i].setCenter(0, 0, 450);
	}

	//根据顶点赋值三角形数组
	triangles = new Array();

	var _t:Number = Math.random() * 0xffffff;
	triangles[0] = new Triangle(points[0],points[1],points[2],_t);
	_t = Math.random() * 0xffffff;
	triangles[1] = new Triangle(points[0],points[2],points[3],_t);
	_t = Math.random() * 0xffffff;
	triangles[2] = new Triangle(points[0],points[3],points[4],_t);
	_t = Math.random() * 0xffffff;
	triangles[3] = new Triangle(points[0],points[4],points[1],_t);
	_t = Math.random() * 0xffffff;
	triangles[4] = new Triangle(points[1],points[3],points[2],_t);
	//_t = Math.random() * 0xffffff;
	triangles[5] = new Triangle(points[1],points[4],points[3],_t);

	addEventListener(Event.ENTER_FRAME, EnterFrameHandler);
}

function EnterFrameHandler(e:Event):void {
	var dx:Number = mouseX - vpX;
	var dy:Number = mouseY - vpY;
	var angleX:Number = dy * 0.001;
	var angleY:Number = dx * 0.001;
	var angleZ:Number = Math.sqrt(dx * dx + dy * dy) * 0.0005;
	if (dx > 0) {
		angleZ *=  -1;
	}

	for (var i:uint = 0; i < pointNum; i++) {
		var point:Point3D = points[i];
		point.rotateX(angleX);
		point.rotateY(angleY);
		point.rotateZ(angleZ);
	}
	graphics.clear();

	//画三角形;
	for (i=0; i<triangles.length; i++) {
		triangles[i].draw(graphics);
	}
}

Init();

把前面示例中的A字型示例扩展一下，变成二层(即：再复制一层A，然后在z轴上推移若干距离，然后用线条连起来)

var pointNum:int = 22;
var points:Array = new Array(pointNum);
var triangles:Array;//三角形数组
var vpX:Number = stage.stageWidth / 2;
var vpY:Number = stage.stageHeight / 2;

function Init():void {
	points[0] = new Point3D(-50,-250,-50);
	points[1] = new Point3D(50,-250,-50);
	points[2] = new Point3D(200,250,-50);
	points[3] = new Point3D(100,250,-50);
	points[4] = new Point3D(50,100,-50);
	points[5] = new Point3D(-50,100,-50);
	points[6] = new Point3D(-100,250,-50);
	points[7] = new Point3D(-200,250,-50);
	points[8] = new Point3D(0,-150,-50);
	points[9] = new Point3D(50,0,-50);
	points[10] = new Point3D(-50,0,-50);
	points[11] = new Point3D(-50,-250,50);
	points[12] = new Point3D(50,-250,50);
	points[13] = new Point3D(200,250,50);
	points[14] = new Point3D(100,250,50);
	points[15] = new Point3D(50,100,50);
	points[16] = new Point3D(-50,100,50);
	points[17] = new Point3D(-100,250,50);
	points[18] = new Point3D(-200,250,50);
	points[19] = new Point3D(0,-150,50);
	points[20] = new Point3D(50,0,50);
	points[21] = new Point3D(-50,0,50);

	for (var i:uint = 0; i < pointNum; i++) {
		points[i].setVanishingPoint(vpX, vpY);
		points[i].setCenter(0, 0, 450);
	}

	//根据顶点赋值三角形数组
	triangles = new Array();

	var _t:Number = Math.random()*0xffffff;
	//_t = 0xff0000;
	
	triangles[0] = new Triangle(points[0],points[1],points[8],_t);
	triangles[1] = new Triangle(points[1],points[9],points[8],_t);
	triangles[2] = new Triangle(points[1],points[2],points[9],_t);
	triangles[3] = new Triangle(points[2],points[4],points[9],_t);
	triangles[4] = new Triangle(points[2],points[3],points[4],_t);
	triangles[5] = new Triangle(points[4],points[5],points[9],_t);
	triangles[6] = new Triangle(points[9],points[5],points[10],_t);
	triangles[7] = new Triangle(points[5],points[6],points[7],_t);
	triangles[8] = new Triangle(points[5],points[7],points[10],_t);
	triangles[9] = new Triangle(points[0],points[10],points[7],_t);
	triangles[10] = new Triangle(points[0],points[8],points[10],_t);
	
	_t = Math.random()*0xffffff;
	//_t = 0x000000;
	
	triangles[11] = new Triangle(points[11],points[19],points[12],_t);
	triangles[12] = new Triangle(points[12],points[19],points[20],_t);
	triangles[13] = new Triangle(points[12],points[20],points[13],_t);
	triangles[14] = new Triangle(points[13],points[20],points[15],_t);
	triangles[15] = new Triangle(points[13],points[15],points[14],_t);
	triangles[16] = new Triangle(points[15],points[20],points[16],_t);
	triangles[17] = new Triangle(points[20],points[21],points[16],_t);
	triangles[18] = new Triangle(points[16],points[18],points[17],_t);
	triangles[19] = new Triangle(points[16],points[21],points[18],_t);
	triangles[20] = new Triangle(points[11],points[18],points[21],_t);
	triangles[21] = new Triangle(points[11],points[21],points[19],_t);
	
	_t = Math.random()*0xffffff;
	//_t = 0x0000ff;
	
	triangles[22] = new Triangle(points[0],points[11],points[1],_t);
	triangles[23] = new Triangle(points[11],points[12],points[1],_t);
	triangles[24] = new Triangle(points[1],points[12],points[2],_t);
	triangles[25] = new Triangle(points[12],points[13],points[2],_t);
	triangles[26] = new Triangle(points[3],points[2],points[14],_t);
	triangles[27] = new Triangle(points[2],points[13],points[14],_t);
	triangles[28] = new Triangle(points[4],points[3],points[15],_t);
	triangles[29] = new Triangle(points[3],points[14],points[15],_t);
	triangles[30] = new Triangle(points[5],points[4],points[16],_t);
	triangles[31] = new Triangle(points[4],points[15],points[16],_t);
	triangles[32] = new Triangle(points[6],points[5],points[17],_t);
	triangles[33] = new Triangle(points[5],points[16],points[17],_t);
	triangles[34] = new Triangle(points[7],points[6],points[18],_t);
	triangles[35] = new Triangle(points[6],points[17],points[18],_t);
	triangles[36] = new Triangle(points[0],points[7],points[11],_t);
	triangles[37] = new Triangle(points[7],points[18],points[11],_t);
	triangles[38] = new Triangle(points[8],points[9],points[19],_t);
	triangles[39] = new Triangle(points[9],points[20],points[19],_t);
	triangles[40] = new Triangle(points[9],points[10],points[20],_t);
	triangles[41] = new Triangle(points[10],points[21],points[20],_t);
	triangles[42] = new Triangle(points[10],points[8],points[21],_t);
	triangles[43] = new Triangle(points[8],points[19],points[21],_t);

	addEventListener(Event.ENTER_FRAME, EnterFrameHandler);
}

function EnterFrameHandler(e:Event):void {
	var dx:Number = mouseX - vpX;
	var dy:Number = mouseY - vpY;
	var angleX:Number = dy * 0.001;
	var angleY:Number = dx * 0.001;
	var angleZ:Number = Math.sqrt(dx * dx + dy * dy) * 0.0005;
	if (dx > 0) {
		angleZ *=  -1;
	}

	for (var i:uint = 0; i < pointNum; i++) {
		var point:Point3D = points[i];
		point.rotateX(angleX);
		point.rotateY(angleY);
		point.rotateZ(angleZ);
	}
	graphics.clear();

	//画三角形;
	for (i=0; i<triangles.length; i++) {
		triangles[i].draw(graphics);
	}
}

Init();

3D旋转的圆筒：

var pointNum:int = 40;
var numFaces:int = 20;
var points:Array = new Array(pointNum);
var triangles:Array;//三角形数组
var vpX:Number = stage.stageWidth / 2;
var vpY:Number = stage.stageHeight / 2;

function Init():void {
	points = new Array();
	triangles = new Array();
	var index:uint = 0;
	for (var i:uint = 0; i < numFaces; i++) {
		var angle:Number = Math.PI * 2 / numFaces * i;
		var xpos:Number = Math.cos(angle) * 200;
		var ypos:Number = Math.sin(angle) * 200;
		points[index] = new Point3D(xpos,ypos,-100);
		points[index + 1] = new Point3D(xpos,ypos,100);
		index +=  2;
	}
	for (i = 0; i < points.length; i++) {
		points[i].setVanishingPoint(vpX, vpY);
		points[i].setCenter(0, 0, 300);
	}
	index = 0;
	var _t:Number = 0;
	for (i = 0; i < numFaces - 1; i++) {
		_t = Math.random() * 0xffffff;
		triangles[index] = new Triangle(points[index],points[index + 3],points[index + 1],_t);
		triangles[index + 1] = new Triangle(points[index],points[index + 2],points[index + 3],_t);
		index +=  2;
	}
	triangles[index] = new Triangle(points[index],points[1],points[index + 1],_t);
	triangles[index + 1] = new Triangle(points[index],points[0],points[1],_t);
	addEventListener(Event.ENTER_FRAME, EnterFrameHandler);
}

function EnterFrameHandler(e:Event):void {
	var dx:Number = mouseX - vpX;
	var dy:Number = mouseY - vpY;
	var angleX:Number = dy * 0.001;
	var angleY:Number = dx * 0.001;
	var angleZ:Number = Math.sqrt(dx * dx + dy * dy) * 0.0005;
	if (dx > 0) {
		angleZ *=  -1;
	}

	for (var i:uint = 0; i < pointNum; i++) {
		var point:Point3D = points[i];
		point.rotateX(angleX);
		point.rotateY(angleY);
		point.rotateZ(angleZ);
	}
	graphics.clear();

	//画三角形;
	for (i=0; i<triangles.length; i++) {
		triangles[i].draw(graphics);
	}
}

Init();

这个的处理思路跟前面的有些不同：先弄二个同心圆，但一个在前，一个在后，前后错开。然后每个圆等分，得到一系列点，然后把这二个圆上的点连接起来，得到一系列的三角形面。

注：为了更直观的显示，Triangle.cs的draw方法还要增加一行g.lineStyle(1,0x454545); 用来勾划三角形的连线。