Text laden

TextGeometry ist eine der Möglichkeiten, wie wir 3D-Text zu unserer Szene hinzufügen können.

Allerdings ist es kein Teil des Kerns von Three.js. Daher müsstest du es aus dem Modul three/addons/geometries/TextGeometry importieren.

TresJS erstellt automatisch einen Katalog aus dem Core von Three, damit du sie als Komponenten nutzen kannst. Allerdings ist standardmäßig TextGeometry nicht Teil dieses Katalogs.

Glücklicherweise bietet TresJS eine Möglichkeit, den Komponentenkatalog mit der extend-Methode zu erweitern.

Für weitere Informationen darüber, wie du deinen TresJS-Katalog erweitern kannst, siehe den Abschnitt Erweitern.

Verwendung von TextGeometry

Um TextGeometry zu verwenden, musst du es aus dem Modul three/addons/geometries/TextGeometry importieren.

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

Danach musst du den Komponentenkatalog mit der extend-Methode erweitern.

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

extend({ TextGeometry })

TextGeometry benötigt nur die Schriftart als Argument. Unten siehst du ein Beispiel.

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))
  }
})

Jetzt kannst du die Komponente TresTextGeometry innerhalb eines TresMesh in deiner Szene verwenden.

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

Dann kannst du, wie im Beispiel, ein Objekt mit den gewünschten Einstellungen übergeben.

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

Wir können auch eine matcapTexture übergeben, um feine Details hinzuzufügen, indem wir TresMeshNormalMaterial innerhalb von TresMesh verwenden.

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>

Also würde der finale Code so aussehen:

<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>

Das scheint viel Arbeit zu sein, aber es gibt eine einfachere Alternative.

TextGeometry von cientos

Das Paket cientos bietet eine Komponente namens <Text3D />, die ein Wrapper für TextGeometry aus dem Modul three-stdlib ist.

Das Beste daran? Du musst den Katalog nicht erweitern, gib einfach das Schriftargument an.

Es funktioniert einfach. 💯 (wenn kein Text angegeben wird, wird der Text TresJS sein)

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

Wir können die Optionen als Props übergeben

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

falls die Optionen nicht bereitgestellt werden, sind die Standardwerte:

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

Der Text in Three.js beginnt standardmäßig an der Ausgangsposition des Meshs, also bei [0,0,0]. Um den Text zu zentrieren, können wir einfach das Flag "center" übergeben.

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