Away3d实例教程 - 贴图(texture mapping)

本篇会包含以下内容:

  • 嵌入外部图片(Away3D支持所有falsh支持的格式图片),用于贴图。
  • 贴图原理
  • 几种贴图类型:BitmapMaterial,TransformBitmapMaterial,PhongBitmapMaterial.

本例会用到的图片:

away3d checker earth Away3d实例教程 - 贴图(texture mapping)

先看本例子最终效果:点击观看

再看完整代码(Flex):

   1:  package
   2:  {
   3:      import away3d.cameras.Camera3D;
   4:      import away3d.containers.Scene3D;
   5:      import away3d.containers.View3D;
   6:      
   7:      import away3d.materials.BitmapMaterial;
   8:      import away3d.materials.PhongBitmapMaterial;
   9:      import away3d.materials.TransformBitmapMaterial;
  10:      
  11:      import away3d.primitives.Cube;
  12:      import away3d.primitives.Cylinder;
  13:      import away3d.primitives.Sphere;
  14:      import away3d.primitives.Torus;
  15:      import away3d.containers.ObjectContainer3D;
  16:      import away3d.lights.DirectionalLight3D;
  17:          
  18:      import away3d.core.math.Number3D;
  19:      import away3d.core.utils.Cast;    
  20:      
  21:      import flash.display.Sprite;
  22:      import flash.events.Event;    
  23:      
  24:      [SWF(width="700",height="600",backgroundColor="#000000")]
  25:      public class textmapping extends Sprite
  26:      {
  27:          //声明变量
  28:          private var view:View3D;
  29:          private var cam:Camera3D;
  30:          private var sce:Scene3D;
  31:          
  32:          private var group:ObjectContainer3D;
  33:          private var sphere:Sphere;
  34:          private var cube:Cube;
  35:          private var centerCube:Cube;
  36:          private var torus:Torus;
  37:          private var cylinder:Cylinder;
  38:          private var light:DirectionalLight3D;
  39:          
  40:          private var earthMaterial:BitmapMaterial;
  41:          private var checkerMaterial:BitmapMaterial;
  42:          private var away3dMaterial:PhongBitmapMaterial;
  43:          private var tiledAway3dMaterial:TransformBitmapMaterial;
  44:          private var woodMaterial:BitmapMaterial;
  45:          
  46:          private static const ORBITAL_RADIUS:Number = 150;
  47:          //插入图片资源用于贴图(分类flex里用Embed标签、Cast.bitmap嵌入、使用图片资源,flash cs3如何嵌入看附录1)
  48:          [Embed(source="resources/earth.jpg")] private var earthImage:Class;
  49:          [Embed(source="resources/away3D.png")] private var away3dImage:Class;
  50:          [Embed(source="resources/checker.jpg")] private var checkerImage:Class;
  51:          [Embed(source="resources/wood.jpg")] private var woodImage:Class;
  52:          public function textmapping():void
  53:          {
  54:              //3D初始化 
  55:              init3D();
  56:              //创建场景  
  57:              createScene();
  58:              //添加侦听器-逐帧执行onEF(渲染并产生运动)
  59:              this.addEventListener(Event.ENTER_FRAME,onEF);
  60:          }
  61:          
  62:          private function init3D():void
  63:          {
  64:              //初始化摄像机
  65:              cam=new Camera3D({zoom:25, focus:30, x:-200, y:400, z:-400});
  66:              cam.lookAt(new Number3D(0, 0, 0));
  67:              //初始化场景
  68:              sce=new Scene3D();
  69:              //初始化视口
  70:              view=new View3D({camera:cam,scene:sce,x:350,y:300});
  71:              addChild(view);                      
  72:          };
  73:          private function createScene():void
  74:          {
  75:              //生成位图材质(78行定义的away3dMaterial是phongBitmapMaterial类型,该类型需要光源)
  76:              earthMaterial=new BitmapMaterial(Cast.bitmap(new earthImage())); 
  77:              checkerMaterial=new BitmapMaterial(Cast.bitmap(new checkerImage()));
  78:              away3dMaterial=new PhongBitmapMaterial(Cast.bitmap(new away3dImage()),{smooth:true, precision:2});
  79:              tiledAway3dMaterial=new TransformBitmapMaterial(Cast.bitmap(new away3dImage()),{repeat:true, scaleX:.5, scaleY:.5});
  80:              woodMaterial=new BitmapMaterial(Cast.bitmap(new woodImage()));
  81:              
  82:              //添加光源(有了光源phongBitmapMaterial才能有光影效果,有光影效果会在下节讲到)
  83:              light=new DirectionalLight3D();
  84:              light.position=new Number3D(100,100,-200);
  85:              sce.addChild(light);
  86:              //新建容器并显示
  87:              group=new ObjectContainer3D();
  88:              sce.addChild(group);
  89:              //新建3D元素,并使用material属性为3D元素添加贴图材质
  90:              //新建3D元素-centerCube
  91:              centerCube=new Cube({material:away3dMaterial,width:75,height:75,depth:75});
  92:              group.addChild(centerCube);
  93:              //新建3d 元素 - sphere
  94:              sphere=new Sphere({radius:50,segmentsW:10,segmentsH:10,material:earthMaterial});
  95:              group.addChild(sphere);
  96:              sphere.x=ORBITAL_RADIUS;
  97:               //新建3d 元素 - totrus
  98:               torus=new Torus({radius:50,tube:20,segmentsT:8,segmentsR:16,material:checkerMaterial});
  99:               group.addChild(torus);
 100:               torus.x=-ORBITAL_RADIUS;
 101:                //新建3d 元素 - cylinder
 102:              cylinder=new Cylinder({radius:25,height:100,segmentsW:16,material:woodMaterial});
 103:              group.addChild(cylinder);
 104:              cylinder.z=ORBITAL_RADIUS;
 105:               //新建3d 元素 - totrus
 106:               cube=new Cube({width:75,height:75,depth:75,material:tiledAway3dMaterial});
 107:               group.addChild(cube);
 108:               cube.z=-ORBITAL_RADIUS;
 109:          };
 110:          private function onEF(e:Event):void
 111:          {
 112:               // 旋转3D物体
 113:              group.yaw(1);
 114:              
 115:              sphere.yaw(-4);
 116:              cube.yaw(-4);
 117:              cylinder.yaw(-4);
 118:              torus.yaw(-4);
 119:              //一定要渲染哟
 120:              view.render();
 121:          };
 122:   
 123:      }
 124:  }
 
这些平面图片是如何贴到3D模型上的呢,看下图就明白了:
texturemapping 
更详细内容看:http://blog.tartiflop.com/2008/11/first-steps-in-away3d-part-3-texture-mapping/

 

 

附录1:在flash cs3或更早版本嵌入图片

  • 将图片导入库
  • 右击图片->链接-> 输入类名

    见图(以新建earthMaterial为例):

    linkage_thumb

    这样,我们只要将76行代码换成earthMaterial=new BitmapMaterial(new earth()); 就好了

你可能感兴趣的:(Blog,Flex,Flash)