Article
About the Author
Jack Herrington
Jack Herrington is an engineer, author, and presenter who lives and works in San Francisco, USA. He writes regularly on the topics of Flex, Ajax, Silverlight, PHP, and Ruby on Rails at http://jackherrington.com.
Create A 3D Product Viewer in Flex 3
This is the winning article from the recent competition we ran to promote Flex articles on sitepoint.com.
I remember the first time I saw the Mini Configurator on the Mini USA site. I was blown away -- I loved just playing with the colors and the options -- it was a truly immersive experience of the kind that only Flash applications can offer, and I'm sure it sold more than a few Minis.
Ever since then I've wanted to create one of my own, and in this article I'll show you how to do just that. For this example, I'll assume that you're across the basics of working with Flex 3 -- that you're set up with an editor such as Flex Builder 3, are familiar with MXML and ActionScript 3, and can create basic applications. If you're after a beginner's tutorial, or need a refresher, try Rhys Tague's beginner's tutorial.
Getting Started
The idea of a "configurator" is pretty simple: provide a 3D model of some object, then allow the user to change the colors, or to hide and show various parts of the model.
To build your own configurator, you need three things.
- a 3D modeling tool
- a 3D model of an object (either something that you've downloaded or created yourself)
- a tool for displaying that model in a Flex application
As far as 3D modelling tools go, I've found that Google's Sketchup is ideal. It's free, which is always good, but the other bonus is the huge database of models in Sketchup format that are available in the Sketchup 3D Warehouse.
After downloading and installing Sketchup, I visited the 3D warehouse and selected a model to use in my application. For this article, I've chosen one of the light cycles from the Disney movie Tron. My decision to use this object was partly cultural (every true geek loves the movie) and partly because it's a fairly simple shape, so allowing the user to alter it (for example, by changing its color) wouldn't be too complicated.
The light cycle model I've used is displayed in the image below.
My model light cycle didn't actually exist in the exact format pictured above. To begin with, there were a pair of light cycles -- I deleted the second one, and tilted the remaining cycle a little, in order to begin with a shape that was perfectly vertical. I'd recommend you do the same for your own model.
You should also reposition your model so that it's centred around the origin point (this point is represented by the intersection of the red, green, and blue lines in Sketchup). This step is really important, because when you load the model you want to know where it exists in your scene. If the model is floating off in space somewhere, it's going to be difficult to find, so be sure it's oriented around the point (0, 0, 0).
To import the light cycle into your Flex application, you need to save it in a standard file format. The format that seems to be the most popular for 3D tasks is Collada, but unfortunately the Export to Collada format functionality is only available in Sketchup Pro.
Luckily, I have a trick up my sleeve: if you export the model in Google Earth format, there's a Collada file hidden in the Google Earth .kmz file. All you need to do is change the extension of the Google Earth file from .kmz to .zip, and unzip the file. Among the unzipped files you'll find a directory named models that contains the Collada model. Voila! You've exported a Collada file from the free version of Sketchup!
Installing PaperVision 3D
With our Collada model in hand, it's time for us to find a way import our light cycle into a Flex application. Our first task is to select a 3D rendering engine for Flash to display it with. There are two free 3D engines to choose from at the moment; PaperVision 3D and Away3D. For this example, I've chosen PaperVision because of its integration with the ASCollada library, which is a very comprehensive Collada parser for ActionScript.
To download the latest version of PaperVision 3D, perform an SVN checkout from the PaperVision Subversion repository. If you're not comfortable working with Subversion, you can download the files that I've used to create this example from this article's code archive.
Then create a new Flex application project (either using Flex Builder 3 or the Flex 3 SDK) and copy the com and org directories from the GreatWhite branch into your Flex application project.
Next, create a new assets folder, and copy the model file I exported from Sketchup into it; call that file cycle.dae. If your model contains texture files, then you'll need to copy those files into your Flex project as well. You'll also need to edit the .dae file (which is really just XML) to make sure that the texture objects point to the correct texture paths. Thankfully the little light cycle model that we're using for this example doesn't make use of any textures.
With everything in place, your project should look something like the image shown below.
The assets directory holds the model and any textures it needs. And the com and org folders come from the PaperVision Great White code.