分享
 
 
 

从头开始学习FLASH 3D教程

王朝other·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

效果演示:(用鼠标直接拖拽下面的物体)

点击这里下载源文件

大家都知道三维的点都有3个坐标,但FLASH只是有二维的坐标,所以要在FLASH里实现“三维”的效果,就需要对点的坐标进行转化,简单的说,就是怎么把三维坐标转换成二维坐标。(其实,这并不是真正的三维,而是一种视觉欺骗,看上去像三维的就这么回事。所以上面三维带引号。)

一、三维坐标系转化成二维坐标系

(1)、坐标的转换

flash中场景左上角为(0,0),而在数学中是场景中心为(0,0),怎样把它转成数学中的坐标系呢?

1.FLASH里的坐标视图

x=Stage.width/2; // Stage.width是场景的宽;

y=Stage.height/2; // Stage.height是场景的高;

这样就把原坐标的原点移动了,场景的中心点,不过,Y轴还是向下,为正的。(这在后面做旋转时要注意的。)

(2)、角度的转换

flash中Math函数里的参数都要用到弧度,所以角度与弧度之间的转换是需要知道的。

在flash as中,我们可以通过这样的表达式来进行转换:

hudu=jiaodu*Math.PI/180; / /把角度转换为弧度,公式为:弧度=角度 *3.14/180,3.14为pai

jiaodu=hudu*180/Math.PI; / /把弧度转换为角度,公式为:角度=弧度*180/3.14,3.14为pai

(if (jiaodu<0) { jiaodu = jiaodu+360; }/* 转换后的角度的范围从-180到180, 数学中的角度从0到360,所以小于0时加上360 */)

2、flash中的三维坐标系

如图3,z轴表示一个物体离屏幕的远近,当物体的z轴位置增加时,物体朝远离屏幕的方向运动,当物体的z值减小时,物体朝接近屏幕的方向运动。

图3:三维坐标系

图4:二维与三维的点的关系

3、三维坐标转换成二维坐标

如图4,已知一个点(x,y,z),利用三角形相似的原理,可以得出下列结论:

d/(d+z)=y1/y,推出:y1=d*y/(d+z),可在二维平面上来表现空间上的点的位置。进一步把它简化。提出因子d/(d+z),用ratio(比率)表示,这个公式就变为

ratio=d/(d+z);

y1=ratio*y;同理可推出

x1=ratio*x;

二、控制物体的属性(大小,层次,透明度等)

1、控制mc的大小

在三维坐标中,当z值增大,也就是远离屏幕时,物体应越小,反之越大。

我们可以用上满的ratio,当z增加时,ratio减少,因为在ratio中,z是作为分母的。反之,当z减少时,ratio增加。所以可用ratio来控制mc的大小。如下:

mc1._xscale=mc._xscale*ratio;

mc1._yscale=mc._yscale*ratio;

2、控制mc的层次

z值最大,物体应在最底层,最小,在最上层,

所以mc的层次可以有z组成,可以用很大的数减z,也可以让z除以负数,等等,这里方法比较灵活,也是做”三维”效果的关键,主要要在调试中确定适合设计的方法。flash中,设置mc的层次用swapDepths,如下:

mc.swapDepths(1000-z);//设置mc的层次

mc.swapDepths(z/-4);

3、控制mc的透明度

远处的物体看上去模糊些,近处的物体清晰些,在flash中,可用_alpha来控制,方法和控制大小类似,不在介绍原理。如下:

mc._alpha=100*ratio;

4、控制mc的角度(旋转)

这一步最难,也最好的东东。学习以后,你将能制作出非常cool的效果

旋转有三种,x旋转:坐标x不变,y旋转:y不变,z旋转:z不变,我们先来推导z旋转。

如下图:从点(x,y,0)转到(x1.y1.0),求点(x1.y1.0)

利用数学中的正弦、余弦公式得出

x1=r*cos(a+b),而cos(a+b)=sina*cosb+cosa*sinb

推出:x1=r(cosa*cosb-sina*sinb)

又因为x=r*cosa,y=r*sina

所以x1=x*cosb-y*sinb

同样推出:y1=y*cosb+x*sinb

这就是z旋转的公式。用同样的方法可推出x旋转,y旋转的公式。总结如下:

给定点:(x,y,z)

绕x轴旋转后的点(x1,y1,z1)

绕y轴旋转后的点(x2,y2,z2)

绕z轴旋转后的点(x3,y3,z3)

x旋转(x不变)

x1=x

y1=y*cosb-z*sinb

z1=z*cosb+y*sinb

注:x旋转要注意,在FLASH中x1=x

y1=y*cosb+z*sinb

z1=z*cosb-y*sinb

是先加后减,因为FLASH里的Y轴是反的,箭头向下的。

y旋转(y不变)

x2=x*cosb-z1*sinb

y2=y1

z2=z1*cosb+x*sinb

z旋转(z不变)

x3=x2*cosb-y1*sinb

y3=y1*cosb+x2*sinb

z3=z2

从以上公式可看出,在flash要实现旋转,先要求x轴的旋转点,再求y轴的旋转点,最后再求出z轴的旋转点。最后我们来一个x旋转的应用

