Tresjs/docs/cientos/abstractions/text-3d.md

Text3D

<Text3D /> is a component that renders a 3D text. 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

<template>
  <TresCanvas>
    <TresScene>
      <Text3D text="TresJS" font="/fonts/FiraCodeRegular.json">
        <TresMeshNormalMaterial />
      </Text3D>
    </TresScene>
  </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:

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

Props [1]

Prop	Description	Default
font	The font data or font name to use for the text.
text	The text to display.
size	The size of the text.	0.5
height	The height of the text.	0.2
curveSegments	The number of curve segments to use when generating the text geometry.	5
bevelEnabled	A flag indicating whether beveling should be enabled for the text.	true
bevelThickness	The thickness of the beveled edge on the text.	0.05
bevelSize	The size of the beveled edge on the text.	0.02
bevelOffset	The offset of the beveled edge on the text.	0
bevelSegments	The number of bevel segments to use when generating the text geometry.	4

References

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