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. All of these examples require the file Cover.as. This file is used with the tutorials to prevent your machine from locking up as it tries to display many Flash files at once. 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 Basic07_cube extends Sprite
 {
 public function Basic07_cube()
 {
 // 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();
 }
 }
} 

 

Basic07_cube.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 hand up like on this image.

 

 

Think about the thumb as the Y-axis, the index finger as the Z-axis and the middle finger as the X-axis. 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 Number3D(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 Number3D 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 Number3D(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 Number3D, 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:

Basic07_moveForward.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.

Basic07_group.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:

• Tweener
  
• TweenLite
  
• TweenFilterLite
  
• TweenMax
  
• ZigoEngine (Fuse)
  
• Twease
  
• HydroTween
  
• gTween
• TweeGo
• Go3D
  
• GoASAP
  

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.

Basic07_tweening.as

The example was created using TweenLite from Greensock http://www.tweenlite.com/ 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.

Basic07_apply.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.

 

 

Comments

---

---

---

---

---

Submit a comment

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