1

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

McMatt
  • 15
  • 2
  • 12
  • You can find some ready-made fonts here: https://github.com/mrdoob/three.js/tree/master/examples/fonts, and can see they work here: https://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 Oct 18 '16 at 09:56

1 Answers1

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

});
guardabrazo
  • 1,219
  • 1
  • 13
  • 26
  • I get this error after doing all of this: 'FrontPageNeue.typeface.json:1 Uncaught SyntaxError: Unexpected token :' Here is my font file: http://www.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 Sep 16 '16 at 01:57
  • **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 – McMatt Sep 16 '16 at 13:03
  • Take a look at [this](http://stackoverflow.com/questions/20041656/xmlhttprequest-cannot-load-file-cross-origin-requests-are-only-supported-for-ht) question for the Cross origin request error. – guardabrazo Sep 16 '16 at 13:11
  • I tried your example, adding it to the HTML shown at the end of https://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: https://github.com/mrdoob/three.js/blob/master/examples/fonts/helvetiker_bold.typeface.json 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 Oct 18 '16 at 09:52
  • 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. – Darren Cook Oct 18 '16 at 18:46