返回 导航

Flex

hangge.com

Away3D - 使用SkyBox绘制环境背景(及物体表面的反射)

作者:hangge | 2015-11-10 08:39
创建一个3D场景少不了,比如在户外就是天空,大地还有远处的背景。这个通过SkyBox就可以很方便的实现。

1,SkyBox的使用
SkyBox其实就是一个立方体,只是对内部的每个面贴上不同的皮肤。然后摄像机摆在这个立方体里面,感觉像是一个室内环境中贴上蓝天白云,让人觉得是在外景中。


2,物体表面的反射
只需给物体设置与SkyBox同样的皮肤纹理,那么这个物体表面就感觉有镜面效果,反射出周围环境图像。(如本例中的小球)

3,效果图如下






4,代码如下
package{
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.Vector3D;
	
	import away3d.containers.View3D;
	import away3d.controllers.HoverController;
	import away3d.entities.Mesh;
	import away3d.materials.ColorMaterial;
	import away3d.materials.TextureMaterial;
	import away3d.materials.methods.EnvMapMethod;
	import away3d.primitives.CubeGeometry;
	import away3d.primitives.SkyBox;
	import away3d.primitives.SphereGeometry;
	import away3d.textures.BitmapCubeTexture;
	import away3d.utils.Cast;
	
	[SWF(frameRate="60", backgroundColor="#FFFFFF")]
	public class S3 extends Sprite {
		
		private  var _view3D:View3D;
		private var cameraController:HoverController;//360全景展示相机控制器
		
		//地板图片(用作地板的纹理 )
		[Embed(source="assets/road.jpg")]
		private var floorClass:Class;
		
		//地板材质 
		private var floorMaterial:TextureMaterial;
		
		// 环境图片
		[Embed(source="assets/skybox/snow_positive_x.jpg")]
		private var EnvPosX:Class;
		[Embed(source="assets/skybox/snow_positive_y.jpg")]
		private var EnvPosY:Class;
		[Embed(source="assets/skybox/snow_positive_z.jpg")]
		private var EnvPosZ:Class;
		[Embed(source="assets/skybox/snow_negative_x.jpg")]
		private var EnvNegX:Class;
		[Embed(source="assets/skybox/snow_negative_y.jpg")]
		private var EnvNegY:Class;
		[Embed(source="assets/skybox/snow_negative_z.jpg")]
		private var EnvNegZ:Class;
		
		//环境材质
		private var environmentTexture:BitmapCubeTexture;
		private var environmentMaterial:ColorMaterial;
		
		//天空
		private var _skyBox:SkyBox;
		
		private var _lastX:Number = 0;
		private var _lastY:Number = 0;
		
		public function S3() {
			initEngine();
			initMaterials();
			initObjects();
			initListeners();
		}
		
		/**
		 * 初始化引擎
		 */
		private function initEngine():void
		{
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
			
			// 创建一个视口
			_view3D = new View3D();
			_view3D.antiAlias = 4; //设置抗锯齿级别
			
			//初始化摄像头
			cameraController = new HoverController(_view3D.camera);
			/*cameraController.distance = 1000;
			cameraController.minTiltAngle = 0;
			cameraController.maxTiltAngle = 90;
			cameraController.panAngle = 45;*/
			cameraController.tiltAngle = 15;
			
			addChild(_view3D);
		}
		
		/**
		 * 初始化材质
		 */
		private function initMaterials():void
		{
			//地板的纹理
			floorMaterial = new TextureMaterial(Cast.bitmapTexture(floorClass));
			
			//环境纹理
            environmentTexture = new BitmapCubeTexture(
	                Cast.bitmapData(EnvPosX), Cast.bitmapData(EnvNegX),
	                Cast.bitmapData(EnvPosY), Cast.bitmapData(EnvNegY),
	                Cast.bitmapData(EnvPosZ), Cast.bitmapData(EnvNegZ));
            environmentMaterial = new ColorMaterial();
            environmentMaterial.addMethod(new EnvMapMethod(environmentTexture, 1)); 
		}
		
		/**
		 * 初始化物体
		 */
		private function initObjects():void
		{
			// 在三维舞台中创建一个方块(地板 )
			var cube1:Mesh = new Mesh(new CubeGeometry(700, 20, 500), floorMaterial);
			_view3D.scene.addChild(cube1);
			
			//添加天空盒子(环境)
            _skyBox = new SkyBox(environmentTexture);
            _view3D.scene.addChild(_skyBox);

			//添加球体
            var ball:Mesh = new Mesh(new SphereGeometry(150), environmentMaterial);
            ball.position = new Vector3D(0,200,0);
            _view3D.scene.addChild(ball);
		}
		
		/**
		 * 初始化监听
		 */
		private function initListeners():void
		{
			addEventListener(Event.ENTER_FRAME, _onEnterFrame);
			//鼠标事件监听
			stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
			stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
			stage.addEventListener(MouseEvent.MOUSE_WHEEL,onWheel);
			stage.addEventListener(Event.RESIZE, onResize);
			onResize();
		}
		
		/**
		 * 渲染视图
		 */
		private function _onEnterFrame(e:Event):void
		{
			//渲染视图
			_view3D.render();
		}
		
		/**
		 * 使用舞台大小一直全屏
		 */
		private function onResize(event:Event = null):void
		{
			_view3D.width = stage.stageWidth;
			_view3D.height = stage.stageHeight;
		}
		
		/**
		 * 鼠标滚轮事件
		 */
		private function onWheel(e:MouseEvent):void
		{
			if(e.delta > 0){
				if(cameraController.distance < 1000)
					cameraController.distance += 100;
			}else{
				if(cameraController.distance > 600)
					cameraController.distance -= 100;
			}
		}
		
		/**
		 * 鼠标按下事件
		 */
		private function onMouseDown(event:MouseEvent):void
		{
			_view3D.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
			_lastX = _view3D.mouseX;
			_lastY = _view3D.mouseY;
		}
		
		/**
		 * 鼠标弹起事件
		 */
		private function onMouseUp(event:MouseEvent):void
		{
			_view3D.stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
		}
		
		/**
		 * 鼠标移动事件
		 */
		private function mouseMoveHandler(event:MouseEvent):void
		{
			//移动摄像机
			var dx:Number = _view3D.mouseX - _lastX;
			var dy:Number = _view3D.mouseY - _lastY;
			
			cameraController.panAngle += dx;
			cameraController.tiltAngle += dy;
			
			_lastX = _view3D.mouseX;
			_lastY = _view3D.mouseY;
			
		}
	}
}
源码下载:Amay3DTest4.zip
评论

全部评论(0)

回到顶部