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

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

show sourceview source

print?

001
var balls:Array;

002
var numBalls:uint=30;

003

004
var fl:Number=250;

005
var vpx:Number=stage.stageWidth/2;

006
var vpy:Number=stage.stageHeight/2;

007

008
function init():void {

009
balls=new Array(numBalls);

010
for (var i:uint=0; i<numBalls; i++) {

011
var ball:Ball3D=new Ball3D(0,0x000000);//注意：我们只需要线条，不需要小球，所以这里把小球的半径设置为0

012
balls[i]=ball;

013
ball.xpos = (Math.random()*2-1)*100;

014
ball.ypos = (Math.random()*2-1)*100;

015
ball.zpos = (Math.random()*2-1)*100;

016
addChild(ball);

017
}

018
addEventListener(Event.ENTER_FRAME,EnterFrameHandler);

019
}

020

021
function EnterFrameHandler(e:Event):void {

022
var dx:Number=mouseX-vpx;

023
var dy:Number=mouseY-vpy;

024
var angleY:Number=dx*0.0005;

025
var angleX:Number=dy*0.0005;

026
var angleZ:Number=Math.sqrt(dx*dx+dy*dy)*0.0005;

027

028
if (dx>0) {

029
angleZ*=-1;

030
}//以鼠标所在点的x坐标相对于消失点的位置为判断依据，左侧z轴正向旋转，右侧z轴反向旋转

031

032
for (var i:uint; i<numBalls; i++) {

033
var b:Ball3D=balls[i];

034
rotateX(b,angleX);

035
rotateY(b,angleY);

036
rotateZ(b,angleZ);

037
doPerspective(b);

038
}

039

040
//画线(注：画线处理，只能在所有旋转及透视完成之后再处理，否则如果先画好线，再处理旋转的话，因为小球的坐标已经变了，所以看上去线条的接头有可能不连续)

041
graphics.clear();

042
graphics.lineStyle(0);

043
graphics.moveTo(balls[0].x, balls[0].y);

044
for (i = 1; i < numBalls; i++) {     

045
graphics.lineTo(balls[i].x, balls[i].y);

046
}

047
graphics.lineTo(balls[0].x, balls[0].y);

048

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

050
}

051

052
//x轴的坐标旋转

053
function rotateX(ball:Ball3D, angleX:Number):void {

054
var cosX:Number=Math.cos(angleX);

055
var sinX:Number=Math.sin(angleX);

056
var y1:Number=ball.ypos*cosX-ball.zpos*sinX;

057
var z1:Number=ball.zpos*cosX+ball.ypos*sinX;

058
ball.ypos=y1;

059
ball.zpos=z1;

060
}

061

062
//y轴的坐标旋转

063
function rotateY(ball:Ball3D, angleY:Number):void {

064
var cosY:Number=Math.cos(angleY);

065
var sinY:Number=Math.sin(angleY);

066
var x1:Number=ball.xpos*cosY-ball.zpos*sinY;

067
var z1:Number=ball.zpos*cosY+ball.xpos*sinY;

068
ball.xpos=x1;

069
ball.zpos=z1;

070
}

071

072
//z轴的坐标旋转

073
function rotateZ(ball:Ball3D, angleZ:Number):void {

074
var cosZ:Number=Math.cos(angleZ);

075
var sinZ:Number=Math.sin(angleZ);

076
var x1:Number=ball.xpos*cosZ-ball.ypos*sinZ;

077
var y1:Number=ball.ypos*cosZ+ball.xpos*sinZ;

078
ball.xpos=x1;

079
ball.ypos=y1;

080
}

081

082
//3D透视处理

083
function doPerspective(ball:Ball3D):void {

084
if (ball.zpos>- fl) {

085
var scale:Number = fl / (fl + ball.zpos);

086
ball.scaleX=ball.scaleY=scale;

087
ball.x=vpx+ball.xpos*scale;

088
ball.y=vpy+ball.ypos*scale;

089
//ball.alpha = scale*0.65;

090
ball.visible=true;

091
} else {

092
ball.visible=false;

093
}

094
}

