Alternativa3D教程之三——Materials材质

cdl51

In this tutorial we will learn how to texture polygonal objects with Alternativa3D methods. We’ll allpy textures to a house built in previous tutorial, so if you didn’t complete it before, it is recommended to do that.
在这一节的向导中，我们将要学习如何利用Alternativa3D的方法建立多边形材质对象。我们要给上一节中的房子合成材质。因此，如果你之前还没有做完的话，建议你先将它完成。
Create new project named TexturingTutorial and place [url=http://www.p-boy.cn/go.php?http://docs.alternativaplatform. ... orial.zip?version=1]source code[/url] of lesson in it. Don’t forget to connect SWC-libraries from Alternativa3D package.
创建新项目，命名为TexturingTutorial并将源代码加入其中。不要忘记连接Alternativa3D包中的SWC库文件。
Project consists of three classes and two graphic files containing textures of bricks and roof tiling. We will use rectangular textures to reduce calculating a lil’bit. Main class, as usual, contains scene creation code and necessary event handlers. The only difference is in type of object being added, this time it is TexturedHouse class object. TexturedHouse class is a descendant of House class (created in a previous tutorial), and it redefine setMaterials() method.
项目中包含了3个类、两个包含砖和瓦盖材质的绘图文件，我们使用矩形材质来减少一些计算。通常，主类包含了建立场景的代码和必要的事件处理机制。这里唯一的区别是加入了对象类型，现在用到的是TexturedHouse类对象。TexturedHouse类是House的子类（在之前的教程中建立过），并且重新定义了setMaterials方法。
Materials and UV-coordinates——材质和UV坐标
Basic thing to get polygonal object draw in Alternativa3D is material. You can set material to every object’s surface, and one surface may contain only one material. In previous lessons we used alternativa.engine3d.materials.WireMaterial, which draws polygons’ edges. This time we’ll use with fill and texture materials.
在Alternativa3D中获得多边形对象绘制的基本对象是材质，你可以给任何对象表面设置材质，一个表面只能包含唯一的材质。在之前的教程中我们使用了alternativa.engine3d.materials.WireMaterial，它用来绘制多边形的边缘，这一次我们将填充纹理材质。
To be able for material to put texture on a face of 3D-object, it is necessary to set a way to find texture point corresponding given face point. It is achieved by setting texture coordinates for first three vertices, forming the face. Depending on given values, transformation matrix between texture plane and face plane is being formed.
为了能够把材质与3D对象纹理对应上，必须建立一种方式寻找纹理的点来符合面上的点，实现给前三个顶点设置纹理坐标来形成面。通过传值，当纹理平面和所建立的平面被创建之后，在两者之间使用matrix变形。
Coordinates in texture space are marked as U and V symbols, as a convention. Lower left texture corner has U = 0, V = 0 coordinates, upper right – U = 1, V = 1. You can see rectangular texture piece and triangle face projection to texture coordinates space, set by vertices a, b and c.
在纹理空间的坐标被U、V记号所标记，作为协议。左下角的坐标U = 0, V = 0，右上角U = 1, V = 1。你能看到给纹理坐标空间的矩形纹理和三角面投影，设为a、b、c顶点。
Texturing object——纹理对象
Let’s see how to set UV-coordinates for walls. Every wall is formed by one face. We have to set UV-coordinates for first three face’s vertices in order to apply texture. In our case they are lower-left, lower-right and upper-right wall points. Let’s agree that texture size is equal to wall size. Then, if we set wall height as H and it’s length as L, and take into account that corners’ coordinates vary from 0 to 1, and textures are rectangular, UV-coordinates of first three vertices will be (0, 0), (L/H, 0) and (L/H, 1) accordingly. Let’s take into account that walls standing along different axes will have different right side coordinates. As a result, we can prepare needed values:
我们看看如何给墙面设置UV坐标。每个墙由一个面所构建，我们必须设置UV坐标给前三个顶点来应用纹理。在我们的例子中他们是墙面的左下、右下和右上的点。我们需要纹理尺寸和墙面尺寸保持一致，然后，如果我们把墙的高度设为H、长度设为L，考虑角的坐标从0到1的改变，纹理是矩形的，前三个点的UV坐标则相应是(0, 0), (L/H, 0) 和(L/H, 1)。我们考虑墙沿着不同坐标矗立着，将会有不同的右侧坐标。因此，我们可以准备所需要的值：

1. // Texture fills the wall by the height once——纹理填充墙的高度  
   
2. var wallsReferenceHeight:Number = wallsHeight;  
   
3. // U-coordinates of right walls' sides. First coordinate is for northern and southern walls, second is for western and eastern ones  
   
4. //墙右侧的U坐标，第一个坐标是北墙和南墙，第二个是西墙和东墙。  
   
5. var wallU:Array = [houseWidth / wallsReferenceHeight, houseLength / wallsReferenceHeight];

复制代码

Next step is calculating UV-coordinates for roof faces. This will be slightly more difficult because of their trapezium shape. Let’s agree that texture heigth is equal to a roof slope height. So, defining slope height as H, lower slope length as bL and upper slope length as tL, UV coordinates of slope first three vertices will be (0, 0), (bL/H, 0) and ((bL + tL)/2H, 1) accordingly. It is necessary to adjust V-coordinate of the upper edge for western and eastern sides of the roof, by dividing eastern slope height by northern one.
下一步计算屋顶面的UV坐标。这会有点不同，因为他们是梯形。我们设定纹理高度等于屋顶斜坡高度，因此，定义斜坡高度为H，底部斜坡为bL，顶部斜坡为tL，前三个顶点的UV坐标点顺序就会是 (0, 0), (bL/H, 0) 和((bL + tL)/2H,1)。 有必要用东侧和西侧斜坡来划分西侧、东侧屋顶的上部边缘，调整他们的V坐标。

1. // Northern and southern roof slopes' height——北侧和南侧屋顶高度  
   
2. var snSlopeHeight:Number = getHypotenuse(roofHeight, (roofBottomLength - roofTopLength) / 2);  
   
3. // Western and eastern roof slopes' height——西侧和东侧屋顶高度  
   
4. var weSlopeHeight:Number = getHypotenuse(roofHeight, (roofBottomWidth - roofTopWidth) / 2);  
   
5. // Texture fills whole nortern or southern slope by height——纹理填充整个北侧和南侧的高度  
   
6. var roofReferenceHeight:Number = snSlopeHeight;  
   
7. // U-coordinates of lower-right vertices of the roof slope. First coordinate is for northern and southern slope, second is for eastern and western one  
   
8. //屋顶斜坡的右下角的U坐标。第一个坐标是北侧和南侧的斜坡，第二个坐标是东侧和西侧的斜坡。  
   
9. var roofBottomU:Array = [roofBottomWidth / roofReferenceHeight, roofBottomLength / roofReferenceHeight];  
   
10. // U-coordinates for upper-right vertices of the roof slope. First coordinate is for northern and southern slope, second is for eastern and western one  
    
11. //屋顶斜坡的右上角的U坐标。第一个坐标是北侧和南侧的斜坡，第二个坐标是东侧和西侧的斜坡。  
    
12. var roofTopU:Array = [0.5 * (roofBottomWidth + roofTopWidth) / roofReferenceHeight, 0.5 * (roofBottomLength + roofTopLength) / roofReferenceHeight];  
    
13. // V-coordinates for upper vertices of the roof slope. First coordinate is for northern and southern slope, second is for eastern and western one  
    
14. //屋顶斜坡的上部的V坐标。第一个坐标是北侧和南侧的斜坡，第二个坐标是东侧和西侧的斜坡。  
    
15. var roofTopV:Array = [1, weSlopeHeight / roofReferenceHeight];

复制代码

Now, having all necessary coordinates calculated, we can set them to faces.
现在，所有必要的坐标都计算过了，我们可以设置他们的面了。

1. // Running over plane XY quadrants, beginning from zero  
   
2. //运行XY象限，从0开始  
   
3. for (var i:int = 0; i < 4; i++) {  
   
4.     // wall mapping——墙面映射  
   
5.     // U-coordinate of wall right side——墙面右侧U坐标  
   
6.     var u:Number = wallU[i & 1];  
   
7.     setUVsToFace(new Point(0, 0), new Point(u, 0), new Point(u, 1), "wall_" + i);  
   
8.     // roof slope mapping——屋顶斜坡映射  
   
9.     setUVsToFace(new Point(0, 0), new Point(roofBottomU[i & 1], 0), new Point(roofTopU[i & 1], roofTopV[i & 1]), "roof_slope_" + i);  
   
10. }  
    
11.    
    
12. // upper roof side mapping——屋顶上部映射  
    
13. setUVsToFace(new Point(0, 0),  
    
14.     new Point(roofTopLength / roofReferenceHeight, 0),  
    
15.     new Point(roofTopLength / roofReferenceHeight, roofTopWidth / roofReferenceHeight),  
    
16.     "roof_top");

复制代码

After setting texture coordinates we have to set texture materials to according surfaces. While creating texture material, it is necessary to define alternativa.types.Texture class instance, which is used for filling. Texture has to have graphics set, which is being get from project files in our case:
设置完纹理坐标之后我们必须根据表面设置纹理材质，在创建纹理材质时，必须定义alternativa.types.Texture类，用于填充。纹理必须拥有图形设置，可以从我们例子的项目文件中获得：

1. [Embed(source="resources/wall.jpg")] private static const bmpWall:Class;  
   
2. [Embed(source="resources/roof.jpg")] private static const bmpRoof:Class;  
   
3. private static const wallTexture:Texture = new Texture(new bmpWall().bitmapData, "wall");  
   
4. private static const roofTexture:Texture = new Texture(new bmpRoof().bitmapData, "roof");  
   
5.    
   
6. //...  
   
7.    
   
8. // Set solid fill for lower roof parts and house box  
   
9. //为屋顶底部和房子体设置固定填充  
   
10. setMaterialToSurface(new FillMaterial(0x666666), "roof_bottom");  
    
11. setMaterialToSurface(new FillMaterial(0x666666), "box_bottom");  
    
12.    
    
13. // Set texture materials for roof and walls  
    
14. //为屋顶和墙面设置纹理材质  
    
15. setMaterialToSurface(new TextureMaterial(wallTexture), "walls");  
    
16. setMaterialToSurface(new TextureMaterial(roofTexture), "roof");

复制代码

We get this house as a result.
我们得到了这所房子了。