Skip to content

Commit

Permalink
fix: Revert "feat: Use TTFLoader in useFont for non-JSON files (#…
Browse files Browse the repository at this point in the history
…2095)"

This reverts commit 61d3bc5.
  • Loading branch information
abernier committed Nov 19, 2024
1 parent 396156c commit f8e5653
Show file tree
Hide file tree
Showing 6 changed files with 15 additions and 53 deletions.
Binary file removed .storybook/public/fonts/lemon-round.ttf
Binary file not shown.
14 changes: 2 additions & 12 deletions .storybook/stories/Text3D.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,6 @@ export default {
</Setup>
),
],
args: {
bevelEnabled: true,
bevelSize: 0.05,
},
} satisfies Meta<typeof Text3D>

type Story = StoryObj<typeof Text3D>
Expand All @@ -40,15 +36,9 @@ 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 Text3DTtfSt = {
args: {
font: '/fonts/lemon-round.ttf',
},
render: (args) => <Text3DScene {...args} />,
name: 'TTF',
} satisfies Story
2 changes: 0 additions & 2 deletions docs/abstractions/text3d.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,6 @@ 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), in which case the conversion to the JSON format will be done automatically at load time.

```jsx
<Text3D font={fontUrl} {...textOptions}>
Hello world!
Expand Down
12 changes: 2 additions & 10 deletions docs/loaders/use-font.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,15 @@ 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.data} />
return <Text3D font={font} />
```

In order to preload you do this:

```jsx
useFont.preload('/fonts/helvetiker_regular.typeface.json')
```

If the response from the URL is not a JSON, `THREE.TTFLoader` is used to try parsing the response as a standard font file.
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')
return <Text3D font={font.data} />
```
7 changes: 4 additions & 3 deletions src/core/Text3D.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@ import * as React from 'react'
import * as THREE from 'three'
import { extend, MeshProps, Node } from '@react-three/fiber'
import { useMemo } from 'react'
import { mergeVertices, TextGeometry, TextGeometryParameters } from 'three-stdlib'
import { useFont } from './useFont'
import { suspend } from 'suspend-react'
import { mergeVertices, TextGeometry, TextGeometryParameters, FontLoader } from 'three-stdlib'
import { useFont, FontData } from './useFont'
import { ForwardRefComponent } from '../helpers/ts-utils'

declare global {
Expand All @@ -15,7 +16,7 @@ declare global {
}

type Text3DProps = {
font: Parameters<typeof useFont>[0]
font: FontData | string
bevelSegments?: number
smooth?: number
} & Omit<TextGeometryParameters, 'font'> &
Expand Down
33 changes: 7 additions & 26 deletions src/core/useFont.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { FontLoader, TTFLoader } from 'three-stdlib'
import { FontLoader } from 'three-stdlib'
import { suspend, preload, clear } from 'suspend-react'

export type Glyph = {
Expand All @@ -22,7 +22,10 @@ export type FontData = {
type FontInput = string | FontData

let fontLoader: FontLoader | null = null
let ttfLoader: TTFLoader | null = null

async function loadFontData(font: FontInput): Promise<FontData> {
return typeof font === 'string' ? await (await fetch(font)).json() : font
}

function parseFontData(fontData: FontData) {
if (!fontLoader) {
Expand All @@ -31,31 +34,9 @@ function parseFontData(fontData: FontData) {
return fontLoader.parse(fontData)
}

function parseTtfArrayBuffer(ttfData: ArrayBuffer) {
if (!ttfLoader) {
ttfLoader = new TTFLoader()
}
return ttfLoader.parse(ttfData) as FontData
}

async function loadFontData(font: FontInput) {
if (typeof font === 'string') {
const res = await fetch(font)

if (res.headers.get('Content-Type')?.includes('application/json')) {
return (await res.json()) as FontData
} else {
const arrayBuffer = await res.arrayBuffer()
return parseTtfArrayBuffer(arrayBuffer)
}
} else {
return font
}
}

async function loader(font: FontInput) {
const fontData = await loadFontData(font)
return parseFontData(fontData)
const data = await loadFontData(font)
return parseFontData(data)
}

export function useFont(font: FontInput) {
Expand Down

0 comments on commit f8e5653

Please sign in to comment.