095

096
//z轴排序

097
function sortZ():void {

098
balls.sortOn("zpos",Array.DESCENDING|Array.NUMERIC);

099
for (var i:uint=0; i<numBalls; i++) {

100
setChildIndex(balls[i],i);

101
}

102
}

103

104
init();

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

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

show sourceview source

print?

01
package {

02
public class Point3D {

03
public var fl:Number=250;

04
private var vpX:Number=0;

05
private var vpY:Number=0;

06
private var cX:Number=0;

07
private var cY:Number=0;

08
private var cZ:Number=0;

09
public var x:Number=0;

10
public var y:Number=0;

11
public var z:Number=0;      

12

13
public function Point3D(x:Number=0, y:Number=0, z:Number=0) {

14
this.x=x;

15
this.y=y;

16
this.z=z;

17
}

18
public function setVanishingPoint(vpX:Number, vpY:Number):void {

19
this.vpX=vpX;

20
this.vpY=vpY;

21
}

22
public function setCenter(cX:Number,cY:Number,cZ:Number=0):void {

23
this.cX=cX;

24
this.cY=cY;

25
this.cZ=cZ;

26
}

27
public function get screenX():Number {

28
var scale:Number = fl / (fl + z + cZ);

29
return vpX + cX + x * scale;

30
}

31
public function get screenY():Number {

32
var scale:Number = fl / (fl + z + cZ);

33
return vpY + cY + y * scale;

34
}

35
public function rotateX(angleX:Number):void {

36
var cosX:Number=Math.cos(angleX);

37
var sinX:Number=Math.sin(angleX);

38
var y1:Number=y*cosX-z*sinX;

39
var z1:Number=z*cosX+y*sinX;

40
y=y1;

41
z=z1;

42
}

43
public function rotateY(angleY:Number):void {

44
var cosY:Number=Math.cos(angleY);

45
var sinY:Number=Math.sin(angleY);

46
var x1:Number=x*cosY-z*sinY;

47
var z1:Number=z*cosY+x*sinY;

48
x=x1;

49
z=z1;

50
}

51
public function rotateZ(angleZ:Number):void {

52
var cosZ:Number=Math.cos(angleZ);

53
var sinZ:Number=Math.sin(angleZ);

54
var x1:Number=x*cosZ-y*sinZ;

55
var y1:Number=y*cosZ+x*sinZ;

56
x=x1;

57
y=y1;

58
}

59
}

60
}

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

show sourceview source

print?

01
package {

02
import flash.display.Sprite;

03
import flash.events.Event;

04
public class Lines3D_B extends Sprite {

05
private var points:Array;

06
private var numPoints:uint=50;

07
private var fl:Number=250;

08
private var vpX:Number=stage.stageWidth/2;

09
private var vpY:Number=stage.stageHeight/2;

10

11
public function Lines3D_B() {

12
init();

13
}

14
private function init():void {

15
points = new Array();

16
for (var i:uint = 0; i < numPoints; i++) {

17
var point:Point3D=new Point3D(Math.random()*200-100,Math.random()*200-100,Math.random()*200-100);

18
point.setVanishingPoint(vpX, vpY);

19
points.push(point);

20
}

21
addEventListener(Event.ENTER_FRAME, onEnterFrame);

22
}

23
private function onEnterFrame(event:Event):void {

24
var angleX:Number = (mouseY - vpY) * .001;

25
var angleY:Number = (mouseX - vpX) * .001;

26
for (var i:uint = 0; i < numPoints; i++) {

27
var point:Point3D=points[i];

28
point.rotateX(angleX);

29
point.rotateY(angleY);

30
}

31
graphics.clear();

32
graphics.lineStyle(0);

33
graphics.moveTo(points[0].screenX, points[0].screenY);

34
for (i = 1; i < numPoints; i++) {

35
graphics.lineTo(points[i].screenX, points[i].screenY);

36
}

37
}

38
}

39
}

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

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

