Allow using TTFLoader in useFont

.storybook/stories/Text3D.stories.tsx

@@ -16,6 +16,10 @@ export default {
       </Setup>
     ),
   ],
+  args: {
+    bevelEnabled: true,
+    bevelSize: 0.05,
+  },
 } satisfies Meta<typeof Text3D>
 
 type Story = StoryObj<typeof Text3D>
@@ -36,9 +40,24 @@ function Text3DScene(props: React.ComponentProps<typeof Text3D>) {
 export const Text3DSt = {
   args: {
     font: '/fonts/helvetiker_regular.typeface.json',
-    bevelEnabled: true,
-    bevelSize: 0.05,
   },
   render: (args) => <Text3DScene {...args} />,
   name: 'Default',
 } satisfies Story
+
+export const Text3DCustomExtSt = {
+  args: {
+    font: '/fonts/helvetiker_regular.jsonfont',
+  },
+  render: (args) => <Text3DScene {...args} />,
+  name: 'Custom Extension (JSON)',
+} satisfies Story
+
+export const Text3DTtfSt = {
+  args: {
+    font: '/fonts/lemon-round.ttf',
+    ttfLoader: true,
+  },
+  render: (args) => <Text3DScene {...args} />,
+  name: 'TTF',
+} satisfies Story

docs/abstractions/text3d.mdx

@@ -15,6 +15,8 @@ Render 3D text using ThreeJS's `TextGeometry`.
 
 Text3D will suspend while loading the font data. Text3D requires fonts in JSON format generated through [typeface.json](http://gero3.github.io/facetype.js), either as a path to a JSON file or a JSON object. If you face display issues try checking "Reverse font direction" in the typeface tool.
 
+Alternatively, the path can point to a font file of a type supported by [opentype.js](https://github.com/opentypejs/opentype.js) (for example OTF or TTF). Then, after setting `ttfLoader={true}`, the conversion to the JSON format will be done automatically at load time.
+
 ```jsx
 <Text3D font={fontUrl} {...textOptions}>
   Hello world!

docs/loaders/use-font.mdx

@@ -3,15 +3,23 @@ title: useFont
 sourcecode: src/core/useFont.tsx
 ---
 
-Uses THREE.FontLoader to load a font and returns a `THREE.Font` object. It also accepts a JSON object as a parameter. You can use this to preload or share a font across multiple components.
+Uses `THREE.FontLoader` to load a font and returns a `THREE.Font` object. It also accepts a JSON object as a parameter. You can use this to preload or share a font across multiple components.
 
 ```jsx
 const font = useFont('/fonts/helvetiker_regular.typeface.json')
-return <Text3D font={font} />
+return <Text3D font={font.data} />
 ```
 
 In order to preload you do this:
 
 ```jsx
 useFont.preload('/fonts/helvetiker_regular.typeface.json')
 ```
+
+If the second argument, `ttfLoader`, is set to `true`, `THREE.TTFLoader` is used to try parsing the response as a font file in a standard format (TTF, OTF etc).
+However, keep in mind that the on-the-fly conversion to the JSON format will impact the loading time.
+
+```jsx
+const font = useFont('/fonts/helvetiker_regular.ttf', true)
+return <Text3D font={font.data} />
+```

src/core/Text3D.tsx

@@ -2,9 +2,8 @@ import * as React from 'react'
 import * as THREE from 'three'
 import { extend, MeshProps, Node } from '@react-three/fiber'
 import { useMemo } from 'react'
-import { suspend } from 'suspend-react'
-import { mergeVertices, TextGeometry, TextGeometryParameters, FontLoader } from 'three-stdlib'
-import { useFont, FontData } from './useFont'
+import { mergeVertices, TextGeometry, TextGeometryParameters } from 'three-stdlib'
+import { useFont } from './useFont'
 import { ForwardRefComponent } from '../helpers/ts-utils'
 
 declare global {
@@ -15,8 +14,11 @@ declare global {
   }
 }
 
+type UseFontParams = Parameters<typeof useFont>
+
 type Text3DProps = {
-  font: FontData | string
+  font: UseFontParams[0]
+  ttfLoader?: UseFontParams[1]
   bevelSegments?: number
   smooth?: number
 } & Omit<TextGeometryParameters, 'font'> &
@@ -43,6 +45,7 @@ export const Text3D: ForwardRefComponent<
   (
     {
       font: _font,
+      ttfLoader = false,
       letterSpacing = 0,
       lineHeight = 1,
       size = 1,
@@ -62,7 +65,7 @@ export const Text3D: ForwardRefComponent<
     React.useMemo(() => extend({ RenamedTextGeometry: TextGeometry }), [])
 
     const ref = React.useRef<THREE.Mesh>(null!)
-    const font = useFont(_font)
+    const font = useFont(_font, ttfLoader)
 
     const opts = useMemo(() => {
       return {

src/core/useFont.tsx

@@ -1,4 +1,4 @@
-import { FontLoader } from 'three-stdlib'
+import { FontLoader, TTFLoader } from 'three-stdlib'
 import { suspend, preload, clear } from 'suspend-react'
 
 export type Glyph = {
@@ -22,10 +22,7 @@ export type FontData = {
 type FontInput = string | FontData
 
 let fontLoader: FontLoader | null = null
-
-async function loadFontData(font: FontInput): Promise<FontData> {
-  return typeof font === 'string' ? await (await fetch(font)).json() : font
-}
+let ttfLoader: TTFLoader | null = null
 
 function parseFontData(fontData: FontData) {
   if (!fontLoader) {
@@ -34,14 +31,36 @@ function parseFontData(fontData: FontData) {
   return fontLoader.parse(fontData)
 }
 
-async function loader(font: FontInput) {
-  const data = await loadFontData(font)
-  return parseFontData(data)
+function parseTtfArrayBuffer(ttfData: ArrayBuffer) {
+  if (!ttfLoader) {
+    ttfLoader = new TTFLoader()
+  }
+  return ttfLoader.parse(ttfData) as FontData
+}
+
+async function loadFontData(font: FontInput, ttfLoader: boolean) {
+  if (typeof font === 'string') {
+    const res = await fetch(font)
+
+    if (ttfLoader) {
+      const arrayBuffer = await res.arrayBuffer()
+      return parseTtfArrayBuffer(arrayBuffer)
+    } else {
+      return (await res.json()) as FontData
+    }
+  } else {
+    return font
+  }
+}
+
+async function loader(font: FontInput, ttfLoader: boolean) {
+  const fontData = await loadFontData(font, ttfLoader)
+  return parseFontData(fontData)
 }
 
-export function useFont(font: FontInput) {
-  return suspend(loader, [font])
+export function useFont(font: FontInput, ttfLoader: boolean = false) {
+  return suspend(loader, [font, ttfLoader])
 }
 
-useFont.preload = (font: FontInput) => preload(loader, [font])
-useFont.clear = (font: FontInput) => clear([font])
+useFont.preload = (font: FontInput, ttfLoader: boolean = false) => preload(loader, [font, ttfLoader])
+useFont.clear = (font: FontInput, ttfLoader: boolean = false) => clear([font, ttfLoader])