I finally managed to completely copy the flash internal perspective with a manual perspective.
In flash cs4, you can make a plane, say, a 100×100 plane sitting on (0,0). Then, you can rotate it in 3D, using the properties rotationX, rotationY and rotationZ. Say you would rotate it by x and y by 20 degrees each, you end up with a nice plane in perspective.
Now this is really cool, but if would be quite a pain to display a 3D mesh in such a way.
Now I have been digging into how to display a 3D mesh using the two new functions transformVectors and drawTriangles. Without z-sorting, I could render a 1500 poly textured mesh in 3 miliseconds. Which is very, very fast and certainly opens op possibilities. Here’s a screenshot:
Basicly, what you do, is you have an array of world coordinates in 3D, you transform them using transformvectors, and then you add a sort of perspective function to make stuff smaller when its further away:
The big problem was, getting the standard flash rotationX / rotationY to work with this, more lowlevel method of getting perspective. The solution was surprisingly simple. You get the focal length from the main perspective transform like this:
var f:Number = parent.transform.perspectiveProjection.focalLength;
Then, you will have some z-coord, which should not be lower then -f (-f is where your eye is in real life, focal length is the distance from your eye to the physical piece of glass that you call your screen). The scaling for any point (x,y,z) will then be:
var s:Number = f / (f + z);
In my sample code, I create a bunch of 20×20 squares, randomly placed in 3d. I allow you to rotate them using the mouse. This part is all using standard rotationX and rotationY.
Then I have something which I called an ‘overlay’, which is a series of 3d points and connecting lines, which I make sure are the exact same squares.
Finally, I rotate both according to the mouse movements and voila! the overlay (red lines) matches the movieclips (blue/white shapes).
Download the source code here.
Tags: 3D, actionscript, flex4