How to use single font loader multiple times

Questions
1

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 );
				geometry_text.computeBoundingBox();
				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.

2

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.

3

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

This will fine for you

4

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