CODEWITHSUNDEEP
javascriptthree.js
Merida
Merida

Reputation: 378

How to add TextGeometry in three.js?

How do i add text in three.js? I've tried this code but it produces an error of Uncaught TypeError: Cannot read property 'offsetX' of undefined. How can I fix this?

Here is my .json file.

var loader = new THREE.FontLoader();
loader.load( 'https://thefortcity.dev/build/fonts/FontAwesome_Regular.json', 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: 2

Views: 2395

Answers (1)

Andrei Roba
Andrei Roba

Reputation: 2322

The problem is you are using Font Awesome. If you take a close look at your font definition file, you won't find definitions for any of the letters in "text" which is what you want to display. If you try something else, like :

/** 
   below boxes stand for: 
   - fa-volume-up []
   - fa-font []
   - fa-italic []
   - fa-align-right []
*/
var textGeometry = new THREE.TextGeometry( "   ", {

then it should work. You can copy the above symbols from the cheatsheet and paste them into your code to check if it works.

As an example you can try out this plunkr.

Upvotes: 1

Related Questions