Flash和3D编程探秘(一)- Flash和3D空间

　　本文举例源代码或素材下载

　　第件事情我想你知道是在Flash里并不存在真正3D我们所做是运用Flash里2D绘制思路方法去模拟3D绘制或者我应该说Flash 并不支持3D绘制Flash并不知道3D是什么也不知道如何去处理3D对象但是好消息是所有3D处理和3D计算都是建立在数学计算基础上加上 Flash知道如何处理数学计算太好了我们有了这些工具便可以创造出我们自己动画了这并不是说Flash里3D编程要简单如果你打算深入去探索话你会发现恰恰相反不管怎样在这篇文章中我会用最大努力把数学部分变得简单

　　在Flash里有两种3D处理方式种是提前处理好3D模型另外种是在运行时通过数学计算处理3D图形运用第种思路方法我们可以提前处理好系列图形然后通过对祯或者是时间进行动画播放以达到3D效果相对来说第种思路方法对美工要求比较高后种思路方法我们通过大量数学计算对物体进行操作这也是在这篇文章里所关心

　　3D

　　如今你在互联网上搜索3D Flash你会找到很多工具和利用这些你可以绘制些3D图形并导出你需要格式甚至完全使用在你项目里基本上你可以不必操心如何绘制 3D图形但是这些都是提前做好模版不能够作太多编辑于是我们发现我们自己也有大脑我们自己也可以制作简单缩放动画还可以制作复杂 3D绘制引擎

　　毕竟我们是从最基础 2D绘制开始制作3D对象这并不像我们在使用显卡语言或者OpenGL时绘制切3D物体我们都要自己动脑动手加上数学运算进行绘制这就增加了些数学上挑战不过我认为这对你来说应该不是问题用Flash作3D图形样会给你带来你意想不到乐趣那么开始吧！

　　3D空间坐标系

　　从技术角度而言Flash中并不存在3D也就是说z轴并不存在所以所谓z轴是由你来制造也就是远景物体大小那么也就是说对于个3D虚拟空间z轴存在于当你看进显示器x轴和y轴分别为横向和纵向可是我们用什么思路方法来表达3D空间呢？我们需要两种手法来处理3D显示缩放和层叠

　　

　　2D和3D坐标系

　　对于z轴解释

　　在现实中当个物体离你远去那么对你眼睛来说你所看到是物体越来越小当然并不只有物体大小在改变物体离你距离也在增大那么我们可以假定在3D空间里离得人眼越远物体它大小就越小那么它在x和y轴上移动就越缓慢很简单对吧？很好

　　注意:

　　如果你用过OpenGL那么你知道y轴正方向是指向上方z轴正方向是指向屏幕外反向然而我们文章中Flash 3D空间y轴和z轴是相反

　　原点

　　Flash 中3D空间是围绕坐标系原点原点坐标我们用Po(x, y, z), (0, 0, 0) 来表示在Flash 2D中原点存在于左上角Po(0, 0)那么对于3D来说原点也自然存在于左上角也许你会发现如果原点在左上角话那么你所在位置肯定是成定角度来看中3D空间中物体当然我们可以把3D空间原点向右再向下移动那么我们在围绕原点绘制物体时候会发现方便很多

　　缩放物体

　　离人眼越近那么物体就越大反的物体就越小物体缩放比率以及移动速率和物体z大小成反比现在我用个例子给你介绍说明如何制造3D动画效果在这个例子中我手工绘制了几个小球作为我们关心物体让它们沿着z轴在舞台上来回移动以制造3D效果虽然很基本不过别担心把这些简单东西掌握好是深入探索基础

　　小球和3D空间(无层次)

　　动画制作步骤

　　1. 第步用Flash画出个你喜欢物体任何物体都可以在这个例子中我画了个蓝色小球当然你可以导入你喜欢图片只不过不要忘记在 Library你创建物体上点击右键选择Linkage然后在Export For Actionscript上打勾

