Away3d基础6 – 位图材质

在材质教程第一部分我们讲了纯色材质与线框材质，这些材质看上去效果不佳。在本篇教程里为我们提供了更好的选择---位图纹理。使用它3D模型的光影效果更加逼真。

当然这里说 "逼真"是针对flash的逼真，与众多的基于图形卡的3D游戏来比，逼真不值一提。不过，现阶段，通过给3D模型添加合适的位图纹理的确是个不错的办法。

先决条件

本教程建立在我们别的教程基础之上。假如你是flash3D菜鸟，你可能会先要去看看这些教程。举个例子，有些源文件，点击附带的as文件查看它们是如何工作的。所有这些例子都要用到一个Cover.as文件。这个文件是让教程里用到的flash影片不能同时工作，否则会拖垮你的电脑。如果你不确定如何使用这些例子，查看这个教程。

教程里的一部分例子会用到"纹理"。关于纹理与材质我们会在后边教程详细介绍，如果要让代码在flash cs3里工作， 读这个教程.

为了大体上让大家对位图纹理能达到的效果做一个体验，大家看下例子，在影片上点击会看到随机的位图纹理。

(Basic09_BitmapMaterialExplorer.as)

位图纹理基础

在多个位图材质中BitmapFileMaterial是最易使用的。它能从一Url下载位图并在下载完成后显示。但不是自动显示！为了位图能最终显示出来我们的让"视口"每帧进行渲染。让我们看看实现方法：

1.var earthMaterial:BitmapFileMaterial = new

BitmapFileMaterial("http://www.flashmagazine.com/articlefiles/away3d/resources/earthmap1k.jpg");

2.var sphere:Sphere = new Sphere({material:earthMaterial});

3.view.scene.addChild(sphere);this.addEventListener(Event.ENTER_FRAME,update);

我们先建立位图材质并把这个材质做为参数传给球的构造函数。当然我们也可以将sphere.material赋值为该材质。然后把球添加到舞台并每帧调用"update"函数。"update"函数非常简单，仅对视口进行渲染：

1.private function update(e:Event):void{    view.render();}

你可以浏览完整的代码(Basic09_BitmapFileMaterial.as)，但这样做有个缺点就是位图没下载完之前没有任何东西。所以你可以使用LoadSuccess事件。这样我们可以先建个带淡蓝色的颜色材质的球，等位图下载完成后再设置该位图为这个球的材质。

1.sphere = new Sphere({material:"lightblue"});view.scene.addChild(sphere);

2.view.render();

然后新建一BitmapFileMaterial，并为它添加侦听器，侦听是否下载成功：

1.earthMaterial = new BitmapFileMaterial("http://www.flashmagazine.com/articlefiles/away3d/resources/earthmap1k.jpg");

2.earthMaterial.addEventListener(LoaderEvent.LOAD_SUCCESS,setMaterial);

下载完成后，swf将调用setMaterial方法，所以我们还要这样做：

1.private function setMaterial(e:Event):void{    sphere.material = earthMaterial;

2.    view.render();}

你可以看看完整的文件(Basic09_BitmapFileMaterial2.as).这样做好处是不需要每帧都要执行view.render()

属性我们可以很容易访问到构成位图材质的位图数据。

1.var myBitmap:BitmapData = earthMaterial.bitmap

当你想对应用位图材质后再去改变该材质纹理非常有用。

另外还有一种使用内嵌纹理位图的材质。当然首先你要知道如何在你所使用的编辑器里嵌入位图。下面代码是用于Flex Actionscript 项目。假如你使用的是Flash Cs3，请读这篇教程。 如果你使用的是Flex Builder或Flash Cs4 ，你只要为每个代码示例下载相应的位图文件到命名为resources的子文件夹就好了。

在Flex Builder，一般插入位图的标记放在类定义之前。

1.[Embed(source="resources/earthmap1k.jpg")]private var earthBitmap:Class;

Flash CS4 也能像上边那样使用Embed标签，而在Flash Cs3里你要导入"earthmap1k.jpg"到库，并右击导入文件，选择"Export for Actionscript"，然后在类名空里填"earthBitmap".这样我们将插入的位图传递给球的初始化函数并应用位图材质。

1.var sphere:Sphere = new Sphere({material:earthBitmap});

完整的Flex Builder/Cs4代码：(Basic09_BitmapMaterial.as)，Flash CS3 FLA 文件(Basic09_BitmapMaterial.fla) ，这个FLA文件也在时间线上添加Away3D代码的例子。确保Away3d源文件被拷贝到于fla文件在同一文件夹哟。