show sourceview source

print?

01
package {

02
import flash.display.Sprite;

03
import flash.events.Event;

04
public class Square3D extends Sprite {

05
private var points:Array;

06
private var numPoints:uint=4;

07
private var fl:Number=250;

08
private var vpX:Number=stage.stageWidth/2;

09
private var vpY:Number=stage.stageHeight/2;

10
public function Square3D() {

11
init();

12
}

13

14
private function init():void {

15
points = new Array();

16
points[0]=new Point3D(-80,-80,50);

17
points[1]=new Point3D(80,-80,50);

18
points[2]=new Point3D(80,80,50);

19
points[3]=new Point3D(-80,80,50);

20

21
//设置每个点的消失点

22
for (var i:uint = 0; i < numPoints; i++) {

23
points[i].setVanishingPoint(vpX, vpY);

24
}

25

26
addEventListener(Event.ENTER_FRAME, EnterFrameHandler);

27
}

28
private function EnterFrameHandler(e:Event):void {

29
var dx:Number = mouseX - vpX;

30
var dy:Number = mouseY - vpY;

31

32
var angleX:Number = dy * 0.001;

33
var angleY:Number = dx * 0.001;

34
var angleZ:Number = Math.sqrt(dx*dx+dy*dy)*0.0005;

35
if (dx>0){angleZ*=-1;}

36
for (var i:uint = 0; i < numPoints; i++) {

37
var point:Point3D=points[i];

38
point.rotateX(angleX);

39
point.rotateY(angleY);

40
point.rotateZ(angleZ);

41
}

42
graphics.clear();

43
graphics.lineStyle(0);

44
graphics.moveTo(points[0].screenX, points[0].screenY);          

45
for (i = 1; i < numPoints; i++) {

46
graphics.lineTo(points[i].screenX, points[i].screenY);

47
}

48
graphics.lineTo(points[0].screenX, points[0].screenY);

49
}

50
}

51
}

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

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

show sourceview source

print?

01
var pointNum:int=10;

02
var points:Array = new Array();

03
var vpX:Number=stage.stageWidth/2;

04
var vpY:Number=stage.stageHeight/2;

05

06
function Init():void {

07
points.push(new Point3D(-100,-140,0));

08
points.push(new Point3D(100,-140,0));

09
points.push(new Point3D(100,-90,0));

10
points.push(new Point3D(-40,-90,0));

11
points.push(new Point3D(-40,-40,0));

12
points.push(new Point3D(80,-40,0));

13
points.push(new Point3D(80,10,0));

14
points.push(new Point3D(-40,10,0));

15
points.push(new Point3D(-40,140,0));

16
points.push(new Point3D(-100,140,0));

17

18
for (var i:uint = 0; i < pointNum; i++) {

19
points[i].setVanishingPoint(vpX, vpY);

20
points[i].setCenter(0, 0, 100);

21
}

22
addEventListener(Event.ENTER_FRAME, EnterFrameHandler);

23
}

24

25

26
function EnterFrameHandler(e:Event):void {

27
var dx:Number=mouseX-vpX;

28
var dy:Number=mouseY-vpY;

29
var angleX:Number=dy*0.001;

30
var angleY:Number=dx*0.001;

31
var angleZ:Number=Math.sqrt(dx*dx+dy*dy)*0.0005;

32
if (dx>0) {

33
angleZ*=-1;

34
}

35
for (var i:uint = 0; i < pointNum; i++) {

36
var point:Point3D=points[i];

37
point.rotateX(angleX);

38
point.rotateY(angleY);

39
point.rotateZ(angleZ);

40
}

41
Draw();

42
}

43