三、制作x轴旋转的正方体

1、在场景中画一小球,并按F8转换为mc,实例命名为qiu。

2、增加一层,命名为as,接下去我们来写as,如下:

_root.onLoad = function() {

shumu = 8;

// 定义复制小球的数目

qiu._x = 6000;

// 让原始小球消失

for (var i = 0; i<shumu; i++) {

duplicateMovieClip("qiu", "qiu"+i, i);

}

// 复制小球,作为正方体的八个顶点

qiu_pos_x = new Array(100, 0, 0, 100, 100, 0, 0, 100);

qiu_pos_y = new Array(100, 100, 100, 100, 0, 0, 0, 0);

qiu_pos_z = new Array(50, 50, -50, -50, 50, 50, -50, -50);

// 从三维坐标中取正方体的8个顶点的坐标,保存在数组中

D = 200;

// 观察者与屏幕的距离

hutu = 0.001;

// 控制旋转的速度

b = hutu*180/Math.PI;

// 角、弧度的转换

};

_root.onEnterFrame = function() {

for (var i = 0; i<shumu; i++) {

x1 = qiu_pos_x[i];

y1 = qiu_pos_y[i]*Math.cos(b)-qiu_pos_z[i]*Math.sin(b);

z1 = qiu_pos_z[i]*Math.cos(b)+qiu_pos_y[i]*Math.sin(b);

// 按公式计算

qiu_pos_x[i] = x1;

qiu_pos_y[i] = y1;

qiu_pos_z[i] = z1;

// 更新数组元素

ratio = D/(D+z1);

perspective_x = x1*ratio;

perspective_y = y1*ratio;

// 按公式计算

_root["qiu"+i]._x = 275+perspective_x;

_root["qiu"+i]._y = 200-perspective_y;

/ 设置球的坐标

_root["qiu"+i]._xscale = _root["qiu"+i]._yscale=50*ratio;

// 球的大小

_root["qiu"+i].swapDepths(10000-qiu_pos_z[i]);

// 球的层次

_root["qiu"+i]._alpha=100*ratio;//设置透明度

}

};

3、按CTRL+Enter测试,一个简单的3D旋转就形成了。

(至此为止,上面部分的教程很大程度上是参考《flash 3D 基础教程》(作者:zjs35 文章来源:flashempire 更新时间:2004-4-7)的,本人只在上面做了微小部分的修改,主要因为这篇对FLASH_3D效果的基础理论确实写的很好。修改的部分,是本人在学习之后,自己在实践练习中发现的一些需要注意的地方。)

接下来将为大家解析一篇某人大虾写的立方体旋转的FLASH_AS,这位大虾是用纯AS写的,只要把代码全部复制到第一桢就可以了。我将做详细的解析!!!

//先给各项赋值,为后面的编辑作做准备

plane = [0, [0, 1, 2, 3, 4], [0, 5, 6, 7, 8], [0, 1, 2, 6, 5], [0, 2, 3, 7, 6], [0, 4, 3, 7, 8], [0, 1, 4, 8, 5]]; //给立方体的8个点都标上数,这里定义的数组是立方体的6个面,每个面上4个点,上面的数字就是哪四个点组成一个面,每组前面多个0,是为了下面做循环调用是方便,循环可以从i=1开始。大家自己可以根据上面的数组。画出它在三维坐标中的立体图形。另,第一“0“,其实是[0,0,0,0,0]。

dx = [0, 1, -1, -1, 1, 1, -1, -1, 1]; //这里是给8个点在三维坐标定义数组,竖着看,没一行就是一个点坐标的(x,y,z) ,另没组前面多个0,是为了下面做循环调用是方便,循环可以从i=1开始。

dy = [0, 1, 1, 1, 1, -1, -1, -1, -1]; //

dz = [0, 1, 1, -1, -1, 1, 1, -1, -1]; //

colour=0x4499FF //这里定义的是立方体的颜色,其实,要6个面,每个面的颜色不同,就把这个colour定义成数组就可以了。同样前面加个0,也是上面的理由。

//colour=[0,0x4499FF,0x6F13EC,0xF1F00E,0x6CE31C,0x26D9A3,0x808080];

trans = Math.PI/180; //下面的弧度和角度的转换用

cube_width = 100; //用于设定立方体的边的长度

d = 400; //// 观察者与屏幕的距离

num_planes = plane.length-1; //num_planes=6

num_nodes = dx.length-1; //num_nodes=8

num_nodes_per_plane = plane[1].length-1;//num_nodes_per_plane=4

xz_angle_inc = 0; //下面这4个定义对用鼠标控制旋转的速度有关,

yz_angle_inc = 0;

angle_inc_factor = .1;

angle_dec_factor = .9;

o_x = Stage.width/2; //把坐标原点移到屏幕中心

o_y = Stage.height/2;

node = new Array(); //定义新数组

p_node = new Array();

//边长调整... 主要是求出8个点,在设定边长,情况下的坐标

for (i=1; i<=num_nodes; i++) {

node[i] = new Obj

[1] [2] 下一页

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有