TextGeometry in Three.js

Question

I am having some problems with the TextGeometry in Three.js r74..

How do I implement it correctly?

Here is my Codepen:

codepen.io/cheesyeyes/pen/eJqZxK

Thanks in advance!

Here is another example. threejs.org/examples/webgl_shadowmap.html — WestLangley
– WestLangley, Commented Feb 23, 2016 at 23:21

Matt C · Accepted Answer · 2016-06-14 05:37:12Z

17

Okey, for everyone who is looking for simple answers and not links and links to other overloaded examples:

fonts have to be loaded with the three js FontLoader first:

var loader = new THREE.FontLoader();
loader.load( 'fonts/fontname.js', function ( font ) {

  var textGeometry = new THREE.TextGeometry( "text", {

    font: font,

    size: 50,
    height: 10,
    curveSegments: 12,

    bevelThickness: 1,
    bevelSize: 1,
    bevelEnabled: true

  });

  var textMaterial = new THREE.MeshPhongMaterial( 
    { color: 0xff0000, specular: 0xffffff }
  );

  var mesh = new THREE.Mesh( textGeometry, textMaterial );

  scene.add( mesh );

});

edited Jun 14, 2016 at 5:37

Matt C

4,5655 gold badges28 silver badges45 bronze badges

answered Feb 24, 2016 at 8:26

florianmaxim

3751 gold badge5 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Squirrl Over a year ago

THREE.FontLoader is not a constructor

jtiscione Over a year ago

I'm getting the "not a constructor" error too, revision 80.

florianmaxim Over a year ago

I dont know what happened in rev 80 but in 81 its defenitely part of the core and must not be loaded separately. so it must be there?

prisoner849 Over a year ago

FontLoader is a part of the core since r74

rahul cp Over a year ago

is it possible to add letter spacing in textgeometry

|

jgphilpott · Accepted Answer · 2020-07-25 17:28:50Z

2

I will also add that you can convert any existing OTF or TTF font to a JSON or JS font via TypeFace.js, this is necessary for the FontLoader to be able to load it.

answered Jul 25, 2020 at 17:28

jgphilpott

6592 gold badges10 silver badges27 bronze badges

Collectives™ on Stack Overflow

TextGeometry in Three.js

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related