Wednesday, December 22, 2010

Drawing 3D Shapes in Flex

I found this great 3-part article by Lee Burrows on how to draw semi 3D shapes in Flex:
  • Part 1
  • Part 2
  • Part 3

  • I highly recommend that you check them out.

    Expanding on those examples I've changed them slightly in the following ways:
  • Instead of rotating the shape based on mouse position, the rotation now happens when you drag your mouse
  • Added a 3D Triangle and a 3D Arrow (combines a triangle and a cube)
  • Added a 3D shape with 6 different hockey logos, one on each side

  • All credit goes to Lee for his excellent examples. If you want to understand the math behind it all, then definitely read his article. My examples don't have much in the way of comments.

    View Source is available for all the following examples, right click below to access the source.

    Example #1 - Simple Rotating Cube:

    Example #2 - Rotating Triangle:

    Example #3 - Rotating Arrow (with highlighting):

    Example #4 - Cube With Image/Bitmap Fill:

    You might notice a few tiny problems with the arrow. When rotating it in certain directions some lines show through that shouldn't be visible. It is most likely due to combining the two shapes (one cube and one triangle) to form the arrow.

    Also, the mouse dragging to rotate works as expected until you've rotated the shape 180 degrees, then it becomes backwards. I haven't spent the time to try and fix this.

    The fourth example uses Lee's Shape3D class which encapsulates the 3D functionality in one simple class. It is much cleaner this way.