Creating Custom 3D DisplayObjects in Papervision – Part 1

8th April 2009

Have you ever thought of how to do these moving and transforming objects in Papervision? Click “Start” to see what I mean.


Get Adobe Flash player

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.beginFill( 0xFF );
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:

package
{
    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:


Get Adobe Flash player

Here is the code which does the Papervision setup:

private function init3D () : void
{
    _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.

  1. [...] > Creating Custom 3D DisplayObjects in Papervision – Part 1 | Raphael Wichmann [...]

  2. Dude, you’re the only one i could find online. I wanted to create a 3D hexagon with triangles using papervision and I think your tutorial is my way out. I can’t seem to figure out a way to rotate and scale them into the correct portion.

    I think i really need to know how the texturemaps work. Hopefully you can finish the tutorial soon! Let me know a date.

  3. Hey Hunson, I guess I’m going to put the next part online next weekend. Maybe earlier..

    Actually you should be able to set up your hexagon without knowing anything about texturemaps. A hexagon consists basically of 6 planes (2 triangles) each rotated by 360 / 6 = 60 degree. Its a bit of sinus and cosinus stuff you need. If you manage to draw a hexagon in 2d you should be able convert the logic to 3d.
    The texturemaps just define how to transform a texture on your triangles..

    Cheers, Raphael ;)

  4. ic, I’m able to create a perfect hexagon 2 dimension shape in papervision. I actually wanted more than that. I wanted a physical 3 dimension to it, meaning I want to give it a certain z-index thickness. I understand that I would have to rotate and reposition more triangles to fill the gap, but I can’t find any documentation to guide me to properly navigate the triangles.

    Not really sure if you understand me, simpler put, I want a papervision CUBE class object in hexagon shaped by triangles, empty inside.

    Is there a proper documentation for that or did I miss it. Or I need a reincarnation, maybe then I will have higher IQ.

  5. Hehe, I guess it has more to do with concentration and creativity than intelligence ;)
    Actually I’m not sure if I get exactly what you plan to do but if you already have a hexagon it should’nt be too hard to do.. I guess you won’t find a documentation for this special case.

    Raphael

  6. Hey,

    Thank you very much for this little tutorial. I am trying to recreate what you have here in flash to get your rotating triangle but am encountering an error (1067: Implicit coercion of a value of type Class to an unrelated type org.papervision3d.objects:DisplayObject3D.). I put the package in a separate AS file and the init3D() and onRender() functions inside the class. What am I missing? I am sort of new with flash and AS. Any help would be appreciated!

    Cicero

  7. This looks super cool, I going to give this a go tonight, thanks for sharing.

  8. Hi, thanks for the code, but I still have a strange problem. When the triangle is outside of the screen the console log keeps telling me there is a null pointed being used somewhere. If I disable the culling it works but I really need to cull the triangles.

    Any idea? Thanks!

  9. I found this framework. Maybe it is interesting in combination with this tutorial: http://code.google.com/p/as3dmod/

  10. Sir is there any possibility to download the source file for this? Thanks. Great Tutorial BTW

Leave a Message