If you don't want to use the init-object, so to declare the same using the more declarative syntax. First you'll need to import one of the classes:如你不想在初始化3D物体函数里设置位图材质，那你需要更多的语法，首先要导入Away3D utility类：

1.import away3d.core.utils.Cast;

之后，使用导入的Cast类实例化你的位图：

1.var earthMaterial:BitmapMaterial = new BitmapMaterial( Cast.bitmap(earthBitmap) );

2.var sphere:Sphere = new Sphere();sphere.material = earthMaterial;

3.view.scene.addChild(sphere);view.render();

如上语法繁琐，不过这个语法可通用于Flex与Flash Cs3 。As类： (Basic09_BitmapMaterial2.as) FLA： (Basic09_BitmapMaterial2.fla)

注意：如果你的代码只用于Flex Builder，你可以使用"标准的"形式：

1.var earthBitmapData:BitmapData = Bitmap( new earthBitmap() ).bitmapData;

2.var earthMaterial:BitmapMaterial = new BitmapMaterial( earthBitmapData );

Away3D 支持所有Flash支持的图片格式，所以Away3D一样支持 PNG显示透明区域。 This can be used to achieve interesting effects such as animating skies above the earth这可以让我们实现一些有趣的效果比如地球上的变幻莫测的天空 (看这个例子Earth and Heaven tutorial).

电影剪辑纹理

你还可用电影剪辑做为纹理。这个例子里我们要用到一个名为"caustics.fla"的Away3D的Demo文件，一个用动态纹理的的球。再次罗嗦下用不同开发工具导入方式也不相同，在FlexBuilder里，导入一个SWF格式的电影剪辑要这样：

1.[Embed(source="resources/caustics.swf", symbol="caustics")]

2. private var causticsMovie:Class;

在Flash CS3, 右击 MovieClip选择 "Export for Actionscript" 并设置其类名为 "causticsMovie". 之后在两个工具里代码都是一样的:

1.var materialMovie:MovieClip = new causticsMovie() as MovieClip;

2.var causticsMaterial:MovieMaterial = new MovieMaterial( materialMovie );

3.var sphere:Sphere = new Sphere({material:causticsMaterial});

4.view.scene.addChild(sphere);

AS: (Basic09_MovieMaterial.as) FLA： (Basic09_MovieMaterial.fla)

如果这个用于纹理的电影剪辑是可以交互的，那在3D里仍然可以交互。你只要进行如下设置就可以了。

1.earthMaterial.interactive = true;

注意:使用Flex的话, 你还可以用Flex 组件作为纹理并仍可以交互.，看这个例子 。当然也可以响应事件. 下面我们为求添加一个鼠标点击事件:

1.sphere.addEventListener(MouseEvent3D.MOUSE_DOWN,sphereClick);

下面代码实现点击球时电影剪辑，控制电影剪辑播放或停止。

1.private function sphereClick(e:MouseEvent3D):void{    if(isMaterialPlaying){

2.        materialMovie.stop();        isMaterialPlaying = false;    } else {

3.        materialMovie.play();        isMaterialPlaying = true;    }}

AS (Basic09_MovieMaterial2.as) FLA： (Basic09_MovieMaterial2.fla).

Movie:点击观看

Getting fancy with Phong shading

正如颜色材质那样，位图材质也有方氏阴影材质的版本：PhongBitmapMaterial，创建PhongBitmapMaterial与创建普通的位图材质一样。

1.var earthMaterial:PhongBitmapMaterial = new PhongBitmapMaterial( Cast.bitmap(earthBitmap) );

2.var sphere:Sphere = new Sphere({material:earthMaterial});

3.view.scene.addChild(sphere);

与前面ColorMaterials那样，PhongBitmapMaterial必须在场景上配上一个光源。没有的话，在渲染时就不会光影效果，和普通位图材质没什么不同。

1.var light:DirectionalLight3D = new DirectionalLight3D();

2.view.scene.addChild(light);

3.// Move the light away from the default 0,0,0 position so we'll see some reflection

4.light.y = 500;light.x = -300;light.z = -200;

(Basic09_PhongBitmapMaterial.as)

为了体验ambient, diffuse和specular三属性对光影产生的影响我们可以回顾下前面教程里一个PhongColorMaterial例子。另外也有一个用MovieClips作纹理的方氏材质： PhongMovieMaterial ，这个材质与前面所有方氏材质用法一样，同样也需要一个光源。

1.var causticsMaterial:PhongMovieMaterial = new PhongMovieMaterial( new causticsMovie() as MovieClip );

2.var sphere:Sphere = new Sphere({material:causticsMaterial});

平铺位图

