1 Feb 2010
DisplayObject.rotationX,Y,Z
Just a quick note about working with DisplayObject.rotationX,Y,Z:
Keep in mind that your DisplayObject rotates around it's center point. This may result in weird optics if you forget to align your DisplayObject properly.
Update: Well, there is much more to know!
There's need for an DisplayObjectContainer with an properly assigned PerspectiveProjection.
Copy & paste this code and you'll see what I'm talking about:
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.addEventListener( Event.RESIZE, onStageResize );
function onStageResize( event : Event ) : void
{
draw();
}
function createRectSprite( w : int, h : int, rotationY : Number, container : Sprite, useProjection : Boolean ) : Sprite
{
// 3D object
var graphicSprite : Sprite = new Sprite();
graphicSprite.name = "graphicSprite";
graphicSprite.rotationY = rotationY;
graphicSprite.buttonMode = true;
graphicSprite.useHandCursor = true;
// Make sure 3D objects content is centered
var g : Graphics = graphicSprite.graphics;
g.beginFill( 0, .5 );
g.drawRect( w * -.5, h * -.5, w, h );
g.endFill();
// 3D Container
var containerSprite : Sprite = new Sprite();
containerSprite.addChild( graphicSprite );
// Apply projection to 3D Container instead of 3D Object
if ( useProjection )
{
var projection:PerspectiveProjection = new PerspectiveProjection();
projection.projectionCenter = new Point( 0, 0 );
containerSprite.transform.perspectiveProjection = projection;
}
// Visualize center
g = containerSprite.graphics;
g.beginFill( 0xff0000 );
g.drawCircle( 0, 0, 2 );
g.endFill();
container.addChild( containerSprite );
return containerSprite;
}
var left : Sprite;
var right : Sprite;
function draw() : void
{
while ( numChildren> 0 ) { removeChildAt( 0 ); }
var container : Sprite = new Sprite()
container.name = "container";
container.x = stage.stageWidth * .5;
container.y = stage.stageHeight * .5;
addChild( container );
var stepX : int = stage.stageWidth / 3;
var w : int = 200;
var h : int = 200;
left = createRectSprite( w, h, -60, this, true );
left.name = "left";
left.x = stepX;
right = createRectSprite( w, h, 60, this, true );
right.name = "right";
right.x = stepX * 2;
left.y =
right.y = stage.stageHeight * .5;
}
function onEventHitTest( event : Event ) : void
{
var containerSprite : DisplayObjectContainer;
var graphicSprite : DisplayObject;
containerSprite = this.getChildByName( "left" ) as DisplayObjectContainer;
graphicSprite = containerSprite.getChildByName( "graphicSprite" ) as DisplayObject;
trace( "hit left containerSprite:", containerSprite.hitTestPoint( mouseX, mouseY, true ) );
trace( "hit left graphicSprite:", graphicSprite.hitTestPoint( mouseX, mouseY, true ) );
containerSprite = this.getChildByName( "right" ) as DisplayObjectContainer;
graphicSprite = containerSprite.getChildByName( "graphicSprite" ) as DisplayObject;
trace( "hit right containerSprite:", containerSprite.hitTestPoint( mouseX, mouseY, true ) );
trace( "hit right graphicSprite:", graphicSprite.hitTestPoint( mouseX, mouseY, true ) );
trace( "" );
}
stage.addEventListener( MouseEvent.MOUSE_DOWN, onEventHitTest );
draw();