Away3D基础5-3D基本元素（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空间里设置a/b/c三点。每点都是顶点（由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 = true;

3.view.scene.addChild(tri);

下面是完整的三角形例子：

点击查看

Basic08_triangle.as

注意，我们把三角形的"bothsides"属性设为true.假如不这样做，我们只能看到三角形的一面。

The Plane（平面）

平面是一个没有厚度的矩形。默认情况下，平面有两个三角形组成。但是你可以据需要增加三角形数量。平面是第二轻量级3D基本元素。但它却是完成一些任务的不二之选。当你创建“电视墙”时，用机个“平面”并将电影材质放于其上就可以了。平面在3D场景里做衬托地面也非常有用。看这个例子

 

前面提到，away3d支持两种代码书写方式。你创建一个对象时，你可以把属性值传给构造函数，也可以在创建对象后设置属性。让我们看看这两种可能的方式。

 

第一种方法可以在类构造函数里传递该类所有的参数。下面代码创建一个黑线白框平面。

1.var myPlane:Plane = 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:Plane = 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绕五个平面转动，C/M/Y/K和一个白色平面就像五张纸通过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

蓝色的立方体描述右声道而红色立方体描述的是左声道。每个声道的波谱被平分成八份，每个立方体表现声谱的一部分情况。每部分的最大值存在一个数组里并设置渐变。每次检测到新的最大值时，我们就应用模糊滤镜并增加尺寸与颜色。查看源码分析详细情况。