Text3D

TextGeometry is een van de manieren waarmee we 3D tekst in onze scene kunnen toevoegen.

Het maakt echter geen deel uit van de kern van ThreeJS. Om het te gebruiken moet je het dus importeren vanuit de module three/addons/controls/TextGeometry.

Dit levert een probleem op omdat TresJS automatisch een catalogus van de kern van Three maakt, zodat u deze als componenten kunt gebruiken.

Gelukkig biedt TresJS een manier om de catalogus met componenten uit te breiden. U kunt dit doen door de extend methode uit de kernbibliotheek te gebruiken.

Voor meer informatie over het uitbreiden van uw TresJS-catalogus raadpleegt u de sectie extending.

TextGeometry gebruiken

Om TextGeometry te gebruiken moet je het eerst importeren via de three/addons/geometries/TextGeometry module.

import { TextGeometry } from 'three/addons/geometries/TextGeometry'

Daarna moet je de catalogus van componenten extenden middels de extend method.

import { extend } from '@tresjs/core'
import { TextGeometry } from 'three/addons/geometries/TextGeometry'

extend({ TextGeometry })

TextGeometry heeft maar één argument nodig - de font. Je vind hieronder een voorbeeld.

const fontPath = 'https://raw.githubusercontent.com/Tresjs/assets/main/fonts/FiraCodeRegular.json'

const loader = new FontLoader()

const font = await new Promise((resolve, reject) => {
  try {
    loader.load(fontPath, (font) => {
      resolve(font)
    })
  }
  catch (error) {
    reject(console.error('cientos', error))
  }
})

Vervolgens kunt u de component TresTextGeometry in een TresMesh in uw scène gebruiken

<template>
  <TresCanvas
    shadows
    alpha
  >
    <TresMesh>
      <TresTextGeometry
        :args="['TresJS', { font, ...fontOptions }]"
        center
      />
    </TresMesh>
  </TresCanvas>
</template>

dan kunt u, net als in het voorbeeld, een object doorgeven met de gewenste configuraties.

const fontOptions = {
  size: 0.5,
  height: 0.2,
  curveSegments: 5,
  bevelEnabled: true,
  bevelThickness: 0.05,
  bevelSize: 0.02,
  bevelOffset: 0,
  bevelSegments: 4,
}

We kunnen ook een matcapTexture doorgeven om de laatste details toe te voegen, met behulp van het TresMeshNormalMaterial in de TresMesh.

const matcapTexture = await useTexture(['https://raw.githubusercontent.com/Tresjs/assets/main/textures/matcaps/7.png'])

<TresMesh>
  <TresTextGeometry :args="['TresJS', { font, ...fontOptions }]" center />
  <TresMeshNormalMaterial :matcap="matcapTexture" />
</TresMesh>

De uiteindelijke code zou er dus ongeveer zo uitzien:

<script setup lang="ts">
import { extend } from '@tresjs/core'
import { TextGeometry } from 'three/addons/geometries/TextGeometry'
import { FontLoader } from 'three/addons/loaders/FontLoader'
import { useTexture } from '/@/composables'

extend({ TextGeometry })

const fontPath = 'https://raw.githubusercontent.com/Tresjs/assets/main/fonts/FiraCodeRegular.json'

const fontOptions = {
  size: 0.5,
  height: 0.2,
  curveSegments: 5,
  bevelEnabled: true,
  bevelThickness: 0.05,
  bevelSize: 0.02,
  bevelOffset: 0,
  bevelSegments: 4,
}

const loader = new FontLoader()

const font = await new Promise((resolve, reject) => {
  try {
    loader.load(fontPath, (font) => {
      resolve(font)
    })
  }
  catch (error) {
    reject(console.error('cientos', error))
  }
})

const matcapTexture = await useTexture(['https://raw.githubusercontent.com/Tresjs/assets/main/textures/matcaps/7.png'])
</script>

<template>
  <TresCanvas
    shadows
    alpha
  >
    <TresMesh>
      <TresTextGeometry
        :args="['TresJS', { font, ...fontOptions }]"
        center
      />
      <TresMeshNormalMaterial :matcap="matcapTexture" />
    </TresMesh>
  </TresCanvas>
</template>

We weten dat dit veel werk lijkt, maar het goede nieuws is dat er een veel eenvoudigere manier is

TextGeometry van cientos

De cientos package bied een component genaamd <Text3D />, wat een wrapper van de TextGeometry is van de three-stdlib module.

Het beste gedeelte? Je hoeft de catalogus niet te extenden en je hoeft alleen de font als argument mee te geven. It just works. 💯 (Als er geen tekst is meegegeven dan zal de text TresJS zijn)

<template>
  <TresCanvas
    shadows
    alpha
  >
    <Text3D :font="fontPath" />
  </TresCanvas>
</template>

We kunnen de opties doorgeven als props

<Text3D :font="fontPath" :text="my 3d text" :size="0.8" />

als de opties niet zijn opgegeven, zijn de standaardwaarden:

size: 0.5,
height: 0.2,
curveSegments: 5,
bevelEnabled: true,
bevelThickness: 0.05,
bevelSize: 0.02,
bevelOffset: 0,
bevelSegments: 4,

Standaard begint tekst in ThreeJS op de beginpositie van de mesh, dus het is [0,0,0] en de tekst begint daar, maar we kunnen deze centreren door gewoon de flag "center" door te geven

<Text3D :font="fontPath" :text="my 3d text" center />