How To Load A Font And Render It With Textgeometry

I recently started working on three.js and now im facing issue on textgeometry. Im using three.js version 75 and i used js/helvetiker_bold.typeface.js font. var geometry = new THRE

Solution 1:

Use this pattern to load a font and render it with TextGeometry:

var loader = new THREE.FontLoader();

loader.load( 'fonts/helvetiker_bold.typeface.json', function ( font ) {

    var textGeo = new THREE.TextGeometry( "My Text", {

        font: font,

        size: 200,
        height: 50,
        curveSegments: 12,

        bevelThickness: 2,
        bevelSize: 5,
        bevelEnabled: true

    } );

    var textMaterial = new THREE.MeshPhongMaterial( { color: 0xff0000 } );

    var mesh = new THREE.Mesh( textGeo, textMaterial );
    mesh.position.set( x, y, z );

    scene.add( mesh );

} );

three.js r.82

Solution 2:

You don't need to use FontLoader, just load json as:

const fontJson = require( "./fonts/gentilis_bold.typeface.json" );

const font = newTHREE.Font( fontJson );