Make your own free website on Tripod.com

Pyramid 3D tutorial

by ericlin@ms1.hinet.net


This is a real 3D movie with perspective. However, the basic principle is the same as the 3d Cube.

The first step is make 4 points 3d data in the format of {x:??,y:??,z:??}. I also calculate the 5th point data, that is the "center" of the pyramid. Later, I modified all these data by substract the 3d vector of the center, so the pyramid center is at (0,0,0) of the 3d space.

Well, I dont want to discuss how to set 3d data of these points. You can search in the internet to make them your self. If you understand the math, and you go mad,  you can make a "3d diamond" with 16 or 36 faces.

The setting up of these 3d data is in the frame 1 script. To understand how I construct these points might be more difficult than making them by yourself.

I implement 3d perspective effect in this pyramid. So, we need incorporate z data into x,y data and show the effect of scaling. Here I dont discuss this. You can find tutorial later on 3d section or some tutorial in macromedia's web. This is the second step.

The pyramid have 4 faces. The third step is trying to cover these 4 faces with triangle movieClips. This is what I am going to discuss. Now it is nearly completed.

The fourth step is add rotating of these 4 points. This is already discussed in 3d cube section.


OK, now we are going to talk about how to skew a triangle movieClip to cover a face defined by 3 points in {x:??,y:??}. If you dont know how to script a skew by function, you need to check previous section.

In previous section, we skew a square to conform to p0, width corner pW and height corner pH. How about triangle.

Well, if our triangle movieClip is a diagonal cut of a square, that function can be applied easily without the need for change. But, pictures will be weird. So, my triangle is something like below. The apex is at the middle of the lower bnorder. That makes pictures look more "normal";

How to make the apex of the triangle  to conform to specified point x0,y0 ? 

Essentially, this triangle movieClip is in fact a "square" movieClip. When the square skewed, the upper border must be parallel to lower border and with the same length.  So, if x0,y0 is the apex of the skewed triangle, then I can calculate the left-bottom corner point x1,y1 by math. If I skew the square by p0,pW, and (x1,y1), then the apex will fall into  x0,y0; 

Here is the function to get the point that we need to skew our square movieClip. pH is the point apex should be. The return value is the new pH that will be used in skew function.

function getPH(pt0,pH,pW){
    var pt=new Object();
    pt.x=pH.x+(pt0.x-pW.x)/2;
    pt.y=pH.y+(pt0.y-pW.y)/2;
    return pt;
}

skewObj(clip, 100, 100, rp0, getPH(rp0,rpH,rpW), rpW);

That is it.