TresJSText3D ^1.1.0
<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
vue
<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:
vue
<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.