44
function Draw():void {

45
graphics.clear();

46
graphics.lineStyle(1);

47
graphics.beginFill(0xff0000);

48
graphics.moveTo(points[0].screenX,points[0].screenY);

49
for (var i:uint=1; i<pointNum; i++) {

50
graphics.lineTo(points[i].screenX,points[i].screenY);

51
}

52
graphics.lineTo(points[0].screenX,points[0].screenY);

53
graphics.endFill();

54
}

55

56
Init();

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

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

show sourceview source

print?

01
package

02
{

03
import flash.display.Graphics;

04
public class Triangle

05
{

06
private var pointA:Point3D;

07
private var pointB:Point3D;

08
private var pointC:Point3D;

09
private var color:uint;

10
public function Triangle(a:Point3D, b:Point3D, c:Point3D, color:uint)

11
{

12
pointA = a;

13
pointB = b;

14
pointC = c;

15
this.color = color;

16
}

17
public function draw(g:Graphics):void

18
{

19
g.beginFill(color);

20
g.moveTo(pointA.screenX, pointA.screenY);

21
g.lineTo(pointB.screenX, pointB.screenY);

22
g.lineTo(pointC.screenX, pointC.screenY);

23
g.lineTo(pointA.screenX, pointA.screenY);

24
g.endFill();

25
}

26
}

27
}

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

show sourceview source

print?

01
var pointNum:int = 11;

02
var points:Array = new Array(pointNum);

03
var triangles:Array;//三角形数组

04
var vpX:Number = stage.stageWidth / 2;

05
var vpY:Number = stage.stageHeight / 2;

06

07
function Init():void {

08
points[0] = new Point3D(-50,-250,100);

09
points[1] = new Point3D(50,-250,100);

10
points[2] = new Point3D(200,250,100);

11
points[3] = new Point3D(100,250,100);

12
points[4] = new Point3D(50,100,100);

13
points[5] = new Point3D(-50,100,100);

14
points[6] = new Point3D(-100,250,100);

15
points[7] = new Point3D(-200,250,100);

16
points[8] = new Point3D(0,-150,100);

17
points[9] = new Point3D(50,0,100);

18
points[10] = new Point3D(-50,0,100);

19
for (var i:uint = 0; i < pointNum; i++) {

20
points[i].setVanishingPoint(vpX, vpY);

21
points[i].setCenter(0, 0, 450);

22
}

23

24
//根据顶点赋值三角形数组

25
triangles = new Array();

26
triangles[0] = new Triangle(points[0],points[1],points[8],0xff0000);

27
triangles[1] = new Triangle(points[1],points[9],points[8],0xff0000);

28
triangles[2] = new Triangle(points[1],points[2],points[9],0xff0000);

29
triangles[3] = new Triangle(points[2],points[4],points[9],0xff0000);

30
triangles[4] = new Triangle(points[2],points[3],points[4],0xff0000);

31
triangles[5] = new Triangle(points[4],points[5],points[9],0xff0000);

32
triangles[6] = new Triangle(points[9],points[5],points[10],0xff0000);

33
triangles[7] = new Triangle(points[5],points[6],points[7],0xff0000);

34
triangles[8] = new Triangle(points[5],points[7],points[10],0xff0000);

35
triangles[9] = new Triangle(points[0],points[10],points[7],0xff0000);

36
triangles[10] = new Triangle(points[0],points[8],points[10],0xff0000);

37

38
addEventListener(Event.ENTER_FRAME, EnterFrameHandler);

39
}

40

41
function EnterFrameHandler(e:Event):void {

42
var dx:Number = mouseX - vpX;

43
var dy:Number = mouseY - vpY;

44
var angleX:Number = dy * 0.001;

45
var angleY:Number = dx * 0.001;

46
var angleZ:Number = Math.sqrt(dx * dx + dy * dy) * 0.0005;

47
if (dx > 0) {

48
angleZ *=  -1;

49
}

50

51
for (var i:uint = 0; i < pointNum; i++) {

52
var point:Point3D = points[i];

53
point.rotateX(angleX);

54
point.rotateY(angleY);

55
point.rotateZ(angleZ);

56
}

57
graphics.clear();

58

59
//画三角形

60
for (i=0; i<triangles.length; i++) {

61
triangles[i].draw(graphics);

62
}

63
}

