Papervision programming tutorial - 3D Text

VIEW THE DEMO
DOWNLOAD THE CODE

A good logo can be eye catching, and the difference between your product attracting a customer, or being overlooked. And an animated logo certainly does catch the eye. This tutorial shows you how to create a moving 3D text logo with Papervision.

My inspiration for this example came from the Windows “3D Text” screensaver. I used to have it as my screensaver showing the time, which is exactly what this Papervision application does. However the code presented here could be easily extended to display any sort of text message, and because it is fully rendered in 3D you can move and interact with it in real time any way you want. It goes a step above tools like Xara 3D, which aim to render a predefined animation using 3D text.

The first step is creating 3D models of a font. You’d be surprised how many different tools I tried before finding one that would easily allow you to create a 3D font character. In the end I used a program called AccuTrans, which has a very simple procedure for creating and exporting 3D text.

With the 3D characters created the rest was quite easy. If you look in the ApplicationManager class you’ll see that basically all we do is load up Papervision models for each character, and space them out to display the text that we want. This application displays the time, updated every second. The only issue I ran into was that reloading Collada models, even just the 8 of them required to display the time, caused a significant drop in frame rate. I remedied the situation by only loading those characters that were changed, which speed up the program sufficiently.

Check out more web development tutorials and articles here.

Go back to Papervision Tutorials