In this applet we use the same technique as in part 1 where we drew a cube. We will draw an octahedron. In order to illustrate drawing noncovex bodies and having faces with different number of vertices within one object, we will remove two triangular faces of the octahedron and add a square face that separates the top and the bottom of the octahedron. Thus, we will draw a 'broken octahedron'. The only significat change in comparison to the cube applet is making the number of vertices for each face flexible. We comment below only the portions of the code that are different from the corresponding portions in simple3d_1.fla file.

Download

- Flash CS3 file simple3d_2.fla

The fla file linked below contains complete, exhaustively commented source code for the Flash movie above. We will discuss below only the portions of the code that are new to this part of the tutorial.

The Code

............................

//The number of vertices is now 6.

var numVertices:uint=6;

/*

We will remove two lower triangles and add a square inside the octahedron.
Hence, the total number of faces will change from 8 to 7.

*/

var numFaces:uint=7;

............................

//The shape in which we will draw our octahedron is still called 'shCube'.

var shCube:Shape=new Shape();

spBoard.addChild(shCube);

............................

/*

We change the initial view angle so we can see the inside of the octahedron
clearly when the movie opens.

*/

var curTheta:Number=-40;

var curPhi:Number=110;

/*

The facesArray has now 7 elements. Although, it wouldn't hurt to leave
it longer than necessary. Only an array that is too short than expected
later in the code will cause an error.

*/

var facesColors:Array=[0xFFFFCC,0x00FF66,0x0066FF,0x33FFFF,0x9A7DDF,0xFFCCFF,0xFF9966];

............................

//The function setVertices defines now the six vertices of our octahedron.

function setVertices():void {

vertsArray[0]=[70,-70,0];

vertsArray[1]=[70,70,0];

vertsArray[2]=[-70,70,0];

vertsArray[3]=[-70,-70,0];

vertsArray[4]=[0,0,99];

vertsArray[5]=[0,0,-99];

}

/*

setFaces defines the faces of our broken octahedron by listing their
vertices. Note that we have 6 triangular faces and one square face.

*/

function setFaces():void {

facesArray[0]=[0,1,4];

facesArray[1]=[1,2,4];

facesArray[2]=[2,3,4];

facesArray[3]=[3,0,4];

facesArray[4]=[0,1,5];

facesArray[5]=[1,2,5];

facesArray[6]=[0,1,2,3];

}

function renderView(t:Number,p:Number):void {

............................

/*

Since the number of vertices for each face may be different we add 'curFaceLen' variable.

*/

var curFaceLen:uint;

............................

/*

The only significant change in the code is in the next loop where

we calculate the midpoint of each face and its distance from the observer.

The change is necessary as the number of vertices for each face, curFaceLen,

varies.

*/

for(i=0;i<numFaces;i++){

curFaceLen=facesArray[i].length;

midPoint[0]=0;

midPoint[1]=0;

midPoint[2]=0;

for(j=0;j<curFaceLen;j++){

midPoint[0]+=vertsNewArray[facesArray[i][j]][0];

midPoint[1]+=vertsNewArray[facesArray[i][j]][1];

midPoint[2]+=vertsNewArray[facesArray[i][j]][2];

}

midPoint[0]/=curFaceLen;

midPoint[1]/=curFaceLen;

midPoint[2]/=curFaceLen;

dist=Math.sqrt(Math.pow(fLen-midPoint[0],2)+Math.pow(midPoint[1],2)

+Math.pow(midPoint[2],2));

distArray[i]=[dist,i];

}

............................

}

............................