Author: Max Pellizzaro
Date: October 29th 2008
version: 3.0.3
Before the introduction of the Extrusion Class I use to strongly believe that Sandy were lacking of a basic primitive: the triangle. The triangle is the building block to all 3D Objects. But as soon as I have discovered and understood the Extrusion Class, I realized how powerful this class is, and how much material there was for new tutorials.
In this first tutorial you will learn how to build a simple polygon, because with this class you can build any kind of convex polygon. This tutorial will give you the basic to build more advance objects that I will show you in the following tutorials.
No need to set up for this tutorial, just download the classes and they are ready to go.
Before digging into the code we need to design what we are going to do. In this tutorial we are going to design an “M”, so we need to write down the coordinates of all the points of the polygon we want to draw, as shown in the next figure.
In this section we report the AS code as a reference, and it will be explained in the next paragraph.
package {
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageQuality;
import flash.display.StageScaleMode;
import flash.events.*;
import flash.ui.*;
import flash.geom.Point;
import sandy.core.Scene3D;
import sandy.core.scenegraph.Camera3D;
import sandy.core.scenegraph.Group;
import sandy.core.scenegraph.Shape3D;
import sandy.materials.*;
import sandy.materials.attributes.*;
import sandy.primitive.Box;
import sandy.extrusion.Extrusion;
import sandy.extrusion.data.*;;
public class Example043 extends Sprite {
private var scene:Scene3D;
private var camera:Camera3D;
private var c:Box;
private var ext:Extrusion;
public function Example043() {
camera = new Camera3D(stage.stageWidth, stage.stageHeight);
scene = new Scene3D("myScene", this, camera , new Group("root"));
var arrayM:Array = new Array();
arrayM[0] = new Point(0,0); arrayM[1] = new Point(0,100); arrayM[2] = new Point(20,100); arrayM[3] = new Point(40,80);
arrayM[4] = new Point(60,100); arrayM[5] = new Point(80,100); arrayM[6] = new Point(80,0); arrayM[7] = new Point(60,0);
arrayM[8] = new Point(60,50); arrayM[9] = new Point(40,30); arrayM[10] = new Point(20,50); arrayM[11] = new Point(20,0);
arrayM[12] = new Point(0,0);
var theM:Polygon2D = new Polygon2D(arrayM);
ext = new Extrusion("m", theM);
ext.appearance = new Appearance (new ColorMaterial (0xFFAF00, 1,
new MaterialAttributes (new LightAttributes( true, 0.1))));
ext.appearance.frontMaterial.lightingEnable = true;
ext.roll = 10;
ext.y = -50;
scene.root.addChild(ext);
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMovedHandler);
addEventListener(Event.ENTER_FRAME, render);
}
private function render(event:Event):void {
ext.pan += 10;
scene.render();
}
private function mouseMovedHandler(event:MouseEvent):void {
//c.pan=(event.stageX-550/2)/5;
//c.tilt=(event.stageY-400/2)/5;
}
}
}
Maybe the most “difficult” part about the usage of this class is defining the coordinates point in the proper order. Keep in mind that the program does not know which kind of polygon you are trying to draw, so remember to give the coordinates of all the points in the proper order, and keep in mind to always close the loop.
With this in mind the points that represent the “M” are:
var arrayM:Array = new Array(); arrayM[0] = new Point(0,0);arrayM[1] = new Point(0,100); arrayM[2] = new Point(20,100); arrayM[3] = new Point(40,80); arrayM[4] = new Point(60,100); arrayM[5] = new Point(80,100); arrayM[6] = new Point(80,0); arrayM[7] = new Point(60,0); arrayM[8] = new Point(60,50); arrayM[9] = new Point(40,30); arrayM[10] = new Point(20,50); arrayM[11] = new Point(20,0); arrayM[12] = new Point(0,0);
Once you have this list of points you just need to instantiate the class called Polygon2D, that, as the name suggest, hold the polygon.
var theM:Polygon2D = new Polygon2D(arrayM);
With you polygon in hand you can mow instantiate the Extrusion class in the following matter:
ext = new Extrusion("m", theM);
The Extrusion class has more arguments you can pass, but we will discover their use in following tutorials.
Well we are done, since the rest of the code is just coloring the M and make it spin.
Let’s see our result now.