64

65
Init();

旋转的立方体

示意图如下:

show sourceview source

print?

01
var pointNum:int = 8;

02
var points:Array = new Array(pointNum);

03
var triangles:Array;//三角形数组

04
var vpX:Number = stage.stageWidth / 2;

05
var vpY:Number = stage.stageHeight / 2;

06

07
function Init():void {

08
//前面四个角

09
points[0] = new Point3D(-100,-100,-100);

10
points[1] = new Point3D( 100,-100,-100);

11
points[2] = new Point3D( 100, 100,-100);

12
points[3] = new Point3D(-100, 100,-100);

13
//后面四个角

14
points[4] = new Point3D(-100,-100, 100);

15
points[5] = new Point3D( 100,-100, 100);

16
points[6] = new Point3D( 100, 100, 100);

17
points[7] = new Point3D(-100, 100, 100);    

18

19
for (var i:uint = 0; i < pointNum; i++) {

20
points[i].setVanishingPoint(vpX, vpY);

21
points[i].setCenter(0, 0, 100);

22
}

23

24
//根据顶点赋值三角形数组

25
triangles = new Array();

26

27
var _t:Number = Math.random() * 0xffffff;

28

29
triangles[0] = new Triangle(points[0],points[1],points[2],_t);

30
triangles[1] = new Triangle(points[0],points[2],points[3],_t);

31

32
_t = Math.random() * 0xffffff;

33
triangles[2] = new Triangle(points[0],points[5],points[1],_t);

34
triangles[3] = new Triangle(points[0],points[4],points[5],_t);

35

36
_t = Math.random() * 0xffffff;

37
triangles[4] = new Triangle(points[4],points[6],points[5],_t);

38
triangles[5] = new Triangle(points[4],points[7],points[6],_t);

39

40
_t = Math.random() * 0xffffff;

41
triangles[6] = new Triangle(points[3],points[2],points[6],_t);

42
triangles[7] = new Triangle(points[3],points[6],points[7],_t);

43

44
_t = Math.random() * 0xffffff;

45
triangles[8] = new Triangle(points[1],points[5],points[6],_t);

46
triangles[9] = new Triangle(points[1],points[6],points[2],_t);

47

48
_t = Math.random() * 0xffffff;

49
triangles[10] = new Triangle(points[4],points[0],points[3],_t);

50
triangles[11] = new Triangle(points[4],points[3],points[7],_t);

51

52
addEventListener(Event.ENTER_FRAME, EnterFrameHandler);

53
}

54

55
function EnterFrameHandler(e:Event):void {

56
var dx:Number = mouseX - vpX;

57
var dy:Number = mouseY - vpY;

58
var angleX:Number = dy * 0.001;

59
var angleY:Number = dx * 0.001;

60
var angleZ:Number = Math.sqrt(dx * dx + dy * dy) * 0.0005;

61
if (dx > 0) {

62
angleZ *=  -1;

63
}

64

65
for (var i:uint = 0; i < pointNum; i++) {

66
var point:Point3D = points[i];

67
point.rotateX(angleX);

68
point.rotateY(angleY);

69
point.rotateZ(angleZ);

70
}

71
graphics.clear();

72

73
//画三角形

74
for (i=0; i<triangles.length; i++) {

75
triangles[i].draw(graphics);

76
}

77
}

78

79
Init();

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

view source

print?

1
public function draw(g:Graphics):void

