Despite some noble attempts the web remains a very two dimensional medium. VRML came and went without making much of an impact, and while Java does give you the ability to do some 3D rendering on a web page Java 3D engines like JMonkey don’t recommend trying to create an applet (http://www.jmonkeyengine.com/wiki/doku.php?id=writing_a_jme_applet&s=applet). Flash does give you an alternative though. With the performance improvements introduced with Flash Player 9 and 10, and an Actionscript 3D engine, rendering a simple 3D scene in a web page is quite easy.
There are a number of freely available Flash/Flex 3D engines to choose from. Some of the major ones are:
In this tutorial I will show you how to render a 3D model via the Flash Player in a web page using Flex and the Papervision 3D engine. Like all Flex applications we start with the MXML file.
Click here to see the Actionscript source code for Papervision1.mxml
As you can see the code here is very simple. We define an application, add an EngineManager child element, and call the startup function of the EngineManager in the creationComplete function (which we have attached to the Applications creationComplete event). The EngineManager class is responsible for initializing the Papervision 3D engine. It’s here that we create the various elements that allow us to render a 3D scene using the Papervision 3D engine.
Click here to see the Actionscript source code for EngineManager.as
The EngineManager extends the UIComponent class, which is the base class for all visual components. Essentially this means we can add the EngineManager as a child of the Application object, and also add children to it. If you are using Flex Builder you will see that the EngineManager class becomes a custom component that you can drag and drop onto the designer.
The EngineManager holds and initializes 4 basic Papervision 3D objects: a Viewport3D, BasicRenderEngine, Scene3D and Camera3D. These 4 objects represent the minimum Papervision 3D object required to render a 3D scene to the screen. We also create a new MeshObject object in the startup function. The MeshObject class and the resources held in the ResourceManager class will be explained later. The EngineManager also holds an ArrayCollection if BaseObjects, which serve as the base for all objects that exist in the 3D world.
Click here to see the Actionscript source code for BaseObject.as
The BaseObject class doesn’t actually do a great deal. All it does is register itself with the EngineManager in the startupBaseObject function, and remove itself in the shutdown function. It also holds an empty function called enterFrame which extending classes are expected to override. It’s inside this enterFrame function that extending classes will update themselves.