CODEWITHSUNDEEP
three.jsgeometry
florianmaxim
florianmaxim

Reputation: 375

TextGeometry in Three.js

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!

Upvotes: 3

Views: 20131

Answers (2)

jgphilpott
jgphilpott

Reputation: 649

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.

Upvotes: 2

florianmaxim
florianmaxim

Reputation: 375

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 );

});

Upvotes: 17

Related Questions