There’s been some great experimentation with 3d lines and ribbons in Papervision3D, notably Felix Turner’s Ribbon3D and of course the Audi A5 website.
A project I’m currently working on requires the drawing of ribbons in 3D space, and it’s such a simple yet beautiful effect that I thought it was time to have a quick go at it myself.
Looking at some of the available source code though, I felt that there was a slight lack of simplicity, but more importantly a clear API. This no doubt is due to the fact that the aforementioned experiments were just that, experiments, and therefore not built with usability in mind. None-the-less, I wanted a Ribbon3D class which shared a similar looking constructor to that of the native Papervision classes, and which could easily be used in projects and manipulated in the same intuitive manner as the other 3D objects in the Papervision library.
There are some unused methods which I have kept in the source code, as they can create some great effects with pseudo depth of field and colour, but were somewhat processor intensive for the sake of the demo.
As I mentioned, the API is simple and I hope makes sense. The constructor looks like that of any other DisplayObject3D; you pass in a material of your choice, the width of the ribbon and the length (how many segments can be added before the oldest is removed)
var ribbon:Ribbon3D = new Ribbon3D( material, width, length );
scene.addChild( ribbon );
One point of contention was how to make the ribbon grow. I wanted to be able to draw the ribbons using tweens, and so using a method such as addSegment or growTo seemed unnecessarily cumbersome as it would involve using a callback whenever the tween progresses. So too did using alternative members, such as tx, ty, tz etc, as again this would diverge from the standard DisplayObject3D API.
I eventually decided to override the getters and setters for the x, y and z properties, meaning that you can tween an instance of the Ribbon3D class as you would any other DisplayObject3D (including bezier tweens as in the example above) and it will grow to follow the tween. I was hesitant to implement this, as it means that moving or shifting the ribbon as a whole cannot be done in the normal way, however I concluded that the normal use of such a class would be to create trails or patterns, and so moving the whole ribbon around would rarely be required. That said, I have included a moveTo(x,y,z) method if this needs to be done.
So making an instance of Ribbon3D grow is as simple as:
TweenEngine.tween( ribbon, 2, { x:100, y:100, z:100, bezierThrough:yourBezier } );
Because the x, y and z properties can be set separately, you have to call the draw method manually, from within the Timer or EnterFrame event you are using to render your Papervision viewport, for example:
private function render3D ( e:Event ):void
{
// Tell the Ribbon3D to update it's mesh
ribbon.draw();
// Render the Papervision scene
renderer.renderScene ( scene, camera, viewport );
}
I have also left the material property open, so instead of passing in a colour and therefore having to use a ColorMaterial, you can use any of the wonderful Papervision materials, such as the FlatShadeMaterial, which I’ve used in the demo to give the ribbons a bit of extra depth.
I’m looking forward to playing with physics and collision detection in Papervision, as a swarm of boids with ribbon trails that don’t intersect (you can see the clipping sometimes in the demo) would be good to see. I’m slowly building a library of 2D steering behaviours so when and if I get round to learning the math required to port them to 3D I’ll have a stab at it and post the results.
Download: Ribbon3D Class Download: Ribbon3D DemoNote: I have included the build of Papervision3D GreatWhite (rev 682-14.2.08) that I used, as the SVN repository is being updated frequently and may temporarily have adverse effects on the demo. Not included in the zip is the tweening engine I used, TweenMax, which you can read about and download here.
I was wondering if this can get with as2?
How easy would it be to add a sprite(3d) to the ribon “head” that orients along the moving path. Would be nice for arrowheads and tails! Is this going to become part of the class?
Is there a way to pause the ribbons so they freeze after a certain amount of time
Ha I see just remove the ENTER_FRAME, very nice
i try to make this work but i get this wich idont who to get fixed
1020: Method marked override must override another method.
in line33 of Vertices3D
Sounds like something else is going on with papervision there. Are you using the latest build? Check out the SVN at http://papervision3d.googlecode.com/svn/trunk/ or grab the download of ’2.0 beta 1′ from here: http://code.google.com/p/papervision3d/
What is on line 33 of Vertices3D of your version?
first of all thanks for the reply
you are doing a great job
the code is:
public override function clone():DisplayObject3D { var object:DisplayObject3D = super.clone(); var verts:Vertices3D = new Vertices3D(null, object.name); verts.material = object.material; if(object.materials) verts.materials = object.materials.clone(); if(this.geometry) verts.geometry = this.geometry.clone(verts); verts.copyTransform(this.transform); return verts; }Probably its my fault because i am prety noob in as..
I will expirement more and hopefully I will make it work.
Thanks..
Well, Vertices3D extends DisplayObject3D, and DisplayObject3D owns the ‘clone’ method which Vertices3D is trying to override to provide its own functionality. I don’t see why you should be getting this error, unless the method ‘clone’ does not exist in DisplayObject3D – which implies that something is wrong with that class. You could try deleting the ‘override’ keyword from the code you posted above, and see what happens, though this would only help prevent the compile error and may affect other things adversely. Your best bet is to update your Papervision library. If you’re on Windows, install Tortoise SVN, or for Mac try SVNX – then open up whatever apps respective ‘Repro Browser and point it at the repository link above – or if you’re not worried about having the latest build, just download the zip (again, the link is in my comment above). If you’re still getting the error after that, try removing ‘override’ from the clone method in Vertices3D and if you aren’t getting any problems in your program at least you have a temporary fix!
As I say, providing everything is alright in your DisplayObejct3D class (i.e. it has a clone method and Vertices3D is extending DisplayObject3D) then I don’t see why you should be getting that error!
I’m getting the same vertices issue, running a freshly updated set of Papervision classes, with Vertices extending DisplayObject3D, which has an identically formed clone function.
I also recall having this issue many months ago while tackling Papervision; I believe I got frustrated and went back to an old version.
WTF?
Hey Berger. Still having the problem with DO3D? Whats the error you’re getting?
Hi,
I’m using pPapervision3D Public Beta 2.0 – Great White (20.08.08) and changing the Camera3D seem to make it this class work. But I’m having trouble with the FlatShadedmaterial where the 2 sides of the color does not work anymore.
I wanted a different color for underneath the ribbon – 0×666666 and total black 0×000000 for the top, but now everything appears as black.
COLOURS.push([0x000000, 0x666666])
var material:FlatShadeMaterial = new FlatShadeMaterial( light, COLOURS[i][0], COLOURS[i][1], 0.5);
Pls let me know where did i go wrong? Thx !
Is there is a way to add Listener to get the instance name when the user clicks a particular ribbon.
I have added listener to the FlatShadeMaterial in Ribbon3D. But it doesn’t dispatches the event.
Thx