Blender to Three.js >> Create 3D Text With Any Font

Screen capture of 3D text in Three.js

Thanks to Zz85's work, Three ,js has excellent 3D text creation capabilities. These are described in the Three.js wiki and in a post on Zz85's website. If there is an issue it is that the 3D text uses fonts that have been converted into a special format developed by Typeface.js (as of this writing the web site is not operational) - and is described here.

There can be times, however, when you need to use a specific TTF font and want to be able to do so fairly quickly and easily. Or it may be that you might need custom kerning of text or text with a taper. Again this post if for you.

The technique described here uses a Python script to generate text inside Blender, export the text in JSON format using the Three.js blender export script and then load the text into a Three.js applet. Loading a Python script into Blender is described here.

Below is the Python script I used to generate three lines of text with each line using a different font all as shown in my3D text demo. Each line of extruded text uses a different material and the text is beveled.

Visualizing the Future in Three.js: The Long Walk

Screen grab of "The Long Walk" 

The journey to describe and build the next generation of data visualization apps will be a long and circuitous one. [Is this part of what makes the journey so enjoyable?] On the journey, on occasion, we must stop looking at mere numbers and just look out and see see what we can see.

All this is to say that the weekend before last, I participated in the Art Hack at GAFFTA. The idea was that small teams could develop new artisticky apps. I was predestined to join Tony Parisi's team but no particular job had been decided. My role ended up as being "technical artist". My task was to bring over data created by designers and display it in the web app we were building. This ended up by necessitating the conversion of OBJ files into JSON files and then embedding these into a Three.js files in order to create a scene.

While I was able to accomplish this task, the results were not particularly gratifying. Subsequently I've learned quite a bit more about the topic and present a little demo here with.

The demo is on GitHub and is titled The Long Walk.