use TextGeometry.js in Three.js

Question

I was wondering how you use the TextGeometry.js from the extras folder in three.js in your three.js scene. I was trying to add text to my scene. I found this file and have no idea how to implement/use it. Here's a link to the file: https://github.com/mrdoob/three.js/blob/master/src/extras/geometries/TextGeometry.js

You can find some ready-made fonts here: github.com/mrdoob/three.js/tree/master/examples/fonts, and can see they work here: threejs.org/examples/#webgl_geometry_text What version are you using? TextGeometry was moved out of core in r73, then moved back in on r74. So you shouldn't need to reference the file you mentioned, explicitly, unless using r73. (In fact it is now a broken link.) — Darren Cook
– Darren Cook, Commented Oct 18, 2016 at 9:56

guardabrazo · Accepted Answer · 2016-09-16 08:05:48Z

2

First create a JSON font here.

Then load it like this:

var loader = new THREE.FontLoader();

loader.load("fonts/your_font.json", function(font) {

    var textGeo = new THREE.TextGeometry("This is a 3D text", {

        font: font,

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

        bevelThickness: 1,
        bevelSize: 1,
        bevelEnabled: true

     });

    var textMat = new THREE.MeshLambertMaterial({color: 0xFF00FF});

    var textMesh = new THREE.Mesh(textGeo, textMat);

    scene.add(textMesh);

});

edited Sep 16, 2016 at 8:05

answered Sep 15, 2016 at 17:45

guardabrazo

1,2391 gold badge13 silver badges26 bronze badges

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

5 Comments

McMatt Over a year ago

I get this error after doing all of this: 'FrontPageNeue.typeface.json:1 Uncaught SyntaxError: Unexpected token :' Here is my font file: 1001freefonts.com/front_page_neue.font I downloaded this and converted the .otf file to json. Is this wrong? should I do a different file?

McMatt Over a year ago

Lots of errors. Scene loads now though! here they are: three.js:24569 XMLHttpRequest cannot load file:Html/fonts/FrontPageNeue.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource. Then this: TextGeometry.js:1 Uncaught SyntaxError: Unexpected token import Then this: FrontPageNeue.json:1 Uncaught SyntaxError: Unexpected token : TextGeometry.js:1 Uncaught SyntaxError: Unexpected token import

guardabrazo Over a year ago

Take a look at this question for the Cross origin request error.

Darren Cook Over a year ago

I tried your example, adding it to the HTML shown at the end of threejs.org/docs/#Manual/Introduction/Creating_a_scene, and using r81, but I see nothing. I tried both with my own font, and then this font: github.com/mrdoob/three.js/blob/master/examples/fonts/… I see no errors, and I added a console.log so I know the font is loading. Perhaps you could expand your example to make it fully reproducible?

Darren Cook Over a year ago

Just to update: I got it working - your size:50,height:10 was much bigger than the rest of my scene. I think my camera was inside it, or something like that. I also needed to add a light! Both the font in the github repository, and my own font, work.

Collectives™ on Stack Overflow

use TextGeometry.js in Three.js

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related