Scripting 3D in Flash
      by senocular

Wire Frame Examples Using the Drawing API
The drawing functions in Flash was only just touched upon in the first example. Its about time we started pushing what they have to offer in terms of getting a true rendered 3D shape out of all that has been learned so far in creating a 3D scene in Flash. No attached movieclips involved here.

Same as before, only now there's a wire frame cube drawn between those rotated points from the pointsArray and no balloon movieclips are involved.

[ drawn wire frame cube ]

Steps to Create Animation (partial)

1. There's pretty much only one change in this movie from the balloon-based cube, and that's the replacement of the attached clips with the drawing methods needed to draw out the wire frame All that involves is a lengthy planned out list of moveTo and lineTo commands to correctly connect the dots in the screenPoints array in the rotateCube onEnterFrame function.

rotateCube = function(){ cubeAxisRotations.y -= this._xmouse/3000; cubeAxisRotations.x += this._ymouse/3000; var screenPoints = Convert3DPointsTo2DPoints(pointsArray, cubeAxisRotations); this.clear(); this.lineStyle(2,0xff0000,100); // top this.moveTo(screenPoints[0].x, screenPoints[0].y); this.lineTo(screenPoints[1].x, screenPoints[1].y); this.lineTo(screenPoints[2].x, screenPoints[2].y); this.lineTo(screenPoints[3].x, screenPoints[3].y); this.lineTo(screenPoints[0].x, screenPoints[0].y); // bottom this.moveTo(screenPoints[4].x, screenPoints[4].y); this.lineTo(screenPoints[5].x, screenPoints[5].y); this.lineTo(screenPoints[6].x, screenPoints[6].y); this.lineTo(screenPoints[7].x, screenPoints[7].y); this.lineTo(screenPoints[4].x, screenPoints[4].y); // connecting bottom and top this.moveTo(screenPoints[0].x, screenPoints[0].y); this.lineTo(screenPoints[4].x, screenPoints[4].y); this.moveTo(screenPoints[1].x, screenPoints[1].y); this.lineTo(screenPoints[5].x, screenPoints[5].y); this.moveTo(screenPoints[2].x, screenPoints[2].y); this.lineTo(screenPoints[6].x, screenPoints[6].y); this.moveTo(screenPoints[3].x, screenPoints[3].y); this.lineTo(screenPoints[7].x, screenPoints[7].y); }; theScene.onEnterFrame = rotateCube;

2. As an added bonus, the make2DPoint function no longer needs the depth or scaleRatio properties making it much simpler to use (not that it was such a burden previously). Otherwise, everything else can remain the same.

make2DPoint = function(x, y){ var point = new Object(); point.x = x; point.y = y; return point; };

Wire frame Tube
So far, in using the drawing API, we've only implemented straight lines. Would you ever have thought curves work in 3D too? Well, they do. We can use curves and approximate a circle for each axis and rotate those circles to give the impression of a curved tube. All that's changed is the pointsArray and the drawing methods used to draw out the shape.

[ drawn wire frame tube ]

There is still quite a bit more, so feel free to explore the next tutorial for more information involving shapes and fills. After all, who likes to look at wireframe objects?