Methods for loading a font just once? (TypeScript / Three.JS)

Question

Methods for loading a font just once? (TypeScript / Three.JS)

My goal is to generate 20 text blocks, all using the same font. However, I encountered an error with the new TextGeometry if the font isn't loaded yet.

Currently, I have been creating each text block like so:

new THREE.TextGeometry(this.text, {
    font: Object(response) as THREE.Font
} as THREE.TextGeometryParameters);

within this block of code:

let fontLoader = new THREE.FontLoader();    
fontLoader.load('/fonts/my_font.json', response => {

This approach is not efficient since it requires loading the font 20 times (once for each new text block), causing delays during execution, especially when testing.

I would prefer to load the font only once and save it in a variable, but I don't know how to ensure that it's fully loaded before generating the TextGeometry.

I'm wondering if Observables could help with this issue?

Your insights and suggestions would be greatly appreciated!

typescript three.js

Answer 1

Answer №1

As an illustration, you can achieve this by following these steps:

let manager = new THREE.LoadingManager();
manager.onLoad = function() { // once all resources have loaded
  initialize();
  renderScene();
}

let fontStyle = null;
let loader = new THREE.FontLoader(manager);
loader.load('https://threejs.org/examples/fonts/droid/droid_serif_bold.typeface.json', function(response) {
  fontStyle = response;
});

In the initialize() function:

function initialize(){
    // create scene, camera, and renderer instances
    ...
    function setCustomText(text, position) { // you can pass any parameters for the text here
        textGeometry = new THREE.TextGeometry(text, {
            font: fontStyle,...
    }
}

The key concept is to load all resources first before proceeding with other tasks.

More information on THREE.LoadingManager().

See the example on jsfiddle.

Answer 2

As an illustration, you can achieve this by following these steps:

let manager = new THREE.LoadingManager();
manager.onLoad = function() { // once all resources have loaded
  initialize();
  renderScene();
}

let fontStyle = null;
let loader = new THREE.FontLoader(manager);
loader.load('https://threejs.org/examples/fonts/droid/droid_serif_bold.typeface.json', function(response) {
  fontStyle = response;
});

In the initialize() function:

function initialize(){
    // create scene, camera, and renderer instances
    ...
    function setCustomText(text, position) { // you can pass any parameters for the text here
        textGeometry = new THREE.TextGeometry(text, {
            font: fontStyle,...
    }
}

The key concept is to load all resources first before proceeding with other tasks.

More information on THREE.LoadingManager().

See the example on jsfiddle.

Methods for loading a font just once? (TypeScript / Three.JS)

Answer №1

Similar questions

Understanding how to infer literal types or strings in Typescript is essential for maximizing the

Unlock the Power of EmailJS with Vue.js 2 and TypeScript

transitioning from angular cli version 1.7 to version 12

Creating an object key using a passed literal argument in TypeScript

Include form data into an array of objects within an Angular data source

Modifying the text of a material UI button depending on a particular condition

NestJS enforces HTTPS for Swagger redirects, whereas other endpoints are allowed to work on HTTP

Implement the usage of plainToClass within the constructor function

Creating TypeScript modules for npm

What exactly does the statement if(item.some((item) => !item.available) represent in typescript?

Exploring unit tests: Customizing an NGRX selector generated by entityAdapter.getSelectors()

Upon reacting with Typescript, the window will transition to the homePage, however, it will also reset

How come my ts-mockito spy isn't delegating method calls properly?

Angular2 and Typescript paired with Visual Studio 2013

Error: The term "OrbitControls" is not recognized in the three

Can we create an alias for the import path in TypeScript?

How to Animate the Deletion of an Angular Component in Motion?

Mastering the art of debugging feathersjs with typescript on VS Code

Urgent dependency alert: calling for a necessity (sequelize) in next.js is a vital element

Encountering an issue with TypeScript after applying a wrapper to a Material-UI button - specifically, the error message states that the type '{ children: string; color: "light-green"; }' is lacking certain properties