@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 { Pane, Slider, Text } from 'svelte-tweakpane-ui'
let text = $state('hello world')
let fontSize = $state(1)
</script>
<Pane
title="Text"
position="fixed"
>
<Text bind:value={text} />
<Slider
bind:value={fontSize}
min={0.1}
max={2}
/>
</Pane>
<div>
<Canvas>
<Scene
{text}
{fontSize}
/>
</Canvas>
</div>
<style>
div {
height: 100%;
background-color: rgb(254 61 0 / 0.2);
}
</style><script lang="ts">
import { T, useTask } from '@threlte/core'
import { Grid, Text } from '@threlte/extras'
interface Props {
text: string
fontSize: number
}
let { text, fontSize }: Props = $props()
let rotation = $state(0)
useTask((delta) => {
const f = 1 / 60 / delta // ~1 at 60fps
rotation += 0.0005 * f
})
</script>
<T.Group rotation.y={rotation}>
<T.OrthographicCamera
zoom={80}
position={[0, 5, 10]}
makeDefault
oncreate={(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"
/>
{#snippet fallback()}
<!-- show fallback content while font data is loading -->
{/snippet}
</Suspense>