Texte 3D

TextGeometry est l'un des moyens par lesquels nous pouvons ajouter du texte 3D à notre scène.

Cependant, cela ne fait pas partie du cœur de ThreeJS. Par conséquent, pour l'utiliser, vous devrez l'importer depuis le module three/addons/controls/TextGeometry.

Cela crée un problème car TresJS crée automatiquement un catalogue des trois cœurs afin que vous puissiez les utiliser comme composants.

Heureusement, TresJS offre un moyen d'étendre le catalogue de composants. Vous pouvez le faire en utilisant la méthode extend de la bibliothèque principale.

Pour plus d'informations sur la façon d'étendre votre catalogue TresJS, consultez la section extending.

Avec TextGeometry

Pour utiliser TextGeometry, vous devez d'abord importer three/addons/geometries/TextGeometry.

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

Ensuite, vous devez étendre le catalogue de composants à l'aide de la méthode extend.

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

extend({ TextGeometry })

TextGeometry n'a besoin que d'un seul argument obligatoire, la source. Vous pouvez voir un exemple ci-dessous.

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

Vous pouvez maintenant utiliser le composant TresTextGeometry dans un TresMesh dans votre scène.

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

puis, comme dans l'exemple, vous pouvez passer un objet avec les paramètres souhaités.

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

Nous pouvons également transmettre un matcapTexture pour ajouter les derniers détails, en utilisant TresMeshNormalMaterial dans 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>

Le code final ressemblerait donc à ceci :

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

Je sais que cela semble demander beaucoup de travail, mais j'ai une bonne nouvelle, il existe un moyen beaucoup plus simple.

TextGeometry de cientos

Le package cientos fournit un composant appelé <Text3D /> qui est un wrapper pour TextGeometry du module three-stdlib.

Le meilleur? Vous n'avez pas besoin d'étendre le catalogue, transmettez simplement l'argument source. Cela fonctionne tout simplement. 💯 (si aucun texte n'est fourni, le texte sera TresJS)

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

Nous pouvons passer les options comme une propriété:

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

Dans le cas où les options ne sont pas fournies, les valeurs par défaut sont :

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

Par défaut, le texte dans ThreeJS commence à la position de départ du maillage, donc s'il vaut [0,0,0], le texte commencera là, mais nous pouvons le centrer en passant simplement la props "center".

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