Three.js - Uncaught TypeError: Cannot read property 'normal' of undefined

Question

I got the following error

Uncaught TypeError: Cannot read property 'normal' of undefined 

after running the following code on my webpage:

var text_geo = new THREE.TextGeometry("H", {size:20});
var text_mat = new THREE.MeshBasicMaterial({color:"white", overdraw:true});
var txt = new THREE.Mesh(text_geo, text_mat);

When I use the Chrome debugger, it traces the problem to the three.js source code file. Is there a way to get around this?
Thanks

Answer 1

I've faced the same problem, you should download a font to let THREE.js use it. As default font is helvetiker, it is located here, add it to the page just as regular JavaScript

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

Be sure, that you load the font after THREE.js.

If you want to use font of another type, you can download the respective font and set a weight property:

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

var text_geo = new THREE.TextGeometry("H", {size:20, weight: "bold"});

r.54