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

3
votes

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

1
javascriptthree.jsgeometrytypeerror
where is 'normal' in your code? - Lucas
I don't have 'normal' anywhere in my code. I think it is the default value for one of the properties of TextGeometry. - user3179985
Normal is a property of each face of the geometry. Each face has three vertices with an associated normal or one normal defined per face. The error suggests the faces are not being generated for the geometry. - Bjarte Haram

1 Answers

7
votes

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