用flash 5 action 制作3d效果

用flash action制作3d效果

春节以前在论坛上发布了我刚刚做出的矢量分解3d效果演示的flash，引起了很多网友索要教程，当时许诺春节后写教程的。现在把教程写出来，还不算太晚吧！不过我再多说一句，如果有人想转载的话，请注明作者和出处。

这个3d效果演示的框架是从去年暑假编写出的雏形，当时得到了同学张旭的热心帮助。虽然action脚本有些乱，自己感觉效果还是不错，于是把源码mailto了闪客帝国，终于杳无音信了。这个寒假里又需要制作类似的3d效果，终于又完全重新编写了一遍，画线使用了goldgoat的连线程序，3d引擎注意了结构化编程，现在的这个版本算是涣然一新了。这其间，得到了QUESTER等网友的建议和帮助，在此一并表示感谢。

在这次发布前，我又对源码进行了一遍修改，修正了不妥之处，把所有的action集中到了一个mc里，很详尽的加进了注释，这个版本和我给冷语等网友过目的又有很大不同了。虽历经多次修改，里面可能还有隐藏的bug，希望网友给予批评指正。

废话少说，我们先来看看效果，为了简化，我这次发布的作品不再分析矢量了，保留了坐标轴和XOY平面影格，在空中画了一个正方形。大家请看：

页面：点这儿参观
源文件 (5k)：3d7.zip IT资讯之家 www.it55.com

因为action很长，我只对3d部分做介绍，鼠标感应部分大家自己分析吧！

首先是设置初始状态，这段action加在主场境中draw3d这个mc上，因为全是用action写的，看起来好像空mc，呵呵。 sflj www.it55.com kg^&fgd

onClipEvent (load) {
    // 设置初始状态
    this.hangle = 45;
    // hangle：视角和X轴正夹角
    this.vangle = 20;
    // vangle：视角和XOY平面夹角
} vd;k;l www.it55.com rdfg

draw3d这个mc里面分为3层，第一层goldgoat-line里面的action是goldgoat所做的画直线程序，大家可以参看goldgoat的教程：http://www.blueidea.com/doc/multimedia/flash/200201/00000284.asp。在这里大家不需要懂，会用就ok了，不再多做介绍。

第二层function是3d引擎的核心，action层是函数的调用，我们先介绍function层。

第一个函数是view3d，注释已经很明白了，我想我需要解释的仅仅是算法。红色的部分是算法核心，通过空间任意一个点在在视角的坐标系投影，得到新的3维坐标，这里新的x、y就是显示坐标，z是深度。具体这个投影公式我是怎么得到的，大家想弄明白还是自己找立体几何，反正我也是根据原理自己算出来的。如果大家仅仅是想使用，只要会用就行了。

function view3d (view) {
    // 3d视角转换函数，返回值是一个一维数组
    // 形参view是一个数组，view[0]、[1]、[2]分别为坐标x、y、z值
    var x1 = view[0];
    var y1 = view[1];
    var z1 = view[2];
    var hangle2 = hangle*Math.PI/180;
    var vangle2 = vangle*Math.PI/180;
    var x2 = y1*Math.cos(hangle2)-x1*Math.sin(hangle2);
    var y2 = z1*Math.cos(vangle2)-(y1*Math.sin(hangle2)+x1*Math.cos(hangle2))*Math.sin(vangle2);
    var z2 = z1*Math.sin(vangle2)+(y1*Math.sin(hangle2)+x1*Math.cos(hangle2))*Math.cos(vangle2);
    // 以上为计算部分
    var fix3d = 1000;
    x2 *= (fix3d+z2)/fix3d;
    y2 *= (fix3d+z2)/fix3d;
    view = [x2, -y2, z2];

www.it55.com在线教程

    // 以上为视角修正部分
    return view;
    // 返回值view是一个数组，view[0]、[1]分别为现实坐标x、y值，view[2]为深度
} vd;k;l www.it55.com rdfg

第二个函数是draw3d，作用就是画空间任两点之间的直线，这里两次调用了前面的view3d函数。因此显然，这里做形参的xyzlist1、xyzlist2是原始XOYZ坐标系里的坐标。在画线之前，先删除以前存在的这根线。也许这样效率不是很高，每次都要重新attachMovie执行速度很慢，不过goldgoat没有提供moveline的功能，我也懒得自己写（我们在一个项目组，是有分工的）。不过也许是因为这里的影响，在我的PIII866、256M内存的机器上，最多到200条线，鼠标拖动就开始不流畅了，这对用大量线段拟合曲线是不利的，以后升级时可以考虑修改此处，不过200条线，一般也是够用了。

（阅读次数：）

共2页: 上一页 1 [2] 下一页