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 THREE.TextGeometry( this.txt, {   size: this.textSize,   height: this.textHeight,   curveSegments: 3,   font: this.textFont,   weight: "bold",   style: "normal",   bevelEnabled: false }); 

test is not rendering because of the following issue

1 Uncaught ReferenceError: _typeface_js is not defined

2.three.min.js:889 THREE.TextGeometry: font parameter is not an instance of THREE.Font

Can anyone please help me out.

回答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

回答2:

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

const fontJson = require( "./fonts/gentilis_bold.typeface.json" );  const font = new THREE.Font( fontJson ); 

文章来源: How to load a font and render it with TextGeometry