Creating Custom 3D DisplayObjects in Papervision – Part 3
27th May 2009
Ok, now it’s getting really interesting! In the last posts you learned how to set up your own custom Papervision object and how to display textures on it.
Now we are going to animate our object. The idea behind is pretty simple. You add an Event.ENTER_FRAME handler to your object and in every frame you add new vertices to your object, draw new triangles and if there are already enough triangles you remove the one you don’t need anymore.
In detail it will work like this: In every frame we create 2 new vertices and draw 2 new triangles with it. But to draw 2 triangels we need a minimum of 4 vertices. So we take the the last ones we added the frame before.
In every frame we take slightly different coordinates so that or vertices are moving.
Theres only one situation that is special. It is when we start our Event.ENTER_FRAME handler we don’t have 4 vertices. So we just add 2 vertices and wait for the next frame. And this is the code:
{
super( meshMaterial, new Array( ), new Array( ) );
_stage = stage;
_count = 0;
_width = 50;
_stage.addEventListener( Event.ENTER_FRAME, onEnterFrame );
}
private function onEnterFrame (event : Event) : void
{
var vertices : Array = geometry.vertices;
var faces : Array = geometry.faces;
var v1 : Vertex3D, v2 : Vertex3D, v3 : Vertex3D, v4 : Vertex3D;
var z:Number = _count * _width;
if(vertices.length == 0)
{
v1 = new Vertex3D( 0, 0, z );
v2 = new Vertex3D( _width, 0, z );
vertices.push( v1, v2 );
}
else
{
v1 = vertices[vertices.length - 2];
v2 = vertices[vertices.length - 1];
v3 = new Vertex3D( 0, 0, z );
v4 = new Vertex3D( _width, 0, z );
vertices.push( v3, v4 );
var triangle1Vertices : Array = [ v1, v2, v3 ];
var triangle1Face : Triangle3D = new Triangle3D( this, triangle1Vertices, material, null );
faces.push( triangle1Face );
var triangle2Vertices : Array = [ v2, v3, v4 ];
var triangle2Face : Triangle3D = new Triangle3D( this, triangle2Vertices, material, null );
faces.push( triangle2Face );
}
geometry.ready = true;
_count++;
}
And the compiled SWF looks like this. If you try it for yourself and you just see a growing line, move your camera up.
Simply adding the same value to one axis is pretty boring. If you draw a circle with Sinus and Cosinus its getting better. I also deleted some vertices and faces if we have enough from them:
{
super( meshMaterial, new Array( ), new Array( ) );
_stage = stage;
_count = 0;
_segments = 40;
_width = 50;
_radius = 300;
_stage.addEventListener( Event.ENTER_FRAME, onEnterFrame );
}
private function onEnterFrame (event : Event) : void
{
var vertices : Array = geometry.vertices;
var faces : Array = geometry.faces;
var v1 : Vertex3D, v2 : Vertex3D, v3 : Vertex3D, v4 : Vertex3D;
var x : Number = 0;
var y : Number = Math.cos( _count / 8 ) * _radius;
var z : Number = Math.sin( _count / 8 ) * _radius;
if(vertices.length == 0)
{
v1 = new Vertex3D( x, y, z );
v2 = new Vertex3D( x + _width, y, z );
vertices.push( v1, v2 );
}
else
{
v1 = vertices[vertices.length - 2];
v2 = vertices[vertices.length - 1];
v3 = new Vertex3D( x, y, z );
v4 = new Vertex3D( x + _width, y, z );
vertices.push( v3, v4 );
var triangle1Vertices : Array = [ v1, v2, v3 ];
var triangle1Face : Triangle3D = new Triangle3D( this, triangle1Vertices, material, null );
faces.push( triangle1Face );
var triangle2Vertices : Array = [ v2, v3, v4 ];
var triangle2Face : Triangle3D = new Triangle3D( this, triangle2Vertices, material, null );
faces.push( triangle2Face );
}
geometry.ready = true;
_count++;
if(_count > _segments)
{
vertices.splice( 0, 2 );
faces.splice( 0, 2 );
}
}
And the compiled SWF:
That’s a nice circle.
If you change this line
to this line
The result is this:
Now I just changed the material from WireFrameMaterial to ColorMaterial and I drew the whole scene to a BitmapData added a BlurFilter and a ColorTransform.
Then you finally get this
I hope that helped you to understand the basic principle of animating objects in Papervision. If you got it you can do so many cool things with it. Imaging that you could code for examle a flying paper in the wind or a moving sea! Or you could transform spheres to planes or whatever you want.
I think it is great, I’m just waiting for my next project where I can make use of that!
Hai Raphael,
I saw all your three parts. It is very interesting. I got something about creating custom 3D objects. With the code and the sample you shown i created some random objects. That’s fine but i am trying to create a 3D bar chart. Let me suppose i am having 3 dimension data such as Number of medals, Country, Medal List(Gold,Silver,Bronze). how can i draw the bar chart with the above data. I can’t able predict how to set the plane. Please can you help me in this if you have time.
Thanks
Jai
great post!
this is a really good tutorial about the whole vertex handling stuff.
but i dont like the enter frame solution you provide. this might cause performance problemes on heavy class usage.
i suppose you know that, but maybe your readers do not
Thanks Alex!
What do you think is wrong with the ENTER_FRAME approach? Despite the fact that you should never use these events if you don’t need things to be get done in every frame.
A better approach for me would be to have a public method in my object which is called from outside, i.e. in the ENTER_FRAME handler which calls the PV3D renderer. But this would make things a lot more complicated to understand in this tutorial I guess.
Raphael