This site is now just an archive over the rise and fall of Flash. The domain flashmagazine.com is available for sale
Login | Register
Away3D Basics 4 - Manipulating 3D objects

Away3D Basics 4 - Manipulating 3D objects

Just as any two dimensional object in Flash, your 3D objects can be positioned, rotated, scaled, grouped and more. This tutorial will teach you how to work in 3D space and tween your objects using your favorite tweening package.

Prerequisites

This tutorial builds on our other Away3D Tutorials. If you are new to Flash 3D, you may want to read these first. For each example, there's a complete source file. Just click the link to the accompanying Actionscript file to see how something was achieved. If you are uncertain about how to use the sample Class files provided, check out this tutorial.

To have something to experiment with, we'll start with a basic Away3D class like this:

package
{
 import away3d.containers.View3D;
 import away3d.primitives.Cube;
 import flash.display.Sprite;
 [SWF(width="500", height="400", frameRate="60", backgroundColor="#FFFFFF")]
 public class ExCube extends Sprite
 {
 public function ExCube()
 {
 // create a viewport
 var view:View3D = new View3D({x:250,y:200});
 addChild(view);
 // create a sphere and put it on the 3D stage
 var cube:Cube = new Cube();
 view.scene.addChild(cube);
 // render the view
 view.render();
 }
 }
} 

ExCube.as

Download this file or create your own as a starting point for this tutorial. As you go through the tutorial, you can use this to test the things you learn.

Use your hand!

Since everything around you is 3D you would think that moving things in 3D space is easy. It's not that it's hard, but you actually have the best help you can get at hand (literally). To understand how to move or rotate an object, just hold your Left hand up as on this image.

image

Think about the thumb as the Y-axis, the index finger as the Z-axis and the middle finger as the X-axis. As long as you are using the correct hand (the left one), your fingers will always point in the positive directions in 3D space. While simple, you'll be surprised to see how much this little trick can help you out when it comes to understanding movement of complex 3D objects.

Note: Away3D (and other 3D engines) does not use the inverted coordinate system that Flash does. Away3D use the Cartesian coordinate system used in mathematics and geometry. Here the x values are positive to the right of the origin point and negative to the left. The y values are positive above the origin point and negative below it. So try to unlearn what you've learned about positioning in Flash to get it right.

Movement in 3D space

All objects in Away3D can be moved around by setting the x and y properties, just as you would for a 2D object and since this is 3D, you can also set the z position.

cube.x = 100;
cube.y = -100;
cube.z = 100;

You can set the position to any positive or negative value. The resulting position on screen will be relative to the World Center and the View in your 3D scene. You set the World Center up when you create the Viewport (View3D) and it's usually located in the middle of the initial view.

You can also set all three positions conveniently using either the moveTo method or the position property:

cube.position = new Vector3D(100,-100,300);
cube.moveTo(100,-100,300);

Both these lines will produce the same result. The only difference is that you need to supply a new Vector3D to the .position method, whereas the moveTo method just takes plain numbers.

If you want an object to face towards another object or location in the scene, use the lookAt method:

cube.lookAt( new Vector3D(0,0,0));

The combination of these methods are really handy when you want an object to "chase" another.Since looking up another objects position will return a Vector3D, you can also use this with the lookAt method:

cube.lookAt( sphere.position );

Away3D also provides some special methods for moving objects. These are called:

cube.moveForward(X);
cube.moveBackward(X);
cube.moveUp(X);
cube.moveDown(X);
cube.moveLeft(X);
cube.moveRight(X);

They do just as their name implies. They move an object X units. These methods offer one great advantage over just setting the x, y and z properties - the object is moved along its own axis rather than along the parent objects axis. Let's see an example:

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

ExMoveForward.as

Let's say you were making a Space Shooting game where the spaceship could move freely. By using these methods instead of just x, y and z it would be much easier to get the correct result.

Rotating

You can also rotate your object around any axis with the rotation property:

cube.rotationX = 45;
cube.rotationY = -10;
cube.rotationZ = 200;

Remember the trick about using your hand? Hold your hand in front of you and it'll be much easier to see what rotating around the Z-axis will do.

You can also set all three rotation values at once using the convenient rotateTo method:

cube.rotateTo(45,45,0)

Scaling

You can also set the scaling of an object along any of the three axes.

cube.scaleX = 2;
cube.scaleY = .5;
cube.scaleZ = 1;

Scale is set so that 1 is the objects original size. Setting it to 2 will double the scale and 0.5 will make it half the size. To simply scale an entire object, you can use the scale() method.

cube.scale(2);

This will double the size of our Cube.

Grouping objects together

Sometimes you will need to move several objects at the same time. You can do this easily by adding them to a group. Object groups in Away3D is called "ObjectContainer3D" and you add objects using the same syntax you use to add objects to the scene.

