text.mdx

order	category	name	sourcePath	type	componentSignature
2.4	@threlte/extras	<Text>	packages/extras/src/lib/components/Text/Text.svelte	component	extends props type url Mesh https://threejs.org/docs/index.html#api/en/objects/Mesh name type required text string false name type required anchorX number | 'left' | 'center' | 'right' | string false name type required anchorY number | 'top' | 'top-baseline' | 'middle' | 'bottom-baseline' | 'bottom' | string false name type required curveRadius number false name type required direction 'auto' | 'ltr' | 'rtl' false name type required font string false name type required description characters string false The set of characters `<Text>` will preload while suspended. name type required fontSize number false name type required letterSpacing number false name type required lineHeight number | string false name type required maxWidth number false name type required overflowWrap 'normal' | 'break-word' | 'normal' false name type required textAlign 'left' | 'right' | 'center' | 'justify' false name type required textIndent number false name type required whiteSpace 'normal' | 'nowrap' | 'pre-wrap' false name type required material Material | Material[] false name type required color string | number | Color false name type required depthOffset number false name type required clipRect [number, number, number, number] false name type required glyphGeometryDetail number false name type required sdfGlyphSize number false name type required outlineWidth number | string false name type required outlineColor ColorRepresentation false name type required outlineOpacity number false name type required outlineBlur number | string false name type required outlineOffsetX number | string false name type required outlineOffsetY number | string false name type required strokeWidth number | string false name type required strokeColor ColorRepresentation | Color false name type required strokeOpacity number false name type required fillOpacity number false

The <Text> component uses troika-three-text to render text.

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>