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

guardabrazo guardabrazo · Accepted Answer · 2016-09-15T17:45:30

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

});

use TextGeometry.js in Three.js

1 Answers