To create a group of objects, start by creating a new ObjectContainer3D and add it to your Scene. In the example below, we've added a Disc (RegularPolygon), a cube and a sphere. The group is then rotated a half degree every frame and the cube is counter-rotated so it's always facing the viewer.

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

ExGroup.as

Notice that the container has no visual representation, but you can move it about just as any other 3D object.

Tweening 3D objects

To tween a 3D object, you do exactly like you would to any other object in Flash. Install your favorite Tweening solution and ask it to tween the properties you want - it's that easy.

Flash comes with a native tweening method, but it's not recommended as it's really slow. We recommend you use any other tweening solution such as:

Check out this speed test to see how the different Tween engines perform. http://blog.greensock.com/tweening-speed-test/  Features vary from engine to engine and so does the amount of code they require. The syntax will vary among the solutions, so make sure the engine you choose can do what you want before you start adding it to your project.

As said initially, tweening in 3D is just like tweening in 2D. You select a property to tween, set it up and start the tween. In this example, we've used the SeaTurtle primitive that comes with Away3D. Click the turtle to tween it to a random position and rotation.

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

ExTweening.as

The example was created using TweenLite from Greensock so you'll need that in your project folder if you want to test the code yourself.

Advanced movement

Once in a while, you'll want to set the initial rotation different from the deafult. This can happen if you load in a model from a 3D application that is rotated the wrong way. To do this, simply set the rotation properties you want to be the new zero rotation and apply that to the object:

cube.rotationY = 45;
cube.applyRotations();

You may also want to change what is the center of an object, so it rotates around a different point. On a 2D object in Flash, you would do this by changing the "registration point". In "3D speak" the registration point is referred to as "the pivot point". To move the registration point, you set it to a new value like this:

cube.movePivot(0,0,-120);

In the movie below, you can experiment with these to methods to see how they change the rotation of the cube.

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

ExApplyAndMove.as

The movePivot method does not affect the geometry inside the model. If you'd like to apply a transformation that also changes the mesh of the model, you need to use the applyPosition method.

cube. applyPosition(0,0,-120);

ApplyPosition is extremly handy for modeling or correction purposes or  for instance when an object needs to be duplicated, and then showed with different offsets using movePivot. This enables you to make to separate models with different offsets.

Roll, Pitch and Yaw

Just as for the cube.moveForward and related methods, there's three custom rotation methods as well.

cube.roll(15);
cube.pitch(5);
cube.yaw(5);

These do the same as the rotation properties, but they are based on their own local coordinate system. Paste this code just below where you create the cube in the example above to play with how they work.

 

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 paulo on 11/24 at 08:09 PM

There’s a plethora of tweening libraries available, but one of my favorites is Tweego which is basically Fuse for AS3 and kicks major ass :)

You can get it from here: http://code.google.com/p/tweego/


Posted by Jens C Brynildsen on 11/25 at 11:49 AM

Good call! Added to the list as well as a couple other Go-based engines.

J


Posted by West on 01/30 at 01:51 PM

The link for the source of ‘Basic07_apply.as’ isn’t there(away3d basic4). Is it possible to add it?
I have some trouble with movePivot and applyPosition, if I see the source I think thinks will clear up for me.
BTW very nice tutorials I allready learn a lot from you guys!

Thanks in advance. West.


Posted by Jens C Brynildsen on 01/31 at 07:04 PM

Sorry West, I’ve added the link now :)


Posted by John Brightman on 03/18 at 01:37 PM

I wonder if we could add a cover method on the examples, because it take too much memoery to run this page…


Posted by mutex on 05/06 at 04:27 PM

Hi, Im afraid this tutorial are not actual, I mean not convergence with the 3.5.0 Away3D, because I have some errors with DirectionalLights3D and HoverCamera, and I don’t now how to solve it,

Could someone help me with that?


Posted by mutex on 05/10 at 09:42 PM

Hi,

I noticed, the tutorial is not up to date, because, I use 3.5.0 away3d and have a error with:

view.scene.addChild(light);
in Basic07_tweening.as

I want to learn about special lightning, and can’t solve this problem. Could someone help me, or update the script?


Posted by Jens C Brynildsen on 06/22 at 01:09 PM

@mutex I’m really sorry about this, but I’ve been extremely busy lately so I have not had the time to fix this. As you say - for the 3.5 version of Away3D, many things were changed/renamed and this caused errors in many of my example files. I am working all day today to fix this.

While updating, I’m also removing the cover.as file from the examples. Many have complained about this and removing it will make it much easier to use the example files.


Posted by rachelppg on 01/06 at 11:46 PM

hi, i’m new to 3D. There occurs an error when i tried to follow this tutorial:

1037: Packages cannot be nested.

Somebody please help me to solve this problem. Thanks you.

Submit a comment

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