@threlte/extras
<Text>
The <Text> component uses troika-three-text to render text.
<script lang="ts">
import { Canvas } from '@threlte/core'
import Scene from './Scene.svelte'
import { useTweakpane } from '$lib/useTweakpane'
const { action, addInput } = useTweakpane({
title: 'Text',
expanded: false
})
const text = addInput({
label: 'Text',
value: 'hello world'
})
const fontSize = addInput({
label: 'Font Size',
value: 1,
params: {
step: 0.1,
min: 0.1,
max: 2
}
})
</script>
<div use:action />
<div class="relative h-full w-full bg-orange-500/20">
<Canvas>
<Scene
text={$text}
fontSize={$fontSize}
/>
</Canvas>
</div><script lang="ts">
import { T, useFrame } from '@threlte/core'
import { Grid, Text } from '@threlte/extras'
let rotation = 0
export let text: string
export let fontSize: number
useFrame(() => {
rotation += 0.002
})
</script>
<T.Group rotation.y={rotation}>
<T.OrthographicCamera
zoom={80}
position={[0, 5, 10]}
makeDefault
on:create={({ ref }) => {
ref.lookAt(0, 0, 0)
}}
/>
</T.Group>
<Text
{text}
color="white"
{fontSize}
anchorX="50%"
anchorY="100%"
/>
<Grid sectionColor="#FF3E00" />Example
<script>
import { Text } from '@threlte/extras'
let value = ''
</script>
<input
type="text"
bind:value
/>
<Text text={value} /><Text> is suspense-ready and will suspend while the font is loading. You can use the characters prop to preload a specific set of characters to prevent FOUC.
<script>
import { Text, Suspense } from '@threlte/extras'
</script>
<Suspense>
<Text
text="HELLO WORLD"
characters="ABCDEFGHIJKLMNOPQRSTUVWXYZ"
/>
<svelte:fragment slot="fallback">
<!-- show fallback content while font data is loading -->
</svelte:fragment>
</Suspense>