Away3d实例教程 - 贴图（texture mapping）

本篇会包含以下内容：

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

本例会用到的图片：

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

再看完整代码（Flex）：

package
{
    import away3d.cameras.Camera3D;
    import away3d.containers.Scene3D;
    import away3d.containers.View3D;

    import away3d.materials.BitmapMaterial;
    import away3d.materials.PhongBitmapMaterial;
    import away3d.materials.TransformBitmapMaterial;

    import away3d.primitives.Cube;
    import away3d.primitives.Cylinder;
    import away3d.primitives.Sphere;
    import away3d.primitives.Torus;
    import away3d.containers.ObjectContainer3D;
    import away3d.lights.DirectionalLight3D;

    import away3d.core.math.Number3D;
    import away3d.core.utils.Cast;

    import flash.display.Sprite;
    import flash.events.Event;

    [SWF(width="700",height="600",backgroundColor="#000000")]
    public class textmapping extends Sprite
    {
        //声明变量
        private var view:View3D;
        private var cam:Camera3D;
        private var sce:Scene3D;

        private var group:ObjectContainer3D;
        private var sphere:Sphere;
        private var cube:Cube;
        private var centerCube:Cube;
        private var torus:Torus;
        private var cylinder:Cylinder;
        private var light:DirectionalLight3D;

        private var earthMaterial:BitmapMaterial;
        private var checkerMaterial:BitmapMaterial;
        private var away3dMaterial:PhongBitmapMaterial;
        private var tiledAway3dMaterial:TransformBitmapMaterial;
        private var woodMaterial:BitmapMaterial;

        private static const ORBITAL_RADIUS:Number = 150;
        //插入图片资源用于贴图（分类flex里用Embed标签、Cast.bitmap嵌入、使用图片资源，flash cs3如何嵌入看附录1）
        [Embed(source="resources/earth.jpg")] private var earthImage:Class;
        [Embed(source="resources/away3D.png")] private var away3dImage:Class;
        [Embed(source="resources/checker.jpg")] private var checkerImage:Class;
        [Embed(source="resources/wood.jpg")] private var woodImage:Class;
        public function textmapping():void
        {
            //3D初始化
            init3D();
            //创建场景
            createScene();
            //添加侦听器-逐帧执行onEF(渲染并产生运动)
            this.addEventListener(Event.ENTER_FRAME,onEF);
        }

        private function init3D():void
        {
            //初始化摄像机
            cam=new Camera3D({zoom:25, focus:30, x:-200, y:400, z:-400});
            cam.lookAt(new Number3D(0, 0, 0));
            //初始化场景
            sce=new Scene3D();
            //初始化视口
            view=new View3D({camera:cam,scene:sce,x:350,y:300});
            addChild(view);
        };
        private function createScene():void
        {
            //生成位图材质(78行定义的away3dMaterial是phongBitmapMaterial类型，该类型需要光源)
            earthMaterial=new BitmapMaterial(Cast.bitmap(new earthImage()));
            checkerMaterial=new BitmapMaterial(Cast.bitmap(new checkerImage()));
            away3dMaterial=new PhongBitmapMaterial(Cast.bitmap(new away3dImage()),{smooth:true, precision:2});
            tiledAway3dMaterial=new TransformBitmapMaterial(Cast.bitmap(new away3dImage()),{repeat:true, scaleX:.5, scaleY:.5});
            woodMaterial=new BitmapMaterial(Cast.bitmap(new woodImage()));

            //添加光源（有了光源phongBitmapMaterial才能有光影效果，有光影效果会在下节讲到）
            light=new DirectionalLight3D();
            light.position=new Number3D(100,100,-200);
            sce.addChild(light);
            //新建容器并显示
            group=new ObjectContainer3D();
            sce.addChild(group);
            //新建3D元素，并使用material属性为3D元素添加贴图材质
            //新建3D元素-centerCube
            centerCube=new Cube({material:away3dMaterial,width:75,height:75,depth:75});
            group.addChild(centerCube);
            //新建3d 元素 - sphere
            sphere=new Sphere({radius:50,segmentsW:10,segmentsH:10,material:earthMaterial});
            group.addChild(sphere);
            sphere.x=ORBITAL_RADIUS;
             //新建3d 元素 - totrus
             torus=new Torus({radius:50,tube:20,segmentsT:8,segmentsR:16,material:checkerMaterial});
             group.addChild(torus);
             torus.x=-ORBITAL_RADIUS;
              //新建3d 元素 - cylinder
            cylinder=new Cylinder({radius:25,height:100,segmentsW:16,material:woodMaterial});
            group.addChild(cylinder);
            cylinder.z=ORBITAL_RADIUS;
             //新建3d 元素 - totrus
             cube=new Cube({width:75,height:75,depth:75,material:tiledAway3dMaterial});
             group.addChild(cube);
             cube.z=-ORBITAL_RADIUS;
        };
        private function onEF(e:Event):void
        {
             // 旋转3D物体
            group.yaw(1);

            sphere.yaw(-4);
            cube.yaw(-4);
            cylinder.yaw(-4);
            torus.yaw(-4);
            //一定要渲染哟
            view.render();
        };

    }
}

这些平面图片是如何贴到3D模型上的呢，看下图就明白了：

更详细内容看：http://blog.tartiflop.com/2008/11/first-steps-in-away3d-part-3-texture-mapping/

 

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

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

    见图(以新建earthMaterial为例)：

   

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