Login | Register
Away3D 4 Basics - The Camera(s)

Away3D 4 Basics - 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.

Away3D Cameras

Away3D v4 offers actually one type of camera and it's called Camera3D. This camera can use different lenses to control how they "view" the 3D world. They can also be controlled using different camera-controllers such as the basic LookAtController, the more advanced HoverController and the FirstPersonController. The names of the controllers and cameras give away their intended purpose, but this tutorial will show you how to use them.

SpringCam is a specialized camera for "chase" scenarios, but in this tutorial, we'll only look at Camera3D. Camera3D is the simplest camera available and every instance of a View3D will get a default Camera3D unless another camera is specified in the contructor. Usually you'll want to create this camera yourself so that you can reference it in your scripts and control it using code. To create a new camera, you just instantiate it and then replace the default camera that comes with View3D like this:

var cam:Camera3D = new Camera3D();
myView.camera = cam;

Camera3D is a very basic, free moving 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: Camera3D_v4.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 objects in the engine such as:

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

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 Vector3D(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.

The camera will only look at the object when the command is executed. To make the camera continously follow a target, use the LookAtController (explained later).

You can also rotate the camera around it's different axes using pitch, yaw and roll.  If you hold your hand in front of you, pointing straight forward and pretend it's the camera, you can visualize what the following properties do:

 cam.pitch(15); // lift hand up/down
 cam.yaw(10); // point hand to left/right
 cam.roll(5); // rotate hand along the axis of your arm (called "banking" in aviation)

While workable, these are usually better controlled using a Camera controller. 

Camera controllers

By itself, a Camera3D instance is quite clumsy to control. You can move it around and roll it along all 3 axes, but most often you'll want to add one of the available Camera controllers. The controller will take your camera as a parameter and then you'll use this class to control your camera instance.

LookAtController

LookAtController 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: LookAtController_v4.as

Use the navigation keys as for the above movie. Using a LookAtController, the methods for moving the camera now 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 to toggle and then use the ASDW keys to rotate. Note that to listen for clicks on any 3D object, you now have to specifically turn ON the mouseEnabled-property. There are also different precision levels available for those that need to tweak the speed:

coneMesh.mouseHitMethod = MouseHitMethod.BOUNDS_ONLY;
coneMesh.mouseEnabled = true;

HoverController

HoverController has all the properties that LookAtController 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: HoverController_v4.as

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

camController.panAngle = 0;
camController.tiltAngle = 0;

These are the angles from 0 to 360 that the camera will Pan and Tilt to. Note that tiltAngle has a bug in the current Beta version. This will be fixed before the official release, but instead of setting this as a property, you should pass it in the contructor when you create the HoverController like this:

camController = new HoverController( cam, sphereMesh, 180,0 );

You can then change it in your main render-method as long as that isn't called until after a frame has played (EnterFrame).When you set the panAngle and tiltAngle values, the camera won't move there right away. What is special with the HoverCam is that it will do a tween of the position over a predefined number of "steps":

camController.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 in Away3D version 4, you do no longer have to tell the HoverCamera3D to actually "hover". It will do so automatically, so you don't use camController.update() unless you've specifically turned off the autoupdate property.

With the Hovercontroller, you can also use the distance-property as a way to zoom:

 cam.distance = 1000;

The above line will move the object towards or away from it's current position, along the line it's currently facing. In other words, there's no zoom in Away3D v4, but you set the distance to the target manually. 

Lenses

By default, this camera will get a perspective lens, but you can also pass in a different kind of lens like this:

var lens:Camera3D = new OrthographicLens();
var cam:Camera3D = new Camera3D( lens );
myView.camera = cam;

So what do these lenses do then? Have a look at the image below to see how three of the lenses render a rectangular cube.

The PerspectiveLens is the default as it is what the average user will use the most often. The OrtographicLens is a special kind of projection that removes the perspective information. This visual effect is most often used for games. The third lens, the FreeMatrixLens, exposes a full projection matrix so that those that know their math can work directly with the matrix.

If you have a SLR camera or even a simple camera that has a proper lens, there's a few things that you may expect in a camera such as zoom. In former versions of the Away3D engine, there was a zoom-property on the camera. In Away3D version 4 the dedicated zoom property is gone but you can achieve the same effect by just changing the distance from the object along the Z axis. Combine this with the fieldOfView (FOV) setting and you have a very flexible camera setup.

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

movie: Camera_v4.as

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.

Orbiting your scene using the Mouse

One of the most classic ways to navigate a 3D scene is to just move the camera back from the center of the scene and let the user rotate around it using the mouse. The example below is much more elaborate than what we have done this far in these tutorials so consider it as a taste of what's to come.

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

movie: basic_cube_v4.as

I'll won't explain explain everything in this code as I'll cover that in the upcoming tutorials. However - feel free to download and tweak it as much as you like. This is just one of many possible solutions to rotating around an object and there's many ways you can improve on this. How about adding scrollwheel support for zooming (camera.zoom)? We'll get back to camera movement in many of the remaining tutorials, so just keep reading to learn more.

Note: You can also find another camera in the "away3d.cameras" package/folder called SpringCam. This is temporary and it will later be converted to a camera controller. It's made for chase-scenarios where your camera will chase after an object.

 

About Jens C Brynildsen

Jens has been working with Flash since version 3 came out. Since then, he's been an active member of the Flash community. He's created more than a hundred Flash games (thus the name of his blog) but he also creates web/standalone applications, does workshops and other consulting. He loves playing with new technology and he is convinced that the moment you stop learning you die (creatively speaking). Jens is also the Editor of this website.

Get new stories first

Click to follow us on Twitter!

 

Comments


Posted by skyrick on 04/05 at 06:18 PM

Thank you for your great tutorials !
there will be others ? =)


Posted by Jens C Brynildsen on 06/13 at 12:52 PM

Working on it, but I’m pressed on time these days. Soon…. ;-)


Posted by Mihausen on 07/19 at 03:17 PM

Hey Jens,

I just want to let you know that the Camera_v4.as is a deadlink, could you recaputre it, because I am interessted in the FOV. Much appreciated.

Mike


Posted by Jens C Brynildsen on 07/23 at 12:38 PM

@Mihausen thanks for telling! I’ve updated the link now. Please note the comment at the top of the source file ;-)


Posted by lrwieland on 08/21 at 09:47 PM

Unfortunately, LookAtController_v4.as does not compile under the released, gold version of Away3D 4 (4.0.9). It appears that the MouseHitMethod has been removed. Comment out each of the lines referencing MouseHitMethod and it then compiles and runs just fine. And thanks for these tutorials - they are extremely helpful for me as I bring myself up to speed on Away3D 4.


Posted by tchegui on 08/31 at 10:17 PM

Thx for this great post.

Looking forward for more!

Thx again!


Posted by Aksu on 09/12 at 08:35 PM

You can replace
import away3d.core.raycast.MouseHitMethod;
with
import away3d.core.pick.*
and then replace
cube.mouseHitMethod = MouseHitMethod.BOUNDS_ONLY;
with
cube.pickingCollider = PickingColliderType.BOUNDS_ONLY;

Submit a comment

Only registered members can comment. Click here to login or here to register