Three.js Text Example

Had some trouble getting text to render using Three.js, and I had trouble finding a simple enough example to use in order to get it working.

Here is the working example:
http://chalupagrande.github.io/threejs-text-example/#it_works!
Note: You can pass in text with a # to change what the text reads!

Here is the Github Repo:
https://github.com/chalupagrande/threejs-text-example

The largest problem I had was actually getting the font to load.
TIP: Don’t include the font file in your index.html file. This will make you get a _typeface_js error. This might be obvious to others, but it wasn’t to me. The typeface should be loaded using the following function, which as you might notice, is an asynchronous call.

function loadFont() {
 var loader = new THREE.FontLoader();
 loader.load(‘mk3_regular.js’, function (res) {
   font = res;
   createText();
 });
}

Obviously, mk3_regular.js is the name of my font file (you can find this font in the github repo), but will likely not be the same as yours. Change this to match the path to your font file.

You can also use this tool to convert a font to a JS file that your FontLoader can read.

Once that runs, you need to create the actual TextGeometry using a function that might look similar to the one below.

Note: Three.js is not always backwards compatible. I am using revision 75. Some versions of Three.js do not include TextGeometry in the core, and you might need to include it as an extra.

function createText() {
  textGeo = new THREE.TextGeometry( t, {
    font: font,
    size: size,
    height: height,
    //... etc
});

Finally, you will want to add your text geometry, add it to the scene and render it!