five3d local3dtoglobal

Question

I am trying to use the Five3d package to draw a sprite in 3d and animate it then create a shape on the root of the app and overlay it over the sprite in 3d as it moves. I have tried everything to get it to work but can't seem to get it to line up properly. It looks like the perspective is out. I had it working after inspecting the relationship between the 3d x,y and global x,y which lead me to write the method 'local3dToGlobalXY' shown below but this only worked when the stage was 1024 / 768, strange. I was told that the Sprite2d in the Five3d package does this but can't get that to work either. It has the same results as my 'local3dToGlobalXY' method.

I have put an example up here and the project for the example is here.

The red star is a sprite that is in 3d and the two crosshairs are draw into different scopes. One is drawn into a Sprite2d which is what I was recomended to do and the other is drawn into the root.

Hopefully someone has encountered this or can point out what I have done wrong.

Thanks, J

/**
 * ...
 * @author James Jordan
 */
public class Main extends Sprite 
{

    private var s3D:Sprite3D;
    private var _scene:Scene3D;
    private var _s:Sprite3D;
    private var star3D:Shape3D;
    private var t:Timer;
    private var crossHairs2D:Sprite;
    private var otherPlane:Sprite2D;
    private var _plane:Sprite3D;
    private var crossHairsRoot:Sprite;
    private var animationPlane:Sprite3D;
    private var crossHairsPlane:Sprite2D;
    private var starsPlane:Sprite3D;

    public function Main():void 
    {
        if (stage) init();
        else addEventListener(Event.ADDED_TO_STAGE, init);
    }

    private function init(e:Event = null):void 
    {
        removeEventListener(Event.ADDED_TO_STAGE, init);
        // entry point
        stage.align = StageAlign.TOP_LEFT;
        stage.scaleMode = StageScaleMode.NO_SCALE;

        animationPlane = new Sprite3D();

        starsPlane = new Sprite3D();
        animationPlane.addChild(starsPlane);

        crossHairsPlane = new Sprite2D();
        animationPlane.addChild(crossHairsPlane);

        _scene = new Scene3D();
        _scene.x = stage.stageWidth / 2;
        _scene.y = stage.stageHeight / 2;

        _scene.addChild(animationPlane);

        addChild(_scene);

        star3D = drawStar(starsPlane);
        crossHairs2D = drawGlobalShape(crossHairsPlane, 0xff000, 10);
        crossHairsRoot = drawGlobalShape(root, 0x0000ff, 5);

        t = new Timer(1000, 0);
        t.addEventListener(TimerEvent.TIMER, onTimer);
        t.start();

    }

    private function onTimer(e:TimerEvent):void 
    {
        TweenLite.to(star3D, 1, { x:(Math.random() * stage.stageWidth) - (stage.stageWidth/2), y:(Math.random() * stage.stageHeight) - (stage.stageHeight / 2), z:(Math.random() * 500), onUpdate:onTweenUpdate } );
    }

    private function onTweenUpdate():void 
    {
        var p:Point = local3dToGlobalXY(starsPlane, new Point3D(star3D.x, star3D.y, star3D.z));
        crossHairs2D.x = p.x - stage.stageWidth / 2;
        crossHairs2D.y = p.y -  stage.stageHeight / 2;

        crossHairsRoot.x = p.x;
        crossHairsRoot.y = p.y;
    }

    private function local3dToGlobalXY(_s:Sprite3D, p3d:Point3D):Point 
    {
        var m:Matrix3D = _s.concatenatedMatrix;
        var newP3d:Point3D = m.transformPoint(p3d);
        var globalPoint:Point = _s.local3DToGlobal(new Vector3D(newP3d.x, newP3d.y, newP3d.z));
        return globalPoint;
    }

    private function drawStar(parent:Sprite3D):Shape3D {

        var starShape:Shape3D = new Shape3D();
        DrawingUtils.star(starShape.graphics3D, 5, 30, 20, (45 / 180) * Math.PI, 0xff0000);

        parent.addChild(starShape);

        return starShape;
    }

    private function drawGlobalShape(p:*, c:uint, lineWeight:Number):Sprite 
    {
        var d:Sprite = new Sprite();
        d.graphics.lineStyle(lineWeight, c);
        d.graphics.moveTo( -20, 0);
        d.graphics.lineTo(20, 0);
        d.graphics.moveTo( 0, -20);
        d.graphics.lineTo(0, 20);
        d.graphics.endFill();

        p.addChild(d);

        return d;

    }

}

Answer 1

It's your perspective and Z coordinate. Remove the random Z tween in the TweenLite.to statement and you'll see that they line up perfectly.

What exactly are you trying to do here? Other than offset the star, the Z param doesn't seem to add anything (scaling based on distance from observer)?