Wednesday, September 26, 2012

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

6 comments:

  1. Im trying to use another font with THREE.TextGeometry too and having the same issue. Let me know if you get anywhere with this!

    ReplyDelete
  2. Hey, great post. I'm having similar problem with unicode characters. Can you help me with this: http://stackoverflow.com/questions/18316073/cant-get-unicode-font-to-work-with-three-js-textgeometry

    Thanks :)

    ReplyDelete
    Replies
    1. Replied. I think it is just a character encoding issue -- it ought to work.

      Delete
    2. Thanks, it worked :)

      Delete
  3. var cube2 = new THREE.Mesh(new THREE.TextGeometry( 'Hello World', { size: 5, height: 1, face: "helvetiker", weight: 'bold' } ), new THREE.MeshBasicMaterial({color: 0x0000ff}));
    in the docs and some of the code refers to font: { "yadayada font" }, but that is not correct, use { face: "yadayada font" }. Also use "normal" not "regular"

    ReplyDelete