Showing font in three.js is not easy as much as 2d frameworks. There may be numbers of ways to show text, what I could find are:
- Use BMFont
- Use typeface.js fonts (here is a sample but please be advised that the pen is really slow.)
I tried both of above, I ended up with the BMFont option because it is quite light and works faster. Yet I really liked how text characters shown with the typeface.js option looks in 3d.
Here is a small sample script to show how to show BMFont text in three.js.
A rough guide of procedures to use BMFont is as follows:
- You need to prepare a font file. There are numbers of options. For MacOS, there are software called Glyph Designer or bmGlyph. For a cross platform solution, Hiero is available as it runs on java. You will produce a png file and an accompanying json file for your font.
- Load the font file dynamically with XMLHttpRequest (see loadFont() function in the sample code above.) Parse a received json text data and set that to a variable.
- Create an instance of TextBitmap class. Set a url path to the font image to the imagePath property. The “font” property needs the font data set in the step #2 above.
- Add the group property of TextBitmap class instance made in the step above to the scene. (for the steps from #3~#4, please refer to createTextLine() function to roughly see how it is done.
- To change the text, set a text string to the text property. See generateRandomTestPattern() function.
This might not be the best sample but I hope that you get an idea of what to do with BMFont in Three.js.
Thank you for reading!