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):

<![CDATA[
	import mx.core.UIComponent;
	import mx.core.IUIComponent;
	import net.badimon.five3D.display.*;
	import net.badimon.five3D.geom.*;
	import net.badimon.five3D.typography.HelveticaBold;
	import net.badimon.five3D.utils.*;
			
	public var plane:Sprite3D = new Sprite3D();
			
	public function init():void{
				
	//Create the a new Scene3D
	var scene:Scene3D = new Scene3D();
	scene.x = 200;
	scene.y = 75;
				
	//Create a plane for us to rotate
	plane.graphics3D.beginFill(0xFF0000);
        plane.graphics3D.drawRect(10.0,10.0,100.0,100.0);
        plane.graphics3D.endFill();
				
	//Add the plane to the 3D Scene
	scene.addChild(plane);
				
	addChild(scene);
				
	//Update the plane rotation each frame
	addEventListener(Event.ENTER_FRAME, rotatePlane);
     }
			
     public function rotatePlane(e:Event):void{
        plane.rotationY += 1;	
        plane.rotationX += 1;
        plane.rotationZ += 1;
  }
			
  ]]>

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!