I just learned that ThreeJS supports TrueType fonts. Normally if you want to do full 3D text inside of ThreeJS (rather than drawing 2d text to a canvas and using it as a texture) then you must load fonts in this special JSON format, which you can generate from existing font files. It’s kind of a pain, though, and JSON is obviously not the ideal format for font information.
However, I just learned that ThreeJS has a TrueType font loader in the examples repo. It looks like it has been there for a year or so, but I didn’t see any examples that show how to use it. So here is mine:
Normally you would so something like this:
const fontLoader = new THREE.FontLoader() loader.load('./myfont.json',fnt => font = fnt)
Now you can do an extra parsing step with the TTFLoader like this:
const loader = new THREE.TTFLoader() const fontLoader = new THREE.FontLoader() loader.load('./hobby-of-night.ttf',fnt => font = fontLoader.parse(fnt))
Underneath TTFLoader uses the excellent opentype.js library to parse the ttf file into an object that the regular font system can understand.
Subscribe to Mozilla Mixed Reality Blog
Get the latest posts delivered right to your inbox