首页 > 代码库 > 【Away3D】初步认识

【Away3D】初步认识

  1 package zen.funny
  2 {
  3     import com.greensock.TweenLite;
  4     
  5     import flash.display.Sprite;
  6     import flash.display.StageAlign;
  7     import flash.display.StageScaleMode;
  8     import flash.events.Event;
  9     import flash.events.MouseEvent;
 10     
 11     import away3d.containers.View3D;
 12     import away3d.controllers.HoverController;
 13     import away3d.entities.Mesh;
 14     import away3d.materials.TextureMaterial;
 15     import away3d.primitives.CubeGeometry;
 16     import away3d.textures.BitmapTexture;
 17 
 18     [SWF(backgroundColor="#000000", frameRate="60", quality="LOW")]
 19     public class CubeTest extends Sprite
 20     {
 21         [Embed(source="../../assets/images/floor_normal.jpg")]
 22         private var grassClass:Class;
 23         
 24         private  var _view3D:View3D;
 25         private var cameraController:HoverController;//360全景展示相机控制器
 26         private var box:Mesh;
 27         
 28         private var lastPanAngle:Number;
 29         private var lastTiltAngle:Number;
 30         private var lastMouseX:Number;
 31         private var lastMouseY:Number;
 32         private var move:Boolean;
 33         
 34         public function CubeTest()
 35         {
 36             super();
 37             addEventListener(Event.ADDED_TO_STAGE, init);
 38         }
 39         
 40         private function init(e:Event):void
 41         {
 42             stage.scaleMode = StageScaleMode.NO_SCALE;
 43             stage.align = StageAlign.TOP_LEFT;
 44             
 45             //渲染3D视窗
 46             _view3D = new View3D();
 47             _view3D.antiAlias = 4;        //抗锯齿平滑系数,2的幂,设置越高锯齿越不明显
 48             this.addChild(_view3D);    
 49             
 50             //将位图数据转换成贴图材质
 51             var bmpTexture:BitmapTexture = new BitmapTexture(new grassClass().bitmapData);    //位图纹理,记录贴图信息
 52             var material:TextureMaterial = new TextureMaterial(bmpTexture);                   //位图材质,将材质贴到模型上的皮肤
 53             
 54             var cubeSize:uint = 500;
 55             var cube:CubeGeometry = new CubeGeometry(cubeSize, cubeSize, cubeSize);    //Geometry相当于骨架
 56             
 57             //Geometry几何体
 58             box = new Mesh(cube,material);        //Mesh相当于是附着在Geometry上的皮肤,没有Mesh的Geometry是不能被显示的
 59             _view3D.scene.addChild(box);
 60             initCamera();
 61             
 62             // 添加侦听器来渲染3D世界
 63             addEventListener(Event.ENTER_FRAME, enterFrameHandler);
 64             stage.addEventListener(MouseEvent.MOUSE_DOWN, onm ouseDown);
 65             stage.addEventListener(MouseEvent.MOUSE_UP, onm ouseUp);
 66             stage.addEventListener(MouseEvent.MOUSE_WHEEL,onWheel);
 67         }
 68         
 69         
 70         private function initCamera():void
 71         {
 72             //创建摄像机功能
 73             cameraController = new HoverController(_view3D.camera);
 74             cameraController.distance = 1000;       //摄像机和目标点距离
 75             cameraController.minTiltAngle = 0;      //摄像机以Y轴旋转最小角度
 76             cameraController.maxTiltAngle = 90;     //摄像机以Y轴旋转最大角度
 77             cameraController.panAngle = 45;         //摄像机以Y轴旋转角度
 78             cameraController.tiltAngle = 20;        //摄像机以X轴旋转角度
 79         }
 80         
 81         private function onWheel(e:MouseEvent):void
 82         {
 83             if(e.delta > 0)
 84             {
 85                 if(cameraController.distance < 1000)
 86                     TweenLite.to(cameraController,.5,{distance:cameraController.distance + 100});
 87             }
 88             else
 89             {
 90                 if(cameraController.distance > 600)
 91                     TweenLite.to(cameraController,.5,
 92                         {distance:cameraController.distance - 100});
 93             }
 94         }
 95         
 96         private function onm ouseDown(event:MouseEvent):void
 97         {
 98             lastPanAngle = cameraController.panAngle;
 99             lastTiltAngle = cameraController.tiltAngle;
100             lastMouseX = stage.mouseX;
101             lastMouseY = stage.mouseY;
102             move = true;
103         }
104         
105         private function onm ouseUp(event:MouseEvent):void
106         {
107             move = false;
108         }
109         
110         private function enterFrameHandler(event:Event):void
111         {
112             // 渲染3D世界
113             if (move) 
114             {
115                 cameraController.panAngle = 0.3 * (stage.mouseX - lastMouseX) + lastPanAngle;
116                 cameraController.tiltAngle = 0.3 * (stage.mouseY - lastMouseY) + lastTiltAngle;
117             }
118             _view3D.render();
119         }
120     }
121 }

 

