Have you ever thought of how to do these moving and transforming objects in Papervision? Click “Start” to see what I mean.
I did. My world was limited to the Papervision primitives and collada objects. Then I needed a growing and transforming object for my current project. So I asked my friend Lars who already did things like that (he also created his own 3D framework by the way). He said that it is not that simple. I didn’t understand everything he was saying but had a rough idea in mind.
I found some information in the internet and set up my own custom object. Actually it is pretty much like drawing lines in ActionScript. You know this stuff:
shape.graphics.lineTo( 100, 0 );
shape.graphics.lineTo( 100, 100 );
shape.graphics.lineTo( 0, 0 );
This will give you a blue triangle. That is easy.
Creating custom objects in a 3D world is pretty much the same.
3D objects in Papervision are basically defined through vertices and faces. Vertices are something like Points in 3D Space. They are stored in an array called vertices and are instances of the Vertex3D class.
The faces are the triangles (polygons) you draw with your vertices. Easily spoken you take 3 vertices and build a triangle with them. You should know that every 3D Object is made out of triangles.
And you also need tell your face how it should display a texture. If you just have a WireFrameMaterial or a ColorMaterial applied to your object you don’t need that necessarily. But you never know what kind of material people will use with your Object, so it is better to define it.
Let’s try that with a really simple custom 3D object. A triangle.
I assume that you have basic Papervision knowledge and that you use Papervision 2.0 Great White.
Ok, this will look like this:
{
import org.papervision3d.core.geom.TriangleMesh3D;
import org.papervision3d.core.geom.renderables.Triangle3D;
import org.papervision3d.core.geom.renderables.Vertex3D;
import org.papervision3d.core.math.NumberUV;
import org.papervision3d.core.proto.MaterialObject3D;
public class CustomTriangle extends TriangleMesh3D
{
public function CustomTriangle (triangleMaterial : MaterialObject3D)
{
super( triangleMaterial, new Array( ), new Array( ) );
var v1 : Vertex3D = new Vertex3D( -100, -100, 0 );
var v2 : Vertex3D = new Vertex3D( 100, -100, 0 );
var v3 : Vertex3D = new Vertex3D( 100, 100, 0 );
geometry.vertices.push( v1, v2, v3 );
var triangleVertices : Array = [ v1, v2, v3 ];
var triangleFace : Triangle3D = new Triangle3D( this, triangleVertices, material, null );
geometry.faces.push( triangleFace );
geometry.ready = true;
}
}
}
Our custom object is extending the TriangleMesh3D class. If you take a look in the Papervision primitives classes you will see that they all extend this class.
Ok, so the constructor of the TriangleMesh3D needs 3 parameters. A material, a vertices array and a faces array. Our custom triangle requires a material as well so we push it to the super constructor. Then we give our super class 2 empty arrays which means something like: We don’t have any vertices and faces for you yet but you will get them very soon.
Let’s build the triangle. A triangle consits of 3 points and 1 shape. Here we will call it 3 vertices and 1 face. We create 3 instances of the Vertex3D class, give them the coordinates in 3D Space and push them in the vertices array which is a property of the geometry instance. The coordinates are pretty much the same as in our lineTo example earlier.
Now that we have 3 vertices we can make a face. In our lineTo example flash automatically connected the 3 points and draw a shape. Here we have to say with which vertices we want to create a face with. So basically we just choose 3 vertices push them in an array and pass them to our new instance of the Triangle3D class which represents the face. The Triangle3D class also needs a material. We just take the one of our displayobject. And it wants a texture map. I will explain that later for keeping things simple at this point it is null for now. As long as you don’t apply a texture material on the object you won’t need it.
So, here we go. Our first custom 3D Object:
Here is the code which does the Papervision setup:
{
_basicView = new BasicView( 455, 256, false, false, CameraType.FREE );
addChild( _basicView );
addEventListener( Event.ENTER_FRAME, onRender );
var material : ColorMaterial = new ColorMaterial( 0xFF );
material.doubleSided = true;
_arrow = new CustomTriangle( material );
_basicView.scene.addChild( _arrow );
}
private function onRender (event : Event) : void
{
_arrow.yaw( 2 );
_basicView.singleRender( );
}
Ok, cool. So now you know how to set up your own custom Papervision DisplayObject. In the next part I’m going to show you how texturemaps work.