Alternativa3D教程之二——Building geometry建筑几何

cdl51

In this tutorial we will build a house using Alternativa3D methods to create objects’ geometry. Our house will be pretty simple – four walls and a roof, but we’ll get to know how to create vertices and faces, and how to form surfaces from faces’ groups.
在这个向导中我们将使用Alternativa3D方法来建立一个房子的几何对象。我们的房子非常简单——四面墙、一个房顶，但是我们将学会如何建立多个顶点和多个面，并且从多个面的组里面构建表面。
Create new project with GeometryTutorial name in your programming software, and put classes source code of this tutorial in it. Connect SWC-libraries from Alternativa3D package.
在你的程序里面创建一个新项目，命名为GeometryTutorial，然后把源文件放进去。连接Alternativa3D包中的SWC库。
We already know main class structure from previous tutorial. We set scene, put camera, and set necessary event handlers. The difference is that we put an instance of House class instead of cube primitive.
从上一节向导中我们已经知道了主类的构建，设置场景、加入摄像机和设置必要的事件处理机制。这里不同的是，我们加入一个House类来代替那个原始立方体。
House class——House类
House class is a descendant of alternativa.engine3d.core.Mesh class, which provide polygonal objects creation methods.
House类是alternativa.engine3d.core.Mesh的子类，它提供了多边形对象的构建方法。
You should create vertices in order to construct an object. To understand which vertices our object will have, lets draw house projections on a planes XY and YZ:
你应该通过建立多个顶点来构建对象。理解我们对象里存在的顶点，让我们先在XY、YZ平面画一下房子的预测：
It is easy to understand that our house has 16 vertices. Eight of them are in corners of walls, another eight are in corners of roof. Let’s create vertex identification system: vertex identyfier will consist of plane name and quadrant XY number. Quadrant names are marked on the first pic, house planes – on a second pic. So, eastern wall (east equal X axis direction here) is formed by following vertices: box_bottom_3, box_bottom_0, box_top_0, box_top_3.
很容易理解，我们的房子拥有16个顶点。8个点位于墙角，其他的8个点在房顶的角上。让我们建立顶点识别系统：顶点系统由平面名称和XY象限数字组成。象限命名标记在第一张图上，房子平面在第二张图。所以，东面的墙（东等于X轴方向）由下面的顶点来构建：box_bottom_3, box_bottom_0, box_top_0, box_top_3。
Let’s create a method to form vertices in a given house plane:
我们创建一个方法来构建房子平面的顶点：

1. // Rectangle width is along X, length along Y  
   
2. //矩形的宽度沿x轴，长度沿Y轴  
   
3. private function addRectangleVertices(rectWidth:Number, rectLength:Number, rectZ:Number, idPrefix:String):void {  
   
4.     var hw:Number = rectWidth / 2;  
   
5.     var hl:Number = rectLength / 2;  
   
6.     // Add first quadrant vertex——添加第一个顶点  
   
7.     createVertex(hw, hl, rectZ, idPrefix + "_0");  
   
8.     // Add second quadrant vertex——添加第二个顶点  
   
9.     createVertex(-hw, hl, rectZ, idPrefix + "_1");  
   
10.     // Add third quadrant vertex——添加第三个顶点  
    
11.     createVertex(-hw, -hl, rectZ, idPrefix + "_2");  
    
12.     // Add fourth quadrant vertex——添加第四个顶点  
    
13.     createVertex(hw, -hl, rectZ, idPrefix + "_3");  
    
14. }

复制代码

Now using this function we can easily form all necessary vertices for our house:
现在使用这个方法，我们能够很方便的构建房子所有需要的顶点：

1. // Create lower rectangle of the house box——构建房子体的底部矩形  
   
2. addRectangleVertices(houseWidth, houseLength, 0, "box_bottom");  
   
3. // Create upper rectangle of the house box——构建房子体的顶部矩形  
   
4. addRectangleVertices(houseWidth, houseLength, wallsHeight, "box_top");  
   
5. // Create lower rectangle of the house roof——构建房顶的底部矩形  
   
6. addRectangleVertices(roofBottomWidth, roofBottomLength, wallsHeight, "roof_bottom");  
   
7. // Create upper rectangle of the house roof——构建房顶的顶部矩形  
   
8. addRectangleVertices(roofTopWidth, roofTopLength, wallsHeight + roofHeight, "roof_top");

复制代码