　　2. 下步详细解说下代码当然开始我们要设置些变量原点和焦距(摄像机)Focal length(焦距)确定了摄像机(在本例子中为人眼)凸透镜焦距值越大那么物体扭曲就会越小我们把它设为400这是个在本例子中适中数值

　　varorigin=Object;

　　origin.x=stage.stageWidth/2;

　　origin.y=stage.stageHeight/2-80;

　　varfocal_length=400;

　　3. 创建个舞台并且把它x和y设置为原点这样我们在参照物体时候就会非常简单易读了

　　varscene=Sprite;

　　this.addChild(scene);

　　scene.x=origin.x;

　　scene.y=origin.y;

　　4. 然后我们要在舞台上添加些我们绘制好小球在这个例子中我们绘制3个分别在左中右把它们x_3d, y_3d, z_3d也就是它们3D空间xyz值设为相应数值我把它们排为排给它们添加个direction属性1代表向屏幕方向移动-1 代表向我们方向移动然后设置它们移动速度并且添加到舞台上这时你如果编译话你会看到有3个球在舞台上那么下步我们让它们运动起来

for(vari=0;i<3;i)
{
　　varsphere=Sphere;
　　sphere.x_3d=-190+i*160;
　　sphere.y_3d=80;
　　sphere.z_3d=i*100;
　　sphere.direction=1;
　　sphere.speed=6;
　　scene.addChild(sphere);
}

　　5. 下面这个在每次执行都会把小球移动到相应位置并且对小球进行缩放当小球z大于600时我们让它向相反方向移动当小球z_3d值变化后我们计算小球当前大小和位置把小球移动到相应位置然后对其进行缩放这样在连串执行后我们就会得到动画效果代码里scale代表物体应该缩放比率当物体沿z轴移动时候物体大小以及x和y值都会改变所以我们要计算出这个比率那么我们才能把物体缩放到合适大小并且把物体移动到相应Flash 2D空间位置

functionrun(e:Event)
{
　　for(vari=0;i<scene.numChildren;i)
　　{
　　　　scene.getChildAt(i).z_3dscene.getChildAt(i).speed*scene.getChildAt(i).direction;
　　　　(scene.getChildAt(i).z_3d>600)
　　　　{
　　　　　　scene.getChildAt(i).z_3d=600;
　　　　　　scene.getChildAt(i).direction=-1;
　　　　}
　　　　(scene.getChildAt(i).z_3d<0)
　　　　{
　　　　　　scene.getChildAt(i).z_3d=0;
　　　　　　scene.getChildAt(i).direction=1;
　　　　}
　　　　
　　　　varscale=focal_length/(focal_length+scene.getChildAt(i).z_3d);
　　　　scene.getChildAt(i).x=scene.getChildAt(i).x_3d*scale;
　　　　scene.getChildAt(i).y=scene.getChildAt(i).y_3d*scale;
　　　　scene.getChildAt(i).scaleX=scene.getChildAt(i).scaleY=scale;
　　}
}

　　6. 最后在舞台上添加个循环响应时间让第5步我们写循环执行发布看下现在小球在3D舞台上移动了

　　Hooray！你第个Flash3D完成了整理总结下其实我们并没有使用任何高深窍门技巧只不过是利用了变化物体x和y以及小球缩放来制造3D效果对你来说太简单？好那我们继续

　　层叠

　　在Flash中表现3D空间仅有缩放是不够我们还需要层叠基本概念是离人眼较近物体会在离人眼较远物体的上显示

　　在上节例子里面我们缩放小球以达到3D效果可是你会发现3个小球的间x距离都很大你也许会想如果3个小球离得很近话会出现什么现象呢？

　　尝试把上面例子中小球的间x距离变小看看有什么变化？

　　这时你会发现不管小球离我们多远右边小球始终在最上面即使中间小球应该盖过右边小球时候右边小球还会在上面这是在把小球添加到舞台上时候我们已经给了小球层次也就是说最后添加小球(右边小球)就在最上面

