This technique is used when you need to create an all-round back drop for a 3D scene. A skybox is basically a big cube and textures are on the inside, and the camera is placed in the middle of the box. Ready?
You can download the whole thing here: http://harry-northover-code-store.googlecode.com/files/A3DSkyBox.zip.
Step 1 – Setting up Flash.
This is the easy bit. Create a new flash file, and leave the size of it at the default, and then in the bottom of the Flash IDE, there should be a text box saying ‘Document Class’. Create an Actionscript 3.0 file called SkyStuff and save it. Then you need to type SkyStuff into the text box and press enter. There should be no errors.
Step 2 – Importing…
Obviously, you are going to need the Away3D classes and you can download them here. If you already have a folder for your classes then unzip the download and copy it to there, but if not then just copy all the content of the download to the same directory of your Flash file.
Here are the necessary imports:
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;
So, there you go, the necessary imports. I think these are fairly obvious, but if you need to look them up, go here.
So, on we go!
Step 3 – Variables.
Here we need to create the necessary variables to hold stuff like materials. So here it is:
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;
So first of we create the basics that are needed for any Away3D project. This is a scene, a viewpoint and a camera. I am assuming that you know what these are for, so I am going to skip to the parameters. For the camera, we set the zoom to 2, in the viewpoint we set the scene toscene, the camera to cam and align it to the top left corner of the stage.
Next we create the actual skybox that will have all the materials assigned to it.
After that we create the 6 different variables that will hold each material for the skybox faces. This includes the front, back, left, right, top, bottom. Fairly obvious? Hope so.
The next variables hold data that we need for movement of the camera. These include a variable to see if the camera needs to be moved, the last pan angle, the last tilt angle, the last mouse X position and the last mouse Y position.
You will see how we use these later on.
Step 4 – Calling the functions.
Next we create the constructor which adds an event listener to call the function Init that will initialize all the 3D and 2D assets.
public function SkyStuff():void {
addEventListener(Event.ADDED_TO_STAGE, Init);
}
private function Init(evt:Event):void {
InitStage();
InitEngine();
InitMaterials();
InitObjects();
InitListeners();
}
Here you can see that all the different parts of the movie are initiated here. This includes setting up the stage, Away3D, the materials for the skybox, the 3D objects (skybox), and the event listeners.
Step 5 – Setting up the stage & engine.
Now we set the align mode and necessary stuff for Away3D.
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);
}
Here we are setting the stage align to the top left, and the scale mode to no scale.
Next, in theInitEngine() function we set up the camera, and then add the viewpoint to the display list. The variables we set for the camera are the mintiltangle which means it cannot tilt past -80 degrees, the maxtilitangle which means it can’t tilt further that 20 degrees. We also set the targetpanangle, and the targettiltangle. If you need more clarification to these values, click here.
Once we have done this, we add the whole viewpoint to the stage.
Step 6 – The meaty part, creating the Skybox
Next, we create the actual skybox and all the materials that are needed for its faces.
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));
}
Now, in the functionInitObjects() we assign a new skybox to the variable sky that we created in step 3.
So, to create a skybox you need to assign a front, back, left, right, top, bottom material. As you can see from the variables assigned to Skybox(), you can see which order these materials need to be assigned to. The full documentation is here.
Next, we call a function called quaterFaces(). This divides all face objects into 4 equal sized face objects. So this creates a more precise image.
Lastly, we add it to the viewpoint.
In the InitMaterials() function we assign a new bitmap material to each of the 6 materials. To do this, find a skybox (here’s a good site) and import the 6 images into you flash file. When you import them, give them a linkage ID of Sky + (Front, Back, whatever part of the skybox it is). Make sure these linkage ID’s correspond to the ones we passed into Cast.bitmap(name).
So now we have assigned all the skybox parts to their respective variables, and then we have created the skybox, passed all the faces into it, quatered the faces and added it to the viewport. That is the key part, now on to adding event listeners and camera movement.
Final Note – Camera Movement
Now as this tutorial is about the skybox, and not the camera movement, I am going to just give you the code and let you work it out.
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;
}
}
}
So there you go. I hope you enjoy this and find it useful.
Harry.
