June 16th, 2009

Creating a 3D cube with images in Silverlight 3

All Silverlight Examples, Silverlight 3 tutorials, Silverlight C# Tutorials, Silverlight Effects, by Gavin Wignall.

In the below example I have used the new Projection properties in Silverlight 3 to create a3D cube that has a different image on each face.

The ‘how to’ bit

You can read more about using the new Projection properties in my 2 previous posts here:

Controlling Projection in Silverlight 3
Using projection to build a 3D carousel in Silverlight 3

I use the same process with the 3D cube to control the movement dependant on the mouse position. To get the cube to work correctly I have had to use all three dimensions (X, Y and Z) of the projection properties. The more complicated the shape the harder it is to get all angles to move together. In the above example I have had to manipulate 12 projection values to get the cube to move correctly.

Moving forward

This example is still a fairly simple example of interaction, there is no reason that the images could not be updated dynamically or video be used instead. Also each image face could have it’s own navigation interface to spin to the next face.

Grab the code

As always you can grab the code for the example in this post here.

Back Top

Responses to “Creating a 3D cube with images in Silverlight 3”

  1. Hey, great post, really well written. You should write more about this.

  2. Hey, it looks great. The disadvantage of that permanently projection rendering is that the processor has a load of 30% while the cube is rotating. Is it possible to integrate a caching process?

  3. Remember that the current plug-in is in beta so there maybe some improvement when the live version is released.

    Also, in this example, I run the code that moves the cube every rendered frame which allows for maximum smoothness but will use up as much process as it can. If you are worried about processor speed you could limit the render speed to a fixed amount – down to around 25 frames per second before it gets too jumpy.

  4. Cool post, just subscribed.