How to preload fonts for Text component?

[dulre159]

Hi i would like to know how to preload fonts for the Text component.
I would like to present the user with a loading screen like with the Suspense component.
It would be perfect to be able to use Suspense and useLoader for this...
How should i achieve this?
There is not much documentation about the Text component or i am missing something?

Thanks :)

[dulre159]

Ok i think i have partialy solved the problem by creating my own loader that uses the preloadFont loader from troika-three-text.
Here is the loader class:

import {Loader} from "three";
import { preloadFont } from "troika-three-text";

export default class FontLoader extends Loader {

    constructor( manager ) {

        super( manager );

    }

    load( url, onLoad, onProgress, onError ) {

        const scope = this;

        preloadFont( {font: url, characters: "0123456789abcdefghijklmnopqrstuvwxyz"}, function ( payload ) {

            const font = payload.parameters.font;

            if ( onLoad ) onLoad( font );

        });

    }

}

Then we can use it with useLoader like this:

const font = "path/to/font" useLoader(TroikaFontLoader, font)

The "path/to/font" string can be used by any instance of drei's Text component.

It would be nice to have a complete loader that can return progress and errors but for that i would need some help :P

Please let me know if this approach is wrong or there are better alternatives. Thanks.

[dulre159]

Ok this is not working properly i think....

[dulre159]

Ok the problem is related to troika's sync which happens really slowly. I might need a way to keep showing the loading screen till troika has synched everything.