To convert a 2D display
object into a 3D display object, you can explicitly set its
z
property
to a numeric value. When you assign a value to the
z
property,
a new Transform object is created for the display object. Setting
the
DisplayObject.rotationX
or
DisplayObject.rotationY
properties
also creates a new Transform object. The Transform object contains
a
Matrix3D
property that governs how the display
object is represented in 3D space.
The following code sets the coordinates for a display object
called “leaf”:
leaf.x = 100; leaf.y = 50; leaf.z = -30;
You can see
these values, as well as properties derived from these values, in
the
matrix3D
property of the Transform object of
the leaf:
var leafMatrix:Matrix3D = leaf.transform.matrix3D;
trace(leafMatrix.position.x);
trace(leafMatrix.position.y);
trace(leafMatrix.position.z);
trace(leafMatrix.position.length);
trace(leafMatrix.position.lengthSquared);
For information about the properties of the Transform object,
see the
Transform
class. For information about
the properties of the Matrix3D object, see the
Matrix3D
class.
Moving an object in 3D space
You can move an object in 3D space by changing the values of
its
x, y, or z
properties. When you change the
value of the
z
property the object appears to move
closer or farther away from the viewer.
The following code moves two ellipses back and forth along their
z-axes by changing the value of their
z
properties
in response to an event.
ellipse2
moves faster
than
ellipse1
: its
z
property
is increased by a multiple of 20 on each Frame event while the
z
property
of
ellipse1
is increased by a multiple of 10:
var depth:int = 1000;
function ellipse1FrameHandler(e:Event):void
{
ellipse1Back = setDepth(e, ellipse1Back);
e.currentTarget.z += ellipse1Back * 10;
}
function ellipse2FrameHandler(e:Event):void
{
ellipse2Back = setDepth(e, ellipse1Back);
e.currentTarget.z += ellipse1Back * 20;
}
function setDepth(e:Event, d:int):int
{
if(e.currentTarget.z > depth)
{
e.currentTarget.z = depth;
d = -1;
}
else if (e.currentTarget.z < 0)
{
e.currentTarget.z = 0;
d = 1;
}
}
Rotating an object in 3D space
You can rotate an object in three different ways, depending on
how you set the object’s rotation properties:
rotationX
,
rotationY
,
and
rotationZ
.
The figure below shows two squares that are not rotated:
The next figure
shows the two squares when you increment the
rotationY
property
of the container of the squares to rotate them on the y- axis. Rotating the
container, or parent display object, of the two squares rotates
both squares:
container.rotationY += 10;
The next figure
shows what happens when you set the
rotationX
property
of the container for the squares. This rotates the squares on the
x- axis.
The next figure
shows what happens when you increment the
rotationZ
property
of the container of the squares.This rotates the squares on the
z-axis.
A display object can simultaneously move and rotate in 3D space.
|
|
|