渲染时的执行优先级依次为:

normalMethod

>ambientMethod

>shadowMethod

>diffuseMethod

>specularMethod

>colorTransform

>其它通过addMethod()方法添加的Method

 

一些常用的Method

EnvMapMethod  环境贴图方法

想要物体表面能反射周围环境(如不锈钢,有机玻璃材质)?用这个就对啦..

 1 //创建一个skybox,6块贴图大家自己找,官方demo里有
 2 var cubeTexture:BitmapCubeTexture = new BitmapCubeTexture("6块贴图")
 3 scene.addChild(new SkyBox(cubeTexture));
 4 //创建一个宽高长均为500的方块
 5 var cubeGeometry:CubeGeometry = new CubeGeometry(500, 500, 500);
 6 var cubeMaterial:ColorMaterial = new ColorMaterial();
 7 cubeMaterial.specular = 0.8;
 8 cubeMaterial.alpha = 0.5;
 9 //因为要反射skybox的环境,所以共用skybox的贴图材质
10 //如果你想反射别的东西,也可以使用别的材质
11 cubeMaterial.addMethod(new EnvMapMethod(cubeTexture));
12 var cubeMesh:Mesh = new Mesh(cubeGeometry, cubeMaterial);
13 scene.addChild(cubeMesh);

 

FresnelSpecularMethod  菲涅尔镜面贴图方法

我不想把这东西解释的太复杂,下面有一段摘录自百度百科的内容,相信大家一看就能明白....
(我们站在湖边的时候,低头看脚下的水,水是透明的,反射不是特别强烈;远处的湖面,你会发现水并不是透明的,并且反射非常强烈。这就是“菲涅尔效应”....摘自百度百科)
说白了就是把光线反射变得更柔和,可以使用在湖面材质上,也可以配合SSS散射方式使用在皮肤材质上

FresnelEnvMapMethod  菲涅尔环境贴图方法

SubsurfaceScatteringDiffuseMethod  次表面满散射方式(SSS满散射方式)
这个方法用来模拟光在半透明物体内的折射效果(如人的皮肤,葡萄,蜡烛等)
1 var subsurfaceMethod:SubsurfaceScatteringDiffuseMethod = new SubsurfaceScatteringDiffuseMethod(2048, 2);
2 subsurfaceMethod.scatterColor = 0xff7733;
3 subsurfaceMethod.scattering = .05;
4 subsurfaceMethod.translucency = 4;
5 bodyMaterial.diffuseMethod = subsurfaceMethod;

WrapDiffuseMethod
包裹散射方式,接近于SSS满散射方式,但更粗糙一些

ColorTransformMethod
颜色转换方法,效果与直接设置material.colorTransform一样,在执行顺序上会晚于material.colorTransform的设置
一般情况下不推荐使用,请直接使用material.colorTransform,除非你需要解决一些特殊的问题或Bug
1 var m:ColorTransformMethod = new ColorTransformMethod();
2 m.colorTransform = new ColorTransform(1,0,0);
3 bodyMaterial.addMethod(m);

ColorMatrixMethod
颜色矩阵转换方法,想换贴图的颜色?也可以用它....
但你得具备一些ColorMatrixFilter的知识...
1 var matrix:Array = new Array();
2 matrix = matrix.concat([1, 0, 0, 0, 0]); // red
3 matrix = matrix.concat([0, 0, 0, 0, 0]); // green
4 matrix = matrix.concat([0, 0, 0, 0, 0]); // blue
5 matrix = matrix.concat([0, 0, 0, 1, 0]); // alpha
6 var filter:ColorMatrixFilter = new ColorMatrixFilter(matrix);
7 var m:ColorMatrixMethod = new ColorMatrixMethod();
8 m.colorMatrixFilter = filter;
9 bodyMaterial.addMethod(m);

 


OutlineMethod
轮廓方法,如果材质图某些地方是透明的,但你又想知道整个mesh的形状,可以使用此方法(此方法不受贴图影响,有效边界为geometry边界)

RimLightMethod
轮廓发光方法(有效边界为贴图可视边界,透明部分不受此方法影响)
1 bodyMaterial.addMethod(new RimLightMethod(0xff0000));

 
ProjectiveTextureMethod  投射材质方法
想像一下阳光透过彩色的窗玻璃,这些玻璃上的色彩投射在墙上的效果
或者....heihei.....如果你有一个球体,想再贴一张照片在这球体上....heihei.....
1 var projector:TextureProjector = new TextureProjector(photoBitmapData);
2 projector..position = new Vector3D(0,100,0);
3 bodyMaterial.addMethod(new ProjectiveTextureMethod(projector));

SimpleWaterNormalMethod
想要一些简单的水波效果?用它,就是用它!

SoftShadowMapMethod
想看到物体的阴影被映射在墙角时的弯折效果?就是这个了

DitheredShadowMapMethod  抖动阴影方法