Large image


Away3D Skyboxes

This is my best demo yet, and it is crucial to my new site. This demo is using the sky box features in Away3D. For those of you that don’t know what a sky box is, it is a collection of images (usually 6, but in this case 5, I didn’t have a bottom one), that are displayed on the inside of a cube, and then the camera is inside the cube looking out at these images. This gives the impression of a sky, and ground and surroundings that are usually behind everything else. Using sky boxes prevents the sky being plain black.

Here is the demo (just click). To explore, click and drag to find your way around.

And here is the code:

package {
 
	import away3d.cameras.HoverCamera3D;
	import away3d.containers.Scene3D;
	import away3d.containers.View3D;
	import away3d.materials.BitmapMaterial;
	import away3d.primitives.Skybox;
	import away3d.core.utils.Cast;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
 
	public class SkyStuff extends Sprite {
 
		public var cam:HoverCamera3D = new HoverCamera3D( { zoom:2 } );
		public var scene:Scene3D = new Scene3D;
		public var view:View3D = new View3D( { camera:cam, scene:scene, x:0, y:0 } );
 
		// Skybox stuff.
		public var sky:Skybox;
		// Materials....
		public var sky_front_material:BitmapMaterial;
		public var sky_back_material:BitmapMaterial;
		public var sky_left_material:BitmapMaterial;
		public var sky_right_material:BitmapMaterial;
		public var sky_up_material:BitmapMaterial;
		public var sky_down_material:BitmapMaterial;
 
		// Movement vars.
		public var move:Boolean = false;
		public var lastPanAngle:Number;
		public var lastTiltAngle:Number;
		public var lastMouseX:Number;
		public var lastMouseY:Number;
 
		public function SkyStuff():void {
			addEventListener(Event.ADDED_TO_STAGE, Init);
		}
 
		private function Init(evt:Event):void {
			InitStage();
			InitEngine();
			InitMaterials();
			InitObjects();
			InitListeners();
		}
 
		private function InitStage():void {
			stage.align = StageAlign.TOP_LEFT
			stage.scaleMode = StageScaleMode.NO_SCALE;
		}
 
		private function InitEngine():void {
			cam.mintiltangle = -80;
			cam.maxtiltangle = 20;
			cam.targetpanangle = cam.panangle = 0;
			cam.targettiltangle = cam.tiltangle = 0;
 
			addChild(view);
		}
 
		private function InitObjects():void {
			sky = new Skybox( sky_front_material, sky_left_material, sky_back_material, sky_right_material, sky_up_material, sky_down_material );
			sky.quarterFaces();
			view.scene.addChild(sky);
		}
 
		private function InitMaterials():void {
			sky_front_material = new BitmapMaterial(Cast.bitmap(SkyFront));
			sky_back_material = new BitmapMaterial(Cast.bitmap(SkyBack));
			sky_left_material = new BitmapMaterial(Cast.bitmap(SkyLeft));
			sky_up_material = new BitmapMaterial(Cast.bitmap(SkyTop));
			sky_right_material = new BitmapMaterial(Cast.bitmap(SkyRight));
		}
 
		private function InitListeners():void {
			addEventListener(Event.ENTER_FRAME, EnterFrame);
			stage.addEventListener(MouseEvent.MOUSE_DOWN, MouseDown);
			stage.addEventListener(MouseEvent.MOUSE_UP, MouseUp);
			stage.addEventListener(Event.RESIZE, Resize);
		}
 
		private function EnterFrame(evt:Event):void {
			if (move) {
				cam.targetpanangle = 0.3 * (stage.mouseX - lastMouseX) + lastPanAngle;
				cam.targettiltangle = 0.3 * (stage.mouseY - lastMouseY) + lastTiltAngle;
			}
			cam.hover();
			view.render();
		}
 
		private function MouseDown(evt:MouseEvent):void {
			lastPanAngle = cam.panangle;
			lastTiltAngle = cam.tiltangle;
			lastMouseX = stage.mouseX;
			lastMouseY = stage.mouseY;
			move = true;
			stage.addEventListener(Event.MOUSE_LEAVE, onStageMouseLeave);
		}
 
		private function MouseUp(evt:MouseEvent):void {
			move = false;
			stage.removeEventListener(Event.MOUSE_LEAVE, onStageMouseLeave);
		}
 
		private function onStageMouseLeave(evt:Event):void {
			move = false;
			stage.removeEventListener(Event.MOUSE_LEAVE, onStageMouseLeave);
		}
 
		private function Resize(evt:Event):void {
			view.x = stage.stageWidth / 3;
			view.y = stage.stageHeight / 3;
		}
	}
 
}

Now,I personally think skyboxes are a good piece of knowledge to have, as they provide, in my opinion, an effective and fairly easy way to get a fairly natural looking environment quickly. Once you have a skybox in place, you can concentrate on the more important objects, and not making the surrounding environment look good.

There is also another way of creating sky-boxes and this is using the Skybox6 class. This differs from the original method as instead of having six separate images, you have all your graphic in one jpg (png, or whatever).

I will also be trying to post versions of the examples in Papervision3d. This gives me a good understanding of how the engines differ, which ones I prefer and how they work.

You can download the whole thing (images as well!) here: http://harry-northover-code-store.googlecode.com/files/A3DSkyBox.zip

Harry.

3 comments

1 Dan { 10.02.08 at 7:41 PM }

Looks good. You could do with fixing the link though so it opens up at the correct size. Doesn’t work properly when stretched to a browser window…

2 Harry { 10.03.08 at 3:24 AM }

Thanks for the comment. I posted this in a rush, so it totally slipped my mind :( . I will fix it at the weekend. To busy at school… :(

3 Gustavo Pezzi { 01.19.10 at 2:37 AM }

Hello…

Nice tutorial.
The away3d library has some handy tools when it comes to skybox creation.
But, I was facing a little problem the other day.
I’m developing a web simulator based on a previous simulator called TFX (90′s).
The skybox effect I’m seeking is this one:

http://www.abandonia.com/files/games/752/Tactical%20Fighter%20eXperiment%20(aka%20TFX)_3.png

But, if I render a box with the six faces according to the above horizon I’ll get a distortion right next to the right and left sides of my stage.
In other words, my horizon should look horizontal, but it distorts because the skybox is mapped into a box and the away3d camera distorts the face’s content.

Do you have any idea how to maybe change the camera or the skybox to make something that looks like the sky in the old simulator screen from the link?

Thank you so much!

Gustavo

Leave a Comment