Three.js TextGeometry and the Missing Font

‹prev | My Chain | next›

Tonight I am going to take a look at another of the many, many features of Three.js that I know nothing about: TextGeometry. I can not explain it, but I fear that text geometry is going to prove difficult for me. I have no reason to expect this—for all I know it will work like anything else in Three.js—but still, I fear it.

To overcome said fear, I start with an empty project in Mr Doob's Code Editor. In there, I try to add TextGeometry to the scene, treating TextGeometry as I would any other Three.js Geometry:

  var shape = new THREE.TextGeometry("Game Over");
  var wrapper = new THREE.MeshNormalMaterial({color: 0x00ff00});
  var words = new THREE.Mesh(shape, wrapper);
  scene.add(words);

Sadly, I see nothing and find the following in the JavaScript console:

Uncaught TypeError: Cannot read property 'normal' of undefined

Most (all?) of the examples on the Three.js site make use of a "helvetiker" font that appears to be defined in JavaScript. Since the font is specified in the TextGeometry's options argument, I would not expect this to be required, but I cannot think of anything else to try.

So I add a <script> tag to pull in the helvetiker font from the Three.js site:

<script src="http://mrdoob.github.com/three.js/examples/fonts/helvetiker_regular.typeface.js"></script>

Next, I add the helvetiker font to the TextGeometry constructor:

  var shape = new THREE.TextGeometry("Game Over", {font: 'helvetiker'});
  var wrapper = new THREE.MeshNormalMaterial({color: 0x00ff00});
  var words = new THREE.Mesh(shape, wrapper);
  scene.add(words);

With that, I finally get my text:

I am confused as to why an attribute in the options object seems to be required. I think I am likely missing something obvious. I will puzzle through this a bit more and ask in the IRC channel tomorrow, if I am unable to come up with a satisfactory explanation.

Regardless, I have it working. I must have tried this at some point earlier, which would explain my initial concerns. Happily, I was able to get a little further tonight.

The Code.

Day #521