Pages

Wednesday, March 21, 2012

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.

// convert text to meshes so they can be exported
bpy.ops.object.mode_set(mode='EDIT')
bpy.ops.uv.smart_project()
bpy.ops.object.mode_set(mode='OBJECT')

Why do I do it this way? I happen to find it much easier to program in Python than to learn the Blender user interface. ;-)

Please note that I did nothing to reduce file sizes so the JSON files amount to over 10MB - so it could take a file to load the demo the first time - or you might have to reload. Also you can use mouse button down to rotate/zoom/pan the view.