　　小球3D空间(无层次)位置不对了！

　　我们应该设计种思路方法实现小球层次感当小球离我们远时候那么它层次就比较靠后以此类推换句话说我们利用小球z值给小球们分开层次这也是我们即将要做在这个例子中我们用7个小球运动来介绍说明是如何实现层次

　　小球3D空间(有层次)好多了！

　　动画制作步骤

　　1. 和上次例子样重复6个步骤区别是我们化7个小球并且把它们x距离缩短

for(vari=0;i<7;i)
{
　　varsphere=Sphere;
　　sphere.x_3d=-150+i*40;
　　sphere.y_3d=80;
　　sphere.z_3d=Math.random*(0-600)+600;
　　sphere.direction=1;
　　sphere.speed=Math.random*(5-12)+12;　　
　　scene.addChild(sphere);
}

　　2. 利用Bubble Sort算法在每次对小球xy和大小设置后对所有小球在舞台上层次进行操作这里使用理论是最小z值小球它所在层次就应该在最上面不要小看我写这短短几行代码哦！它可以把所有小球分配到相应层次！只要你CPU够块不管多少小球都可以

functionswap_depth(container:Sprite)
{
　　for(vari=0;i<container.numChildren-1;i)
　　{
　　　　for(varj=container.numChildren-1;j>0;j--)
　　　　{
　　　　　　(Object(container.getChildAt(j-1)).z_3d<Object(container.getChildAt(j)).z_3d)
　　　　　　{
　　　　　　　　container.swapChildren(container.getChildAt(j-1),container.getChildAt(j));
　　　　　　}
　　　　}
　　}
}

　　3. 然后在循环里最后加上

　　swap_depth(scene);

　　本文章旨在讨论如何在Flash中实现3D动画对于些算法比如这节中使用到冒泡排序算法我就不再多说了当然你可以选择使用插入排序(运算起来比较快40%？！)你可以完全拷贝我写代码去使用但是请务必注明出处如果是排序话google或者百度下我相信你会找到更详细介绍说明文字来解释冒泡排序

　　个简单Particle 例子

　　这是个使用缩放基本概念例子你可以使用键盘上下左右键移动你观看位置按下W键加速前进按下S键减速由于涉及到摄像机在这篇文章中就不再讲解源文件在文章下载页可以找到你可以尝试改变星星数量星星很多话移动你摄像机你应该会看到个很长星带(题外话:我在我电脑里运行2000个星星就有些慢了Dual Core 2.0GHZ如果你有更强大CPU话那你看到星空要比我漂亮多)



　　3D星空简单Particle WASD移动观看位置K键加速L键减速

　　OK你已经学会了如果使用缩放和些简单设置产生3D效果动画在后面几篇中我们会逐渐深入探讨更有趣内容加油！

　　相关文章:

　　Flash和3D编程探秘( 7)- 3D物体框架

　　Flash和3D编程探秘( 6)- 全方位旋转摄像机

　　Flash和3D编程探秘()- Flash和3D空间

　　Flash和3D编程探秘( 5)- 摄像机旋转和移动

　　Flash和3D编程探秘( 4)- 摄像机旋转基础知识

　　Flash和3D编程探秘( 3)- 摄像机(Camera)

　　作者:YangZhou

　　出处:http://yangzhou1030.cnblogs.com/

　　感谢:Yunqing

延伸阅读

• 2009-1-23-- cameraflash:Flash和3D编程探秘( 3)- 摄像机(Camera)
• 2009-1-23-- 旋转flash:Flash和3D编程探秘( 4)- 摄像机旋转基础知识
• 2009-1-23-- 旋转flash:Flash和3D编程探秘( 5)- 摄像机旋转和移动
• 2009-1-23-- flash编程:Flash和3D编程探秘( 7)- 3D物体框架
• 2009-1-23-- flash编程:了解在Flash中的编程工作