Away3D Basics 3 - The Camera(s)

The camera is what you view the 3D world through. Just as a real camera, the virtual 3D camera applies perspective to your models by adjusting properties such as zoom, focus and position. In this tutorial you'll learn how to use the 3 cameras available in Away3D.

No matter what you want to do in Away3D, there's some things that you'll always need to set up. The "Basic" tutorials will explain the Scene, View, Camera, Primitives, Textures and explore some of the possibilities. Each example in the series will be organized as Actionscript Classes so they can be used in both Flash and Flex.

If you are new to 3D on computers, you might want to read our introduction that explains the core 3D concepts. This tutorial also contains the source for 6 other Away3D projects that may be worth checking out. To run the example files, you will first need to set up Away3D on your computer. When you have the Away3D source files and your software is set up, you can open, explore and export the examples in this tutorial by just placing them in your project directory. 3D is processor intensive, so all the examples use a file called Cover.as that you must also download to your project directory to be able to run the examples.

Away3D Cameras

Away3D offers 3 different cameras: Camera3D, TargetCamera3D and HoverCamera3D. All the cameras offer settings for zoom, focus, depth of field, pan, tilt and position.

All of these cameras have properties that can be set in the constructor like this:

var cam:Camera3D = new Camera3D({zoom:5,focus:200});

They can also be set or changed using the properties directly like this:

var cam:Camera3D = new Camera3D({zoom:5,focus:200});
cam.zoom = 5;
cam.focus = 200;

If you have a SLR camera or even a simple camera that has a proper lens, you will know how the zoom works. The focus property on the other hand decides the focal length of the camera (angle of view). To try this out, take a look at this example:

This content requires Flash Player 9 (or a more recent version). You need to upgrade your Flash Player

movie: Camera.as

Here you can see that the focus works together with the zoom to decide how you view the Scene. Lower focus values will move the "rendering plane" closer to the camera. Higher values wil move it away from it. Tartiflop has written a great tutorial that explains zoom and focus settings for Papervision. For Away3D it's the same, so if you want to learn more, check it out.

cam.pan = 45;
cam.tilt = -10;

Pan and Tilt will do as they say, they will rotate the camera around what it is looking at in either horisontal or vertical direction. You can set both positive and negative values. I initially mentioned the Depth Of Field. When combined with 2D sprites, this can be used to create depth effects. We'll look closer at this in a later tutorial.

All these properties are all considered when rendering the View. The process of figuring out what triangles are visible though the View/Camera is called Culling. Calculating how something should look in 3D requires a lot of CPU and culling make sure only what is visible to the Camera is calculated.

The 3 cameras work a little differently, so here's a breakdown of each of them and how you use them.

Camera3D

Camera3D is the basic, free form camera. You can move and point it in any direction.

This content requires Flash Player 9 (or a more recent version). You need to upgrade your Flash Player

movie: Basic04Camera3D.as

Use the keys A, D, W, S and arrow up/down to navigate the 3D space. In this movie, we use a set of standard movement methods available to all Away3D objects:

camera.moveUp(10);
camera.moveDown(10); 
camera.moveLeft(10); break;
camera.moveRight(10); break;
camera.moveForward(10); break;
camera.moveBackward(10); break;

These functions are pretty self explanatory. Note that a new Camera3D is by default positioned in the centre of the 3D world (0,0,0), meaning that if you add a Sphere you will not see anything since the camera is actually inside it. By default, a sphere is only viewable from the outside, so to see the sphere, we either have to invert the sphere ( sphere.invertFaces(); ) or move the camera outside the sphere by setting the cameras Z property like this:

camera.z = -1000;

Here we pull the camera back one thousand units, towards us. Setting the x/y/z properties of the camera will make it move, but remember that any camera must also point to a certain location. By default, the camera will look at the center coordinates of our 3D Scene. To point the camera somewhere else, we use the "lookAt" command:

camera.lookAt( new Number3D(x,y,z) );

This tells the camera to look at the coordinate x/y/z in our virtual 3D world. You can also make the camera Pan, Tilt and rotate along any of the three axes.

A word of warning about setting the x/y/z properties - make sure you always set the camera position before asking it to "lookAt" something. If you first "lookAt" something and then change the position, the camera will still be looking in the direction set initially. To solve this, always update your "lookAt" reference after positioning the camera or use one of the other cameras that make targeting objects much easier.

TargetCamera3D

TargetCamera3D has all the properties of Camera3D, but it has a special ability to "target" other objects or positions in the 3D world:

This content requires Flash Player 9 (or a more recent version). You need to upgrade your Flash Player

movie: Basic05TargetCamera3D.as

Use the navigation keys as for the above movie. Using a TargetCamera3D, the methods for moving the camera about get a new meaning. Here the camera is always looking at the target object, so camera.moveLeft actually rotates the camera around the targeted object.

By default, this camera is looking at the center of the coordinate system, but we can change this to any other position by changing the target:

camera.target = sphere;

To see how the targeting works, just click any of the primitives in the example above.

HoverCamera3D

HoverCamera3D has all the properties that TargetCamera3D has, but adds methods that are useful for circling around an object by setting the desired pan and tilt. It also hovers the camera, so that it moves softly from one position to another. You are not limited to circle around objects though, so this is maybe the most versatile camera of them all.

This content requires Flash Player 9 (or a more recent version). You need to upgrade your Flash Player

movie: Basic06HoverCamera3D.as

Instead of using the move-methods, we now use two custom properties in the HoverCamera3D:

camera.targetpanangle = 0;
camera.targettiltangle = 0;

These are the angles from 0 to 360 that the camera will Pan and Tilt to. These values are relative to the current values:

camera.panangle = 0;
camera.tiltangle = 0;

These are the starting point for the "hover", so when we create the new camera, we also set these to zero. The "hover" is effectively a tween of the position that is performed over a predefined number of "steps":

camera.steps = 16;

By increasing this from the default 8 steps, we'll get a slower and smoother transition from one angle to another. You can also reduce this number, all the way down to zero steps. This will move the camera instantly to it's new position. Note that for the HoverCamera3D to actually "hover", we need to add a little something to our EnterFrame method: