threlte logo
@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 = 'hello world'
  let fontSize = 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'

  let rotation = 0

  export let text: string
  export let fontSize: number

  useTask((delta) => {
    const f = 1 / 60 / delta // ~1 at 60fps
    rotation += 0.002 * f
  })
</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>

Component Signature

<Text> extends <T.Mesh> and supports all its props, slot props, bindings and events.

Props

name
type
required
description

anchorX
number | 'left' | 'center' | 'right' | string
no

anchorY
number | 'top' | 'top-baseline' | 'middle' | 'bottom-baseline' | 'bottom' | string
no

characters
string
no
The set of characters `<Text>` will preload while suspended.

clipRect
[number, number, number, number]
no

color
string | number | Color
no

curveRadius
number
no

depthOffset
number
no

direction
'auto' | 'ltr' | 'rtl'
no

fillOpacity
number
no

font
string
no

fontSize
number
no

glyphGeometryDetail
number
no

letterSpacing
number
no

lineHeight
number | string
no

material
Material | Material[]
no

maxWidth
number
no

outlineBlur
number | string
no

outlineColor
ColorRepresentation
no

outlineOffsetX
number | string
no

outlineOffsetY
number | string
no

outlineOpacity
number
no

outlineWidth
number | string
no

overflowWrap
'normal' | 'break-word' | 'normal'
no

sdfGlyphSize
number
no

strokeColor
ColorRepresentation | Color
no

strokeOpacity
number
no

strokeWidth
number | string
no

text
string
no

textAlign
'left' | 'right' | 'center' | 'justify'
no

textIndent
number
no

whiteSpace
'normal' | 'nowrap' | 'pre-wrap'
no