Posts Tagged ‘3D’

FIVe3D Cheat Sheet: The Display Classes

Tuesday, May 27th, 2008

As should be obvious, I’ve been pretty fascinated with Mathieu Badimon’s elegant little 3D vector engine FIVe3D for some time now:

Experiments in the Third Dimension: FIVe3D
FIVe3D and TweenLite: Text Cloud
Best FIVe3D Experiment Yet
FIVe3D TextCloud: AS3 Tutorial and Source

And as I’ve mentioned, FIVe3D is in my opinion the easiest Flash 3D engine to pick up and play with. In my tutorial above (link #4), I am able to get a little demo running in just a few lines of ActionScript. However, my tutorial only covers the DynamicText3D class (and to a lesser extent, the Sprite3D class). Thus, as a companion work, I’ve put up a quick summary and comparison of the FIVe3D display classes below. Hopefully this will help tide a few people over until Mathieu releases the real documentation (which will certainly be much more exhaustive than my little effort).

Display Classes

Class Extends Description and Notes Dispatches MouseEvents?
Scene3D Sprite This is the base display class for the FIVe3D display list. It corresponds to the Stage in the normal Flash display list. Put simply, if it ain’t on here, it ain’t getting rendered. Yes
Graphics3D N/A This is the FIVe3D equivalent to the AS3 Graphics class. All FIVe3D display objects (with the exception of Scene3D and Sprite2D) have one, with the instance name of graphics3D. It has many of the same methods as the normal Graphics class, and you can also send an instance to the Drawing class if you want to draw additional shapes. Take a look at the example that comes with FIVe3D to see this in action. N/A
Shape3D Shape This is as basic (and as lightweight) as FIVe3D gets. Sprite3D and Shape3D share the same relationship as Sprite and Shape in AS3: both have a Graphics3D instance for drawing, but Shape3D is non-interactive and cannot have children. No
Sprite3D Sprite Just like a Sprite, but in three dimensions. Unlike Shape3D, this class can have children, each of which adopts its parents’ positions and rotations. It is also interactive. Yes
Sprite2D Sprite Sprite2Ds may be placed in three dimensions (that is, they have x, y, and z coordinates), but they can only rotate around the z axis. In other words, they’re just like normal Sprites with a “z” coordinate. Also, Sprite2Ds do not have a graphics3D object- just the plain old graphics. This means that you can’t use the methods in the Drawing class with this (unless you tweak the Drawing class). Yes
DynamicText3D Sprite3D This is a Sprite3D that displays font glyphs. Think of it as a 3D TextField. You can set the size, color, font (”typography”), and letter spacing. Fonts are kept in the typography package. Yes
Bitmap3D Shape This is analogous to a Shape3D that displays Bitmaps instead of vector graphics. Take a look at the Earth Cube source for an example of this in action.

No
Video3D Bitmap3D Video3D is a dynamic Bitmap3D, and a shell for a Video object. Just like a Video instance, you can use attachNetStream() or attachCamera() to set the video source. No

So let me know if this is useful to you- or if not, what would make it useful (more examples? benchmarks?). Hopefully it will at least give a little clarity to those who are curious about this engine.

FIVe3D and TweenLite: Text Cloud

Monday, April 28th, 2008

UPDATE: I have another FIVe3D example/experiment (3D graphing) here. And, if you’re just cruising the web for FIVe3D examples, I have yet another one here.

I can’t seem to get enough of this FIVe3D thing. It’s even becoming natural to capitalize every letter except for that “e” when I write it. Not that I’m blinded to its faults, for there are a few here and there. But for quick 3D text rendering, I have yet to find its equal.

Take today’s experiment, for example. It was originally a Twitter viewer, but I haven’t figured out how to get it working online yet, so I’ve given it some generic text to render. It uses TweenLite for movement, and FIVe3D for rendering. Try clicking around and moving the mouse.

The part of this project that would have been challenging in PV3D or Sandy is the spacing of the letters. It was a great relief to find that FIVe3D is already intimately aware of each letter’s size, since it is rendering them as shapes. Thus, I didn’t have to painstakingly experiment to find the proper spacing.

Once I actually think up a clever tagline, I might just turn this into my site header. This could also be a pretty slick little tag cloud for site content, but I think it might get annoying if this was the only way to find a category. Ah well. A man can dream.

UPDATE
I did indeed turn this into my header. We’ll see how many people play with it.

UPDATE #2
And… I took it back out. Seems that something was weird with IE and Kimili Flash Embed. Or… it could have been user error.

UPDATE #3And… source code is live! With a tutorial/walkthrough, even! Get it here:
FIVe3D TextCloud: AS3 Tutorial and Source

Experiments in the Third Dimension: FIVe3D

Tuesday, April 22nd, 2008

UPDATE: For a more interesting and less useful FIVe3D example, see my other post here. And for yet another example that runs surprisingly well considering the sheer number of filters it uses, see here.

After some diligent research, I have compiled a list of things that impress me about Mathieu Badimon.

  • He lives in Paris
  • He speaks at least two languages (that is, I assume he speaks French as well as English.)
  • He has had at least one website on The Flash Website Awards
  • He apparently seems to understand exactly what the Flash community needs in a 3D engine

This last one in particular has gotten me excited today, because today I learned that he has released said 3D engine into the wild. Apparently he did this some time ago, but I only found out in the last few hours- and I, suffice it to say, am thrilled.

Here’s why I’m excited about this engine. Everybody in the community knows about Papervision3D, Away3D, or Sandy. There’s nothing new there. But all the development in those arenas seems to be in the direction of textured polygons, an area which holds limited appeal to me because of the limited power of the Flash Player. In general, I’ve found that nice smooth 3D vector effects that I want, I’ve had to bend Papervision to my will. Or, in some cases (such as text), I’ve never gotten a result I’m happy with.

So that’s why I’m thrilled about FIVe3D, which focuses on 3D vectors. Nice smooth lines, better text (although still not perfect), and no weird clipping issues that I’ve run into yet. It still seems to be pretty basic, and hopefully M. Badimon plans on continuing development, but what I see right now is pretty impressive. Here’s what I cooked up in about an hour. It’s a little rough, so forgive me- this is my first time with the engine. Reload the page to see the animation.

The subject matter is a little boring, but I think it will leave a certain potential client muchly impressed. Here’s the direct link, if you’d like to impress your own clients: FIVe3D.