Use Text3D with already loaded font

[wbobeirne]

Describe the feature you'd like:

I've already loaded a font using FontLoader, and I'd like to re-use it rather than fetching it again. However, Text3D doesn't have a way to pass the already loaded font, only a string URL.

Suggested implementation:

Either a new prop on Text3D, or extend the font: string | FontData prop to be font: string | FontData | Font

Sorry if I'm incorrect about something or just not using this properly!

[drcmda]

i think the easiest/fastest would be if you add it https://github.com/pmndrs/drei/blob/master/src/core/Text3D.tsx

[FarazzShaikh]

Text3D already supports FontData input. FontLoader.load results in a FontData object right? I’m not sure where your Font type comes from

[mz8i]

@FarazzShaikh The problem with the current interface is that it doesn't fit well with the interface of useFont.
In fact, the current docs show an example that will actually error:

const font = useFont('/fonts/helvetiker_regular.typeface.json')
return <Text3D font={font} />

To summarise why:

• FontData is the interface for the font JSON file structure. FontLoader.load(url: string) returns an object that should conform to FontData
• FontLoader.parse(fontData: FontData) is really just return new Font(fontData) under the hood, and it returns an instance of class Font, where the data property is of type FontData
• useFont() also returns an instance of Font
• Text3D accepts FontData | string for the font attribute

@wbobeirne probably tried to follow the example, which didn't work, hence the suggestion.

As a workaround, you could do:

const font = useFont('/fonts/helvetiker_regular.typeface.json')
const fontData = font.data
return <Text3D font={fontData} />

But I would agree that it should be possible to pass a Font loaded elsewhere to Text3D.
I am currently about to submit a PR for #2094 - I will fix the current useFont documentation there, but can later submit another PR to fix the issue presented here.