away3d4.0 新手入门系列教程 第三讲 位图贴图

D调的华丽

这一节我们来讲讲away3d的位图贴图部分。

在将这一部分 我们必须先来了解下和位图贴图有关的几个元素。

1：UV：做过3D的人都比较清楚。UV是我们再画贴图前必须拆解的。U和V不同于我们模型中的点。他横向为U纵向为V 用来精确指示我们的位图的填充范围。在3D模型中我们可以将模型的UV展平，并提取出来，然后再平面软件中以UV为标准画出贴图，这样我们的贴图也可以精确的再模型中填充出来。

2：法线贴图(Normals)：这是是在我们做模型贴图中非常重要的一个元素。法线并非真正的线。而是一个。它是一条垂直于曲线上节点和表面切线方向上的虚拟线，使用正负值来表示和区别多边形上面和点的法向参数，并且只有法线为正值的点和面在场景中才可见(这一句 借鉴rakuten的解释)。我们通常用法线贴图在低模中表现纹理。特别是在游戏模型中。为了表现出优秀的纹理。我们在制作模型的时候经常会制作2个模型，一个高模，一个低模。在高模中烘焙出带着纹理的法线贴图，然后再低模中以法线贴图贴上去。这样我们的一个低模就可以变现出数十万级别多边形的高模的纹理。

3：BitmapTexture(位图纹理 ps:我直译的。应该也出不多)。这个是away3d中的位图容器。不管是贴图还是法线贴图都是用BitmapTexture来存放起来 以贴给模型。

4：TextureMaterial(纹理贴图)  这个就是away3d的位图贴图 我们只需将TextureMaterial赋予给Mesh然后Mesh就拥有了位图贴图

5：Method ：这个通常做特效只用。如阴影，反射，等等。我们再这里仅需要先了解下即可 在以后的章节里我会着重讲解。



好了 知识要点了解到这了  我么现在开始做一个地面（Floor）;



创建地面PlaneGeometry我就不详解了。入不了解请看第一节

创建位图纹理;

var bitmapTexture:BitmapTexture=new BitmapTexture(new _floorTexture().bitmapData);

创建纹理体位图

var textureMaterial:TextureMaterial=new TextureMaterial(bitmapTexture);

将纹理贴图贴到Mesh

_floor=new Mesh(plane,textureMaterial);

现在我们输出可以看到如下图





好了 我们贴图已经贴上去了 但是这个稍显平了点 别忘了 我们还有纹理贴图

textureMaterial.normalMap=new BitmapTexture(new _floorNormal().bitmapData);

现在我们输出的时候就可以看到下图



细节是不是都出来了 当然 这个前提是需要灯光的



以下是全部的代码

package

{

import away3d.containers.View3D;

import away3d.entities.Mesh;

import away3d.lights.DirectionalLight;

import away3d.materials.TextureMaterial;

import away3d.materials.lightpickers.StaticLightPicker;

import away3d.primitives.PlaneGeometry;

import away3d.textures.BitmapTexture;



import flash.display.Sprite;

import flash.events.Event;

import flash.geom.Vector3D;
[SWF(width='1024',height='768')]

public class Away3DTexture extends Sprite

{

  [Embed(source='asset/floor_diffuse.jpg')]

  private var _floorTexture:Class;

  [Embed(source='asset/floor_normal.jpg')]

  private var _floorNormal:Class;

  private var _light:StaticLightPicker;

  private var _view:View3D;

  private var _floor:Mesh;

  public function Away3DTexture()

  {

   _view=new View3D();

   addChild(_view);

   _view.camera.y=500;

   _view.camera.lookAt(new Vector3D(0,0,0));

   

   var planelaneGeometry=new PlaneGeometry(700,700);

   var bitmapTexture:BitmapTexture=new BitmapTexture(new _floorTexture().bitmapData);

   var textureMaterial:TextureMaterial=new TextureMaterial(bitmapTexture);

   textureMaterial.normalMap=new BitmapTexture(new _floorNormal().bitmapData)

   plane.scaleUV(1,1);

   

   

   _floor=new Mesh(plane,textureMaterial);

   _view.scene.addChild(_floor);

   

   var dlirectionalLight=new DirectionalLight(0,-.5);

   

   _light=new StaticLightPicker([dl]);

   

   textureMaterial.lightPicker=_light;

   

   _view.scene.addChild(dl);

   

   

   

   

   

   this.addEventListener(Event.ENTER_FRAME,etnerFrameFunction);

  }

  

  private function etnerFrameFunction(evt:Event):void

  {

   _floor.rotationY+=1;

   _view.render();

  }

}

}

好了 今天的教程到此结束了 。源码和素材我会放到附件里提供给大家。如有疑问欢迎跟帖。

从这一期里，我不在和前几期一样用flash CS6来做。从这一期开始我会使用FlashBuild4.6

wsk

很新的教程！！！

如同

zsg

非常好的入门教程，值得我们学习

蓝调昊

非常非常不错！！！

danceink

很不错的教程~~

神魔黑

測試用

很棒的帖子，謝謝樓主分享

小铁匠

zzlasp

最新的away3d用法，感谢分享。