纳金网
标题:
【Away3d 基础教程】3D基本元素5(1)
[打印本页]
作者:
铁锹
时间:
2012-12-6 23:28
标题:
【Away3d 基础教程】3D基本元素5(1)
在大多数3D软件中，3D基本元素是构成3D世界的基石。Away3D自带有17种3D基本元素以及一些别的帮助物。本教程将解释如何用这些3D基本元素实现非常酷的效果，比如音乐波形条、CMYK颜色分离等等。本教程同时会介绍away3D支持的两种代码书写方式。
首先，不要小看这些3D基本元素。它们可能很简单，但它们非常有用！举个例子，一个简单的球（sphere）就可以胜任创建一个全景图的工作。当然你也可以用skybox这个3D基本元素来做一个立方体的全景图。
在前两节关于3D基本元素的教程里，我们重点放在那些常用的3D基本元素上。在第三节关于3D基本元素的最后一节，我们会介绍非常规的3D基本元素，比如海龟。你说的是海龟？耶，在别的3D引擎里还有奶牛呢，away3D里有海龟这一3D基本元素。
先决条件
本教程建立在我们别的教程基础之上。假如你是flash3D菜鸟，你可能会先要去看看这些教程。举个例子，有些源文件，点击附带的as文件查看它们是如何工作的。所有这些例子都要用到一个Cover.as文件。这个文件是让教程里用到的flash影片不能同时工作，否则会拖垮你的电脑。如果你不确定如何使用这些例子，查看这个教程。
教程里的一部分例子会用到“纹理”。关于纹理与材质我们会在后边教程详细介绍，如果要让代码在flash cs3里工作， 读这个教程.
The Triangle（三角形）
三角形是3D模型的基石。虽然单个三角形用处不大，但多个三角形组合在一块就可以生成任何模型。更幸运的是away3D允许从3D软件导入复杂的模型，这样就不用我们用一块块三角形去拼凑出复杂模型。三角形还有别的用途。三角形是3D基本元素中最小单元，它常用于象粒子效果那样的资源密集物。
创建三角形你就要在3D空间里设置ac三点。每点都是顶点（由x/y/z定位的点），如下：
1.var tri:Triangle = new Triangle();tri.a = new Vertex(0,200,0);
2.tri.b = new Vertex(100,0,0);tri.c = new Vertex(-100,0,0);tri.bothsides = ***e;
3.view.scene.addChild(tri);
下面是完整的三角形例子：
点击查看
Basic08_triangle.as
注意，我们把三角形的"bothsides"属性设为***e.假如不这样做，我们只能看到三角形的一面。
The Plane（平面）
平面是一个没有厚度的矩形。默认情况下，平面有两个三角形组成。但是你可以据需要增加三角形数量。平面是第二轻量级3D基本元素。但它却是完成一些任务的不二之选。当你创建“电视墙”时，用机个“平面”并将电影材质放于其上就可以了。平面在3D场景里做衬托地面也非常有用。看这个例子
前面提到，away3d支持两种代码书写方式。你创建一个对象时，你可以把属性值传给构造函数，也可以在创建对象后设置属性。让我们看看这两种可能的方式。
第一种方法可以在类构造函数里传递该类所有的参数。下面代码创建一个黑线白框平面。
1.var myPlane
lane = new Plane({material:"white#black",rotationX:-90});
2.View.scene.addChild(myPlane);
这种书写方式非常简洁。可以很容易指定所要的线框颜色。当然你还可以分开声明每个属性：
1.var mat:WireColorMaterial = new WireColorMaterial();mat.color = 0xff0000;
2.mat.wirecolor = 0x000000;var myPlane
lane = new Plane();myPlane.material = mat;
3.myPlane.rotationX = -90;View.scene.addChild(myPlane);
这种方式要繁琐点，但许多开发者为了代码的可读性宁愿使用者种方式。使用何种方式完全由你决定。许多开发者对代码书写方式有强烈的个人偏好，为了讨好所有人away3D对两种方式都支持。
你可能注意到，在这个例子里我们将平面沿X轴转了90度，这是因为平面没有厚度，只有转动让平面朝向我们才能看到它。
你可以通过设置segment参数调整平面的复杂度：
1.myPlane.segmentsW = 4;myPlane.segmentsH = 6;
这句可以增加平面里的三角形密度，这对补偿因三角形过少而产生的失真。点击按钮体验这个问题：
点击查看
Textures.as
下面让我们来看看使用平面的更有代表性的代码。下面你看到一套由Adobe 公司的John Nack 设计的cs3图标，点击、拖动，可以看到颜色分离。然后对齐外框让图片再次重合。
点击查看
Basic08_plane.as
分离的四张透明png格式图片，模拟CMYK分离效果。这个是这样实现的：让HoverCam3D绕五个平面转动，CMYK和一个白色平面就像五张纸通过BlendMode.MULTIPLY组合.
The Cube（立方体）
立方体有高、宽、厚度。你可以为每个面设置不同的材质。
点击查看
Basic08_cube.as
同样有两种代码书写方式：
1.cube = new Cube({width:200,height:100,depth:300});
你也可以写成更具可读性：
1.var cube:Cube = new Cube();cube.width = 200;cube.height = 100;cube.depth = 300;
那种方式由你决定。使用cubeMaterials属性设置六个面（top, bottom, left, right, front and back）的材质，就像下面代码那样：
1.cube.cubeMaterials.left = new ColorMaterial(0xffffff,{alpha:.3});
每个3D物体都可以沿x/y/z轴进行一些移动、旋转等操作，如下：
1.cube.x = 200;cube.rotationY = 45;
更详细的关于3D物体的操作介绍看这个教程。现在我们将立方体用于项目中。下面是音乐波形显示条的例子。波形条的高度、颜色和滤镜都是根据波形变化发生变化。
点击查看
Basic08_cube_music.as
蓝色的立方体描述右声道而红色立方体描述的是左声道。每个声道的波谱被平分成八份，每个立方体表现声谱的一部分情况。每部分的最大值存在一个数组里并设置渐变。每次检测到新的最大值时，我们就应用模糊滤镜并增加尺寸与颜色。查看源码分析详细情况。(更多3DAway3d 基础教程分享尽在Web3D纳金网http://www.narkii.com/)
作者:
铁锹
时间:
2012-12-6 23:38
【Away3d 基础教程】Away3d 基础教程总目录
作者:
铁锹
时间:
2012-12-6 23:39
【Away3d 基础教程】对一个简单类的解释1
【Away3d 基础教程】视口与场景2
【Away3d 基础教程】相机3
【Away3d 基础教程】操控三维物体4
【Away3d 基础教程】3D基本元素5(1)
【Away3d 基础教程】3D基本元素5(2)
作者:
89684598
时间:
2014-2-22 15:12
好东西啊，感谢分享
欢迎光临 纳金网 (http://course.narkii.com/club/)
Powered by Discuz! X2.5
lane = new Plane({material:"white#black",rotationX:-90}); lane = new Plane();myPlane.material = mat;