纳金网

标题: away3d4.0 新手入门系列教程第三讲位图贴图 [打印本页]

作者: D调的华丽 时间: 2012-8-26 12:56
标题: away3d4.0 新手入门系列教程第三讲位图贴图
这一节我们来讲讲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 plane

laneGeometry=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 dl

irectionalLight=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 时间: 2012-9-7 11:44
很新的教程

！！！

作者: 如同 时间: 2012-9-7 17:33

作者: zsg 时间: 2012-9-18 21:47
非常好的入门教程，值得我们学习

作者: 蓝调昊 时间: 2012-9-19 15:19
非常非常不错！！！

作者: danceink 时间: 2012-9-21 16:06

很不错的教程~~

作者: 神魔黑 时间: 2012-9-27 10:36

作者: 測試用 时间: 2012-10-3 14:57
很棒的帖子，謝謝樓主分享

作者: 小铁匠 时间: 2012-10-9 12:24

作者: zzlasp 时间: 2012-10-22 18:48
最新的away3d用法，感谢分享。

作者: Roltec 时间: 2012-10-23 14:41
有没哟源码啊！！！有没有啊

作者: Roltec 时间: 2012-10-23 15:05
我想请问下楼主，那个jpg有什么要求吗？我为什么用别的图片代替就不行呢？

作者: huixiusnow 时间: 2012-10-25 12:36
原帖由 Roltec 于 2012-10-23 15:05 发表:

我想请问下楼主，那个jpg有什么要求吗？我为什么用别的图片代替就不行呢？

-----------------------------------------------------
图片大小是2的幂次方就好，例如：256*256,128*128