Create A 3D Product Viewer in Flex 3

By Jack Herrington

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.

  1. a 3D modeling tool
  2. a 3D model of an object (either something that you’ve downloaded or created yourself)
  3. 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