ERain designers Ryan Carsella and Stu Mayhew collaborated with ERain engineer, Chris Carsella to create the 3D World Clock using ZAM 3D and Microsoft Expression Blend. Ryan walks you through the steps he took in this short project overview.
This is quick overview of the steps and workflow for creating the world clock. To start off, I’ll give a short introduction to ZAM 3D, which played an important part in creating this. ZAM 3D is a modeling program that lets you build and animate objects much like other 3D programs would. The picture below shows an example of a model inside the interface.
You can then take that model and export it as xaml code, which then can be imported into Microsoft Blend, where you can further manipulate it in an application environment.
Now, in the case of the world clock, I took a model of a globe, converted it to xaml, created a clock interface, and then just hooked up the right parts.
So, on to the first step: creating the globe. To do this, I used two separate objects, 1 for the sphere and another for the continents. I did this so I could make the oceans semi-transparent for a bit of a more interesting look.
The next thing I did was create a push-pin model using the lathe editor in ZAM 3D to represent different cities. I then added it to the globe group.
I then animated the globe group using two 180 degree rotations.
At this point it was just a matter of placing pins for each city. I found myself changing views a lot to make sure everything was lined up correctly. I also moved forward and backward in the rotation animation to get a better look at the placement of the pin.
After placing all the pins and naming them appropriately, it was time to export. You can do this by going to file > export scene to xaml. I named it Globe and selected Viewport3D.
The next step was to open up Blend and import the xaml file. There had to be a bit of tweaking with materials and such to get the right look I wanted. That can all be done through xaml, or through Expression Blend’s UI.
For the actual clock, I created a separate Photoshop .png for each number and lined them up appropriately.
I then wrote some code to swap out the numbers based on the system time.
To associate different times with each city, I needed to wire those up as well. I’ll just summarize since the code is much too long to explain here. Since each city has its own pin model, I basically associated a time zone with each model. I then set up hit testing so that every time you clicked on the viewport it would fire a raytrace. This checks to see if a mesh or geometry crosses through the coordinates you click. If a mesh is present, it does a quick list check to see if that mesh is a city. If it is in fact a city, it then checks the time zone for that city then triggers the correct time offset for the clock.
In the next step, tooltips were added for each city. The same system of hit testing was applied here as well. But this time, since there was no clicking involved with tooltip mouseovers, a hit test was fired every 100 milliseconds to check for city pins under the mouse.
As a final touch, I added the flag for each country as a 3D image behind the clock. You can take it a step further and use ZAM 3D to create a flag wave animation perhaps. Set any material in ZAM 3D and use Blend to dynamically swap it out based on what city you click.