2
{

3
g.beginFill(color,0.4);//改成40%透明度填充

4
g.moveTo(pointA.screenX, pointA.screenY);

5
g.lineTo(pointB.screenX, pointB.screenY);

6
g.lineTo(pointC.screenX, pointC.screenY);

7
g.lineTo(pointA.screenX, pointA.screenY);

8
g.endFill();

9
}

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

3D金字塔型：

show sourceview source

print?

01
var pointNum:int = 5;

02
var points:Array = new Array(pointNum);

03
var triangles:Array;//三角形数组

04
var vpX:Number = stage.stageWidth / 2;

05
var vpY:Number = stage.stageHeight / 2;

06

07
function Init():void {

08
points[0] = new Point3D(0,-200,0);

09
points[1] = new Point3D(200,200,-200);

10
points[2] = new Point3D(-200,200,-200);

11
points[3] = new Point3D(-200,200,200);

12
points[4] = new Point3D(200,200,200);

13

14
for (var i:uint = 0; i < pointNum; i++) {

15
points[i].setVanishingPoint(vpX, vpY);

16
points[i].setCenter(0, 0, 450);

17
}

18

19
//根据顶点赋值三角形数组

20
triangles = new Array();

21

22
var _t:Number = Math.random() * 0xffffff;

23
triangles[0] = new Triangle(points[0],points[1],points[2],_t);

24
_t = Math.random() * 0xffffff;

25
triangles[1] = new Triangle(points[0],points[2],points[3],_t);

26
_t = Math.random() * 0xffffff;

27
triangles[2] = new Triangle(points[0],points[3],points[4],_t);

28
_t = Math.random() * 0xffffff;

29
triangles[3] = new Triangle(points[0],points[4],points[1],_t);

30
_t = Math.random() * 0xffffff;

31
triangles[4] = new Triangle(points[1],points[3],points[2],_t);

32
//_t = Math.random() * 0xffffff;

33
triangles[5] = new Triangle(points[1],points[4],points[3],_t);

34

35
addEventListener(Event.ENTER_FRAME, EnterFrameHandler);

36
}

37

38
function EnterFrameHandler(e:Event):void {

39
var dx:Number = mouseX - vpX;

40
var dy:Number = mouseY - vpY;

41
var angleX:Number = dy * 0.001;

42
var angleY:Number = dx * 0.001;

43
var angleZ:Number = Math.sqrt(dx * dx + dy * dy) * 0.0005;

44
if (dx > 0) {

45
angleZ *=  -1;

46
}

47

48
for (var i:uint = 0; i < pointNum; i++) {

49
var point:Point3D = points[i];

50
point.rotateX(angleX);

51
point.rotateY(angleY);

52
point.rotateZ(angleZ);

53
}

54
graphics.clear();

55

56
//画三角形;

57
for (i=0; i<triangles.length; i++) {

58
triangles[i].draw(graphics);

59
}

60
}

61

62
Init();

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

show sourceview source

print?

001
var pointNum:int = 22;

002
var points:Array = new Array(pointNum);

003
var triangles:Array;//三角形数组

004
var vpX:Number = stage.stageWidth / 2;

005
var vpY:Number = stage.stageHeight / 2;

006

