Flex 3 & the FIVe3D Library

Printer-friendly versionSend to friend

This posts is aimed at helping other people interested in using the FIVe3D Flash 3D Engine in Flex. I spent a good few hours trying to figure out why all the tutorials I was following were not working, so hopefully this post will help anyone in the same boat. I only managed to figure this out by diving into the Flex 3 Language Reference and swearing a lot!

Ok so here's the deal in short - if you follow the tutorial found over at Pixelwelders (great site by the way!) in the Flash IDE you will have no issue whatsoever, however for coding I prefer to use Flexbuilder as the Flash IDE still does not support code completion / hinting for 3rd Party Libraries, which I still find baffling but I digress.... If you follow this tutorial in Flex builder you will more than likely find that it will error. This may depend on whether you have a newer or older build of Flex as I found my work PC compiled it with no problems whereas my MacBook Pro wouldn't (the mac had the newer build).

As a quick example, copy the following code into a new Flex project (and add the FIVe3D library to the project's build path):

Hit the debug button and the build will error, the error you will see will be a Type Coercion Error like this one:

TypeError: Error #1034: Type Coercion failed: cannot convert net.badimon.five3D.display::Scene3D@237b4f71 to mx.core.IUIComponent.

The number after the @ symbol is not important, its different everytime. The problem stems from the fact that FIVe3D does not implement the IUIComponent, meaning that you cannot add a symbol of this type to the display list for Flex to render as Flex doesn't see it as a compatibly display object.

The solution is actually remarkably simple (too simple for your average web developer really), you need to wrap your Scene3D object in a IUIComponent and then add it to the stage. In the example above, remove the line:

addChild(scene);

and replace it with:

var uic:UIComponent = new UIComponent();
uic.addChild(scene);
addChild(uic);

Hit debug again and you should now be able to build without errors, and you should see a red plane spinning around like the example below. I'm looking forward to doing more with this library at some point now that I have it working properly, I hope this saves someone some headscratching... again any feedback gladly received!