Next step – faces forming. Face is defined by vertex sequence, set in counter-clockwise order (looking at face from it’s normal).
下一步——构建面。面是由顶点序列定义的，通过逆时针顺序来设置（看一下正常的面）。

1. // Walls forming faces array——构建墙面的数组  
   
2. var wallsFaces:Array = [];  
   
3. // Roof forming faces array——构建房顶面的数组  
   
4. var roofFaces:Array = [];  
   
5. // Roof bottom forming faces array——构建房顶底部的数组  
   
6. var roofBottomFaces:Array = [];  
   
7.    
   
8. // Create faces for every XY plane quadrant——为XY象限平面创建面  
   
9. for (var i:int = 0; i < 4; i++) {  
   
10.     var j:int = (i + 1) & 3;  
    
11.     // Create wall face and save it in array for further surface forming  
    
12.     // 创建墙面并保存在数组中以便将来构建表面  
    
13.     wallsFaces.push(createFace(["box_bottom_" + i, "box_bottom_" + j, "box_top_" + j, "box_top_" + i], "wall_" + i));  
    
14.     // Create roof slope face and save it in array for further surface forming  
    
15.     // 创建房顶坡面并保存在数组中以便将来构建表面  
    
16.     roofFaces.push(createFace(["roof_bottom_" + i, "roof_bottom_" + j, "roof_top_" + j, "roof_top_" + i], "roof_slope_" + i));  
    
17.     // Create roof lower face and save it in array for further surface forming  
    
18.     // 创建房顶底部并保存在数组中以便将来构建表面  
    
19.     roofBottomFaces.push(createFace(["roof_bottom_" + j, "roof_bottom_" + i, "box_top_" + i, "box_top_" + j], "roof_bottom_" + i));  
    
20. }  
    
21. // Create upper face of the upper roof part  
    
22. //创建屋顶上部的面  
    
23. roofFaces.push(createFace(["roof_top_3", "roof_top_0", "roof_top_1", "roof_top_2"], "roof_top"));  
    
24. // Create bottom face of the house box  
    
25. //创建房子底部的面  
    
26. createFace(["box_bottom_3", "box_bottom_2", "box_bottom_1", "box_bottom_0"], "box_bottom");   

复制代码

So, our house geometrical representation is ready. We have to set materials to different parts of the house in order to get it on screen. In Alternativa3D you set materials to surfaces, which are the sets of faces. So we have to create surfaces for our house and set them materials. Let’s do it:
我们房子的几何表现已经准备完毕，还要必须设置房子不同部分的材质以便显示在屏幕上。在Alternativa3D中给表面设置材质，需要对面进行设置。因此我们必须给房子建立表面并设置他们的材质。开始吧：

1. // Create surfaces. We use early created arrays as a set of vertices.  
   
2. //创建表面。我们用之前建立好的数组作为顶点的设置。  
   
3. // Create wall surface——创建墙的表面  
   
4. createSurface(wallsFaces, "walls");  
   
5. // Create upper roof part surface——创建房顶的上表面  
   
6. createSurface(roofFaces, "roof");  
   
7. // Create lower roof part surface——创建房顶的下表面  
   
8. createSurface(roofBottomFaces, "roof_bottom");  
   
9. // Creale loweb house box surface——创建房子的下表面  
   
10. createSurface(["box_bottom"], "box_bottom");  
    
11.    
    
12. //Set surface materials. We use wire materials to keep it simple.  
    
13. //设置表面材质。我们使用线性材质来保持它的简单性。  
    
14. // Set white to the walls——设置白色的墙  
    
15. setMaterialToSurface(new WireMaterial(1, 0xFFFFFF), "walls");  
    
16. // Set yellow to the roof——设置黄色的房顶  
    
17. setMaterialToSurface(new WireMaterial(1, 0xFFFF00), "roof");  
    
18. // Set red to roof bottom——设置红色的房顶底部  
    
19. setMaterialToSurface(new WireMaterial(1, 0xFF0000), "roof_bottom");  
    
20. // Set green to house box bottom——设置绿色的房子底部  
    
21. setMaterialToSurface(new WireMaterial(1, 0x00FF00), "box_bottom");  

复制代码

By combining all the code into House class and compiling it we’ll get this:
集合所有代码放入House类并且编译，我们会得到：

Conclusion——总结
Using this house example, we understood how to create polygonal geometry from the code. We’ll review materials and texturing in next tutorials.
使用这个房子的例子，我们懂得了怎样用代码创建多边形的几何图形，在下一节向导中，我们再检查一下材质和纹理。