007
function Init():void {

008
points[0] = new Point3D(-50,-250,-50);

009
points[1] = new Point3D(50,-250,-50);

010
points[2] = new Point3D(200,250,-50);

011
points[3] = new Point3D(100,250,-50);

012
points[4] = new Point3D(50,100,-50);

013
points[5] = new Point3D(-50,100,-50);

014
points[6] = new Point3D(-100,250,-50);

015
points[7] = new Point3D(-200,250,-50);

016
points[8] = new Point3D(0,-150,-50);

017
points[9] = new Point3D(50,0,-50);

018
points[10] = new Point3D(-50,0,-50);

019
points[11] = new Point3D(-50,-250,50);

020
points[12] = new Point3D(50,-250,50);

021
points[13] = new Point3D(200,250,50);

022
points[14] = new Point3D(100,250,50);

023
points[15] = new Point3D(50,100,50);

024
points[16] = new Point3D(-50,100,50);

025
points[17] = new Point3D(-100,250,50);

026
points[18] = new Point3D(-200,250,50);

027
points[19] = new Point3D(0,-150,50);

028
points[20] = new Point3D(50,0,50);

029
points[21] = new Point3D(-50,0,50);

030

031
for (var i:uint = 0; i < pointNum; i++) {

032
points[i].setVanishingPoint(vpX, vpY);

033
points[i].setCenter(0, 0, 450);

034
}

035

036
//根据顶点赋值三角形数组

037
triangles = new Array();

038

039
var _t:Number = Math.random()*0xffffff;

040
//_t = 0xff0000;

041

042
triangles[0] = new Triangle(points[0],points[1],points[8],_t);

043
triangles[1] = new Triangle(points[1],points[9],points[8],_t);

044
triangles[2] = new Triangle(points[1],points[2],points[9],_t);

045
triangles[3] = new Triangle(points[2],points[4],points[9],_t);

046
triangles[4] = new Triangle(points[2],points[3],points[4],_t);

047
triangles[5] = new Triangle(points[4],points[5],points[9],_t);

048
triangles[6] = new Triangle(points[9],points[5],points[10],_t);

049
triangles[7] = new Triangle(points[5],points[6],points[7],_t);

050
triangles[8] = new Triangle(points[5],points[7],points[10],_t);

051
triangles[9] = new Triangle(points[0],points[10],points[7],_t);

052
triangles[10] = new Triangle(points[0],points[8],points[10],_t);

053

054
_t = Math.random()*0xffffff;

055
//_t = 0x000000;

056

057
triangles[11] = new Triangle(points[11],points[19],points[12],_t);

058
triangles[12] = new Triangle(points[12],points[19],points[20],_t);

059
triangles[13] = new Triangle(points[12],points[20],points[13],_t);

060
triangles[14] = new Triangle(points[13],points[20],points[15],_t);

061
triangles[15] = new Triangle(points[13],points[15],points[14],_t);

062
triangles[16] = new Triangle(points[15],points[20],points[16],_t);

063
triangles[17] = new Triangle(points[20],points[21],points[16],_t);

064
triangles[18] = new Triangle(points[16],points[18],points[17],_t);

065
triangles[19] = new Triangle(points[16],points[21],points[18],_t);

066
triangles[20] = new Triangle(points[11],points[18],points[21],_t);

067
triangles[21] = new Triangle(points[11],points[21],points[19],_t);

068

069
_t = Math.random()*0xffffff;

070
//_t = 0x0000ff;

071

072
triangles[22] = new Triangle(points[0],points[11],points[1],_t);

073
triangles[23] = new Triangle(points[11],points[12],points[1],_t);

074
triangles[24] = new Triangle(points[1],points[12],points[2],_t);

075
triangles[25] = new Triangle(points[12],points[13],points[2],_t);

076
triangles[26] = new Triangle(points[3],points[2],points[14],_t);

077
triangles[27] = new Triangle(points[2],points[13],points[14],_t);

078
triangles[28] = new Triangle(points[4],points[3],points[15],_t);

079
triangles[29] = new Triangle(points[3],points[14],points[15],_t);

080
triangles[30] = new Triangle(points[5],points[4],points[16],_t);

081
triangles[31] = new Triangle(points[4],points[15],points[16],_t);

082
triangles[32] = new Triangle(points[6],points[5],points[17],_t);

083
triangles[33] = new Triangle(points[5],points[16],points[17],_t);

084
triangles[34] = new Triangle(points[7],points[6],points[18],_t);

085
triangles[35] = new Triangle(points[6],points[17],points[18],_t);

086
triangles[36] = new Triangle(points[0],points[7],points[11],_t);

087
triangles[37] = new Triangle(points[7],points[18],points[11],_t);

088
triangles[38] = new Triangle(points[8],points[9],points[19],_t);

089
triangles[39] = new Triangle(points[9],points[20],points[19],_t);

090
triangles[40] = new Triangle(points[9],points[10],points[20],_t);

091
triangles[41] = new Triangle(points[10],points[21],points[20],_t);

092
triangles[42] = new Triangle(points[10],points[8],points[21],_t);

093
triangles[43] = new Triangle(points[8],points[19],points[21],_t);

094

095
addEventListener(Event.ENTER_FRAME, EnterFrameHandler);

096
}

