<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
Section titled “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>