Alternativa 3D Series – Tutorial 2 – Adding Material【翻译】
在第一篇文章中我们创建了一个简单的Alternativa 3D程序。编译后我们可以看到一个旋转的线框立方体。本篇文章我将向大家展示如何给立方体填充材质，让立方体看起来更美观。
Alternativa有三种标准材质类型：线框材质，填充材质和纹理材质。前面提到的线框材质可以显示模型的多边形边框。填充材质可以用颜色填充整个多边形模型，边框的显示和线框填充别无二致。最后的纹理材质可以用用一个2d图片填充整个模型。
本节的实例会用三种材质填充的上节做好的立方体。为达到更好的目的，我们需要创建一些按钮和滑动条来让用户操作。
代码
1
<?
xml version
=
"
1.0
"
encoding
=
"
utf-8
"
?>
2
<
mx:Application
3
xmlns:mx
=
"
http://www.adobe.com/2006/mxml
"
4
layout
=
"
absolute
"
5
xmlns:ns1
=
"
*
"
6
width
=
"
600
"
7
height
=
"
400
"
8
color
=
"
#FFFFFF
"
9
backgroundGradientAlphas
=
"
[1.0, 1.0]
"
10
backgroundGradientColors
=
"
[#FFFFFF, #C0C0C0]
"
11
frameRate
=
"
100
"
>
12
13
<
ns1:EngineManager id
=
"
engineManager
"
x
=
"
0
"
y
=
"
0
"
width
=
"
100%
"
height
=
"
100%
"
/>
14
<
mx:HSlider x
=
"
56
"
y
=
"
147
"
width
=
"
53
"
id
=
"
sliderRed
"
minimum
=
"
0
"
maximum
=
"
255
"
snapInterval
=
"
1
"
change
=
"
{ApplicationManager.Instance.onColorChanged()}
"
/>
15
<
mx:Label x
=
"
10
"
y
=
"
147
"
text
=
"
Red
"
color
=
"
#000000
"
/>
16
<
mx:HSlider x
=
"
56
"
y
=
"
199
"
width
=
"
53
"
id
=
"
sliderBlue
"
minimum
=
"
0
"
maximum
=
"
255
"
snapInterval
=
"
1
"
change
=
"
{ApplicationManager.Instance.onColorChanged()}
"
/>
17
<
mx:Label x
=
"
10
"
y
=
"
199
"
text
=
"
Blue
"
color
=
"
#000000
"
/>
18
<
mx:Image x
=
"
10
"
y
=
"
10
"
id
=
"
imgAlternativa
"
source
=
"
@Embed(source='../media/alternativa.jpg')
"
/>
19
<
mx:Image x
=
"
10
"
y
=
"
340
"
source
=
"
@Embed(source='../media/thetechlabs.png')
"
/>
20
<
mx:Button x
=
"
10
"
y
=
"
50
"
label
=
"
Wireframe
"
color
=
"
#000000
"
id
=
"
btnWireframe
"
click
=
"
{ApplicationManager.Instance.setWireMaterial()}
"
/>
21
<
mx:Button x
=
"
10
"
y
=
"
80
"
label
=
"
Texture
"
color
=
"
#000000
"
id
=
"
btnTexture
"
width
=
"
88
"
click
=
"
{ApplicationManager.Instance.setTextureMaterial()}
"
/>
22
<
mx:Button x
=
"
10
"
y
=
"
110
"
label
=
"
Color Fill
"
color
=
"
#000000
"
width
=
"
88
"
id
=
"
btnColorFill
"
click
=
"
{ApplicationManager.Instance.setFillMaterial()}
"
/>
23
<
mx:HSlider x
=
"
56
"
y
=
"
173
"
width
=
"
53
"
id
=
"
sliderGreen
"
minimum
=
"
0
"
maximum
=
"
255
"
snapInterval
=
"
1
"
change
=
"
{ApplicationManager.Instance.onColorChanged()}
"
/>
24
<
mx:Label x
=
"
10
"
y
=
"
173
"
text
=
"
Green
"
color
=
"
#000000
"
/>
25
26
</
mx:Application
>
你会看到，我们可以用标准的flex组件来控制我们的3D程序。本例中我们会创建3个按钮（分别控制三种材质），3个滑动条（来定义红色，绿色和蓝色的线框和填充材质组件）和一些标签。滑动条改变事件可以触发程序调用ApplicationManager的setTextureMaterial方法。按钮的点击事件可以触发程序调用setWireMaterial, setFillMaterial 或 setTextureMaterial 方法，以改变立方体的材质。
代码
1
package
2
{
3
import
alternativa.engine3d.materials.FillMaterial;
4
import
alternativa.engine3d.materials.TextureMaterial;
5
import
alternativa.engine3d.materials.WireMaterial;
6
import
alternativa.utils.ColorUtils;
7
8
import
flash.display.BlendMode;
9
10
import
mx.core.Application;
11
12
/**
13
* The ApplicationManager holds all program related logic.
14
*/
15
public
class
ApplicationManager
16
{
17
protected
static
const
WIREFRAME:
int
=
1
;
18
protected
static
const
TEXTURE:
int
=
2
;
19
protected
static
const
FILL:
int
=
3
;
20
protected
static
var instance:ApplicationManager
=
null
;
21
protected
var currentMaterial:
int
=
0
;
22
protected
var rotatingBox:RotatingBox
=
null
;
23
24
public
static
function get Instance():ApplicationManager
25
{
26
if
(instance
==
null
)
27
instance
=
new
ApplicationManager();
28
return
instance;
29
}
30
31
public
function ApplicationManager()
32
{
33
34
}
35
36
public
function startupApplicationManager():ApplicationManager
37
{
38
//
create a new instance of the rotating box
39
rotatingBox
=
new
RotatingBox().startupRotatingBox();
40
//
give the box a wireframe material by default
41
setWireMaterial();
42
//
tell the camera to look at the box
43
Application.application.engineManager.cameraController.lookAt(rotatingBox.model.coords);
44
45
return
this
;
46
}
47
48
public
function setWireMaterial():
void
49
{
50
currentMaterial
=
WIREFRAME;
51
rotatingBox.model.cloneMaterialToAllSurfaces(
new
WireMaterial(
1
, getCurrentColor()));
52
}
53
54
public
function setTextureMaterial():
void
55
{
56
currentMaterial
=
TEXTURE;
57
rotatingBox.model.cloneMaterialToAllSurfaces(
new
TextureMaterial(ResourceManager.Texture1_Tex));
58
}
59
60
public
function setFillMaterial():
void
61
{
62
currentMaterial
=
FILL;
63
rotatingBox.model.cloneMaterialToAllSurfaces(
new
FillMaterial(getCurrentColor(),
1
, BlendMode.NORMAL,
2
,
0x000000
));
64
}
65
66
public
function onColorChanged():
void
67
{
68
//
reapply the current texture, taking into account the new color
69
switch
(currentMaterial)
70
{
71
case
WIREFRAME:
72
setWireMaterial();
73
break
;
74
case
FILL:
75
setFillMaterial();
76
break
;
77
}
78
}
79
80
/**
81
* Returns a uint reprensenting the color specified by the 3 sliders in the main GUI
82
*/
83
protected
function getCurrentColor():uint
84
{
85
return
ColorUtils.rgb(Application.application.sliderRed.value, Application.application.sliderGreen.value, Application.application.sliderBlue.value);
86
}
87
}
88
}
ApplicationManager类又多了很多代码，这些新的代码用来设置立方体的材质。我们引入了一个新的属性——currentMaterial，它的值根据我们设给立方体的材质类型发生改变。
你可以在setWireMaterial, setFillMaterial 和 etTextureMaterial 三个方法中看到这个属性。在这三个方法中我们会调用cloneMaterialToAllSurfaces方法来给立方体设置各种材质。
onColorChanged方法，会在用户改变滑动条修改颜色值时被调用，该方法会根据currentMaterial的当前值来给立方体设置不同材质颜色。细心的你可能会注意到在WireMaterial和FillMaterial的构造函数中都会调用getCurrentColor方法，该方法会返回一个用户滑动选择改变的uint颜色值。
TextureMaterial类有所不同，他可以用一张图片作为材质，而我们如何获得这种材质呢？往下看
代码
1
package
2
{
3
import
alternativa.types.Texture;
4
5
/**
6
* ResourceManager is where we embed and create the resources needed by our application
7
*/
8
public
class
ResourceManager
9
{
10
[Embed(source
=
"
../media/texture1.jpg
"
)]
11
public
static
const
Texture1:Class;
12
public
static
const
Texture1_Tex:Texture
=
new
Texture(
new
Texture1().bitmapData,
"
Texture1_Tex
"
);
13
}
14
}
为获得材质，我们引入了一个新类——ResourceManager. 在这个类中我们导入了一些资源。大家看[Embed(source="../media/texture1.jpg")]。这一行的作用是嵌入一张图片资源。嵌入的这张图片会在Texture类中使用到。然后我们把Texture赋值给TextureMaterial，然后供我们的立方体使用。
总结：大家可以看到，我们根据上节的基础，很容易的创建了一个新的Alternativa 程序。EngineManager, BaseObject 和MeshObject类都没发生变化。（实际上MeshObject的model属性发生了些许变化，由原来的继承自：Object3D，变成了继承自：Mesh）.ApplicationManager仅做了些许变动。同时我们引入了ResourceManager类，他为我们导入一些资源，并把它转化为材质供程序使用。