How to use single font loader multiple times

i have array of text, i want to display multiple text in scene. For this i am loading the font again and again for each value in array.

                        for(let i=0 ;i<texts.length-1;i++){
                             loader.load( '/js/fonts/helvetiker_regular.typeface.json', function ( font ) {

				shape_text = font.generateShapes( texts[i], 8 );
				geometry_text = new THREE.ShapeBufferGeometry( shape_text );
				xMid = - 0.5 * ( geometry_text.boundingBox.max.x - geometry_text.boundingBox.min.x );
				geometry_text.translate( xMid, 0, 0 );
				text.push( new THREE.Mesh( geometry_text, mat));
				scene.add( text[text.length-1] );

It is bit slower to load font each time. I tried to save font to some variable but returns undefined. Is there any better way to do this.

Sounds like an error in your code. Can you please demonstrate how this happened?

Indeed, the idea is to load a font only once and then reuse it.

let loader = new THREE.FontLoader()
let font = loader.parse(json file)
let text = new THREE.TextGeometry(“hello”,{font: font})

This will fine for you

Could it be that when you tried to assign the font to a var and then used the var, the asynchrounous loader did not finish yet?

1 Like