Skip to content

Text3D

<Text3D /> is a component that renders text in 3D. It is a wrapper around the TextGeometry class.

Usage

To use the <Text3D /> component you need to pass the font prop with the URL of the font JSON file you want to use. TextGeometry uses typeface.json generated fonts, you can generate yours here

vue
<template>
  <TresCanvas>
    <Suspense>
      <Text3D
        text="TresJS"
        font="/fonts/FiraCodeRegular.json"
      >
        <TresMeshNormalMaterial />
      </Text3D>
    </Suspense>
  </TresCanvas>
</template>

Notice that you need to pass the <TresMeshNormalMaterial /> component as a child of the <Text3D /> component. This is because <Text3D /> is a Mesh component, so it needs a material. The geometry is created automatically. Also you can pass the text as a slot or as a prop like this:

vue
<template>
  <TresCanvas>
    <Suspense>
      <Text3D font="/fonts/FiraCodeRegular.json">
        TresJS
        <TresMeshNormalMaterial />
      </Text3D>
    </Suspense>
  </TresCanvas>
</template>

In addition, you can use the power of Vue to add reactivity, but you need to apply the needUpdates prop, for example you can create a reactive value, apply a v-model and make the bound, the Text3D component will update

vue
<template>
  <input v-model="myReactiveText" />
  <TresCanvas>
    <Suspense>
      <Text3D
        :text="myReactiveText"
        font="/fonts/FiraCodeRegular.json"
        center
        need-updates
      />
    </Suspense>
  </TresCanvas>
</template>

Props

PropDescriptionDefault
fontThe font data or font name to use for the text.
textThe text to display.
sizeThe size of the text.0.5
heightThe height of the text.0.2
curveSegmentsThe number of curve segments to use when generating the text geometry.5
bevelEnabledA flag indicating whether beveling should be enabled for the text.true
bevelThicknessThe thickness of the beveled edge on the text.0.05
bevelSizeThe size of the beveled edge on the text.0.02
bevelOffsetThe offset of the beveled edge on the text.0
bevelSegmentsThe number of bevel segments to use when generating the text geometry.4
centerTo center the textfalse
needUpdatesThis props add reactivityfalse

References

[1] This table was generated by ChatGPT based on the Vue component props.