text-3d-geometry.mdx

order	category	name	sourcePath	type	componentSignature
2.5	@threlte/extras	<Text3DGeometry>	packages/extras/src/lib/components/Text3DGeometry/Text3DGeometry.svelte	component	props name type required description font Font | string true Either a loaded font or a path to a font file. name type required description text string true The text to display. name type required default size number false 100 name type required default height number false 50 name type required default curveSegments number false 12 name type required default bevelEnabled boolean false false name type required default bevelThickness number false 10 name type required default bevelSize number false 8 name type required default bevelOffset number false 0 name type required default bevelSegments number false 3 name type required default description smooth number false 0 Smooth all edges where the angle between faces is less than value name type required default depth number false 1 name type required extrudePath Curve<Vector3> false name type required default steps number false 1 name type required UVGenerator UVGenerator false

Render 3D text as a geometry using threejs's TextGeometry.

Examples

Basic Example

<script lang="ts">
  import { T } from '@threlte/core'
  import { Text3DGeometry } from '@threlte/extras'
</script>

<T.Mesh>
  <Text3DGeometry text={'Hello World'} />
  <T.MeshStandardMaterial />
</T.Mesh>

Using a Custom Font

If no font property is provided, the default font "Helvetiker" will be used and loaded from the CDN JSDeliver.

If you want to use a custom font, you can generate a font using typeface.js. Provide the path to the resulting JSON file using the prop font.

Suspense-Ready

The component <Text3DGeometry> is suspense-ready. Using it in a <Suspense> boundary will suspend rendering until the provided font is loaded:

<script lang="ts">
  import { T } from '@threlte/core'
  import { Text3DGeometry, Suspense } from '@threlte/extras'
  import Fallback from './Fallback.svelte'
</script>

<Suspense>
  <T.Mesh>
    <Text3DGeometry
      font={'path-to-your-font'}
      text={'Hello World'}
    />
    <T.MeshStandardMaterial />
  </T.Mesh>

  <Fallback slot="fallback" />
</Suspense>

Loading a Font Yourself

You can also load the font yourself and pass it to the component, like so:

<script lang="ts">
  import { T, useLoader } from '@threlte/core'
  import { Text3DGeometry } from '@threlte/extras'
  import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js'

  let font = useLoader(FontLoader).load('path-to-your-font')
</script>

{#if $font}
  <T.Mesh>
    <Text3DGeometry
      font={$font}
      text={'Hello World'}
    />
    <T.MeshStandardMaterial />
  </T.Mesh>
{/await}

Centering Text

You can center a text by using the <Align> component and calling the align slot prop when the text geometry is created.

<Align let:align>
  <T.Mesh>
    <Text3DGeometry
      font={'path-to-your-font'}
      text={`Hello!`}
      on:create={align}
    />
    <T.MeshStandardMaterial />
  </T.Mesh>
</Align>

Smoothing Text

You can smooth the text by setting the smooth prop to a value above 0 to smooth all edges where the angle between faces is less than the smooth value.