Simple Shape Extruder using FP10 Drawing API
Tuesday, March 10th, 2009My SoTexty 3d Text Effect demo uses a Class I wrote a which takes a polygon in the form of a Vector of Points, and extrudes it into a 3dMesh of sorts.
The colors are random, as is the outline of the shapes... Refresh if the result doesn't please your aesthetics 
Here's the snippet that uses the class:
-
protected function testExtrude():void{
-
var points:Vector.<Point>=createCircularPath(new Point(300,300),200,250,50);
-
var negative_shape_points:Vector.<Point>=createCircularPath(new Point(300,300),90,190,40);
-
var points2:Vector.<Point>=createCircularPath(new Point(550,550),80,20,20);
-
var points3:Vector.<Point>=createCircularPath(new Point(300,650),80,20,20);
-
var points4:Vector.<Point>=createCircularPath(new Point(650,300),80,20,20);
-
_extruded=SimpleShapeExtruderDrawAPI.createExtrudedShapeFromPoints(100,
-
Vector.<Vector.<Point>>([points,points2,points3,points4]),
-
Vector.<Vector.<Point>>([negative_shape_points]),
-
Math.random()*0xFFFFFF,0xFF000000+Math.random()*0xFFFFFF
-
);
-
_extruded.adjustCenter(300,300);
-
_extruded.x=300;
-
_extruded.y=300;
-
addChild(_extruded);
-
addEventListener(Event.ENTER_FRAME,rotateExtruded);
-
}
Instead of Triangulating the shape, I used a "shortcut" which I learned a while back from Den Ivanov. The Mesh contains a "front" and a "back" which are a triangle pair, who use the "original" shape as their material:
The large red square with the diagonal represents the "front", the "back" is identical. A curiosity about this screenshot is that the "filled triangles" are z-sorted correctly, however, there are some issues with the outlines. Meh.
The code accepts a Vector of Positive and Negative "shapes", which are rendered into a BitmapData and used as a "Material" by the 3DMesh. Here is a screenshot of what the "rendered" material looks like:
The filled box on the right is the "material" used by the extruded sides.
Notice the white space surrounding the shape. An annoying issue I ran into was that the "front" and the "back" had unwanted artifacts when using a "1 to 1" ratio "material". The UV mapping would go from 0 to 50% horizontally, and 0 to 100% vertically. For some reason, the edges (when rotated) would render an arbitrary "line" on any of the four sides.
The solution was to add white space, and grab the material using "less precise" percentages, which unfortunately results in some "spaces" on the edges of the "shape" material and the extruded side triangles. Another Meh.
It's not perfect, but I figured the code might be fun to play with...
Download the flex project here
(requires Flex SDK 3.2 or higher)
THE FLASH BAR 
IS HOTT 