A bitmap tile is an image that can be repeated without the seams showing. By using a small repeatable image of grass, you'll be able to portray an entire lawn without adding gigantic images to your application. To tile an image, you'll need to use a special material called the TransformBitmapMaterial. The following code will create a transform-material and set it to be repeated 5 times across the objects surface:用于平铺的位图其交接处要看不出接缝。这样用一张草的位图就可以平铺出一个草坪，减小文件的尺寸。平铺位图用TransformBitmapMaterial。下面的代码创建一个TransformBitmapMaterial并设置在3D物体表面平铺5位图

1.var transformedMaterial:TransformBitmapMaterial = new TransformBitmapMaterial( image.bitmapData );

2.transformedMaterial.repeat = true;transformedMaterial.scaleX = 0.2;

3.transformedMaterial.scaleY = 0.2;

你还可以偏移和旋转材质:

1.transformedMaterial.offsetX = 25;transformedMaterial.offsetY = 25;

2.transformedMaterial.rotation = 5;

(Basic09_BitmapMaterialExplorer.as)

你不能将这种材质与方氏阴影混合使用，我们可以用更高级的CompositeMaterial实现，CompositeMaterial会在后续的教程里提到。

增加反色光- Environment materials

Be aware that reflective materials come at a cost when compared to bitmap materials. There is a slight CPU overhead to adding a reflection and a big overhead for refraction using the reflective plane that we'll discuss later in this tutorial.这部教程最后一种材质类型是环境材质。它可以反射周围环境的光和物体。实时反射周围环境要大量计算，但这里我们要耍点手段----通过使用一张环境图。

Away3D has two materials that offer environment reflection, the EnviroColorMaterial and the EnviroBitmapMaterial. As you may have guessed by now - the first will use a color and the other will use a bitmap for texture. In addition they'll take a second parameter, a bitmap that will be used for the reflection.

1.var reflectiveMaterial:EnviroBitmapMaterial = new EnviroBitmapMaterial( Cast.bitmap( textureBitmap ), Cast.bitmap( reflectionBitmap ) );

2.reflectiveMaterial.reflectiveness = 0.3;

The reflectiveness property adjusts how much the reflection will "shine through" on the main material. You can adjust this from 0 (no reflection) to 1 (only reflection). One thing to note about reflections is that you only really see them when an object or the camera is moving. Another thing to note is that reflections work best on curved surfaces (not planes). Click and drag in the example below to see this.

(Basic09_EnviroBitmapMaterial.as)

When you move your mouse above the movie, the torus will start to rotate. When you click it, the rotation will stop and you can drag it around as you please. If you look carefully, you'll see that this isn't exactly how real reflections work, but it's more than good enough for realtime 3D.

Getting the best results

Flash 3D is only in it's infancy. In terms of performance and quality it is now where computer games were about 8 years ago. Based on that fact, it's a little unfair to compare Flash 3D to games on the Xbox360, PS3 or Wii. This is however what the end users will do, so what can you do to improve the look of your Flash 3D scene beyond the materials discussed here? There's several tricks and the key is most often in the materials.

Finding the right texture to use in your materials is the first step. If you Google "3d texture maps" you'll find hundreds of sites offering bitmap textures. The general rule is that you'll get what you pay for. Finding free textures that are high quality takes time, so for many it'll be cheaper to just buy them. Many sites offer pre made collections of textures for various purposes. Bricks, crates, wood, water, metal and all other possible materials are found in these packages so they can take you far.

There's also software out there that will let you generate textures for your models. In our initial example where you could click to change materials, we have used some really high quality textures created with a PC software called Genetica. This software will allow you to create an endless amount of very high quality textures that can be "tiled".

After finding the right texture, the next step is to add more depth to your scene. Think about this - if you move around in an outdoor scenery (as in a FPS game), the shadows will always be in the same place since the sun isn't moving noticeably. This makes it possible to "pre-bake" the textures - adding the shadows onto the texture itself. If done right, this will make your 3D environment look really rich. The process of baking textures cannot be done in the 3D engine itself, but must be done in a modeling application (3DS MAX, Maya, Blender and many others) that support "baking" textures.

There's also two more kinds of materials in Away3D; the powerful Dot3 material and the CompositeMaterial that allow you to combine several materials into one. Both of these offer a lot of possibilities and we'll get back to them in separate tutorials later. As a teaser, look what the Dot3 material can do to the simple torso model below.

 

(Pedestal.as)

By adding a Dot3 bitmap material with a Normal Map, this simple model looks like it's built of thousands of polygons! Away3D even has a class to generate these Normal maps and also supports bump mapped surfaces.

Background image for article header was based upon an image by Image Editor and used under a CC license. Look at how those stars shine :)