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();
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!