CODEWITHSUNDEEP
three.js
Prafful Mehrotra
Prafful Mehrotra

Reputation: 15

Adding text in three.js over some object

I am facing difficulty in adding text to my three.js script. I have searched a lot but wherever i find a working model, it uses a previous version of three.js and thus i am not able to use it. Also textgeometry seems to not work. I wish to add 3d text and not 2d.

Upvotes: 0

Views: 4306

Answers (1)

yomotsu
yomotsu

Reputation: 1462

You should always check three.js's official examples. There are many hints with latest three.js for you.

First, you need to load a font file with new THREE.FontLoader. The font file is supposed to be in JS file, like http://threejs.org/examples/fonts/optimer_bold.typeface.js. You can convert your font to JS with http://gero3.github.io/facetype.js/

var font;
var loader = new THREE.FontLoader();
loader.load( 'path/to/fontfile.js', function ( response ) {
    font = response;
} );

Then make a text geometry with new THREE.TextGeometry class using the font.

var textGeo = new THREE.TextGeometry( text, {
    font: font,
    size: size,
    height: height,
    curveSegments: curveSegments,
    bevelThickness: bevelThickness,
    bevelSize: bevelSize,
    bevelEnabled: bevelEnabled,
    material: 0,
    extrudeMaterial: 1
});

Then, make a mesh

new THREE.Mesh( textGeo, material );

Upvotes: 2

Related Questions