097

098
function EnterFrameHandler(e:Event):void {

099
var dx:Number = mouseX - vpX;

100
var dy:Number = mouseY - vpY;

101
var angleX:Number = dy * 0.001;

102
var angleY:Number = dx * 0.001;

103
var angleZ:Number = Math.sqrt(dx * dx + dy * dy) * 0.0005;

104
if (dx > 0) {

105
angleZ *=  -1;

106
}

107

108
for (var i:uint = 0; i < pointNum; i++) {

109
var point:Point3D = points[i];

110
point.rotateX(angleX);

111
point.rotateY(angleY);

112
point.rotateZ(angleZ);

113
}

114
graphics.clear();

115

116
//画三角形;

117
for (i=0; i<triangles.length; i++) {

118
triangles[i].draw(graphics);

119
}

120
}

121

122
Init();

3D旋转的圆筒：

show sourceview source

print?

01
var pointNum:int = 40;

02
var numFaces:int = 20;

03
var points:Array = new Array(pointNum);

04
var triangles:Array;//三角形数组

05
var vpX:Number = stage.stageWidth / 2;

06
var vpY:Number = stage.stageHeight / 2;

07

08
function Init():void {

09
points = new Array();

10
triangles = new Array();

11
var index:uint = 0;

12
for (var i:uint = 0; i < numFaces; i++) {

13
var angle:Number = Math.PI * 2 / numFaces * i;

14
var xpos:Number = Math.cos(angle) * 200;

15
var ypos:Number = Math.sin(angle) * 200;

16
points[index] = new Point3D(xpos,ypos,-100);

17
points[index + 1] = new Point3D(xpos,ypos,100);

18
index +=  2;

19
}

20
for (i = 0; i < points.length; i++) {

21
points[i].setVanishingPoint(vpX, vpY);

22
points[i].setCenter(0, 0, 300);

23
}

24
index = 0;

25
var _t:Number = 0;

26
for (i = 0; i < numFaces - 1; i++) {

27
_t = Math.random() * 0xffffff;

28
triangles[index] = new Triangle(points[index],points[index + 3],points[index + 1],_t);

29
triangles[index + 1] = new Triangle(points[index],points[index + 2],points[index + 3],_t);

30
index +=  2;

31
}

32
triangles[index] = new Triangle(points[index],points[1],points[index + 1],_t);

33
triangles[index + 1] = new Triangle(points[index],points[0],points[1],_t);

34
addEventListener(Event.ENTER_FRAME, EnterFrameHandler);

35
}

36

37
function EnterFrameHandler(e:Event):void {

38
var dx:Number = mouseX - vpX;

39
var dy:Number = mouseY - vpY;

40
var angleX:Number = dy * 0.001;

41
var angleY:Number = dx * 0.001;

42
var angleZ:Number = Math.sqrt(dx * dx + dy * dy) * 0.0005;

43
if (dx > 0) {

44
angleZ *=  -1;

45
}

46

47
for (var i:uint = 0; i < pointNum; i++) {

48
var point:Point3D = points[i];

49
point.rotateX(angleX);

50
point.rotateY(angleY);

51
point.rotateZ(angleZ);

52
}

53
graphics.clear();

54

55
//画三角形;

56
for (i=0; i<triangles.length; i++) {

57
triangles[i].draw(graphics);

58
}

59
}

60

61
Init();

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

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