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.align = StageAlign.TOP_LEFT;
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();

2 thoughts on “DisplayObject.rotationX,Y,Z”

  1. I’ve been trying to figure this out for a few hours, and was overlooking the PerspectivProjection part. I was SO glad to find your post. Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *