# Création de texte

Il y a souvent des moments où vous pourriez avoir besoin d'utiliser du texte dans votre application three.js - voici quelques façons de le faire.

## 1. DOM + CSS

L'utilisation de HTML est généralement la manière la plus simple et la plus rapide d'ajouter du texte. C'est la méthode utilisée pour les superpositions descriptives dans la plupart des exemples three.js.

Vous pouvez ajouter du contenu à un

    <div id="info">Description</div>

et utiliser du balisage CSS pour le positionner absolument à une position au-dessus de tous les autres avec un z-index, surtout si vous exécutez three.js en plein écran.

    #info {
      position: absolute;
      top: 10px;
      width: 100%;
      text-align: center;
      z-index: 100;
      display:block;
    }

## 2. Utiliser `CSS2DRenderer` ou `CSS3DRenderer`

Utilisez ces moteurs de rendu pour dessiner du texte de haute qualité contenu dans des éléments DOM dans votre scène three.js. C'est similaire à 1., sauf qu'avec ces moteurs de rendu, les éléments peuvent être intégrés de manière plus étroite et dynamique dans la scène.

## 3. Dessiner du texte sur un canvas et l'utiliser comme `Texture`

Utilisez cette méthode si vous souhaitez dessiner facilement du texte sur un plan dans votre scène three.js.

## 4. Créer un modèle dans votre application 3D préférée et exporter vers three.js

Utilisez cette méthode si vous préférez travailler avec vos applications 3D et importer les modèles dans three.js.

## 5. Géométrie de Texte Procédurale

Si vous préférez travailler purement en THREE.js ou créer des géométries de texte 3D procédurales et dynamiques, vous pouvez créer un maillage dont la géométrie est une instance de THREE.TextGeometry :

`new THREE.TextGeometry( text, parameters );`

Pour que cela fonctionne, cependant, votre TextGeometry aura besoin d'une instance de THREE.Font à définir sur son paramètre « font ». Consultez la page `TextGeometry` pour plus d'informations sur la manière dont cela peut être fait, des descriptions de chaque paramètre accepté, et une liste des polices JSON qui sont incluses dans la distribution THREE.js elle-même.

### Exemples

[example:webgl_geometry_text WebGL / géométrie / texte]
[example:webgl_shadowmap WebGL / shadowmap]

Si Typeface est indisponible, ou si vous souhaitez utiliser une police qui ne s'y trouve pas, il existe un tutoriel avec un script python pour blender qui vous permet d'exporter du texte au format JSON de Three.js : [link:http://www.jaanga.com/2012/03/blender-to-threejs-create-3d-text-with.html]

## 6. Polices bitmap

Les BMFonts (polices bitmap) permettent de regrouper les glyphes dans une seule BufferGeometry. Le rendu BMFont prend en charge le retour à la ligne, l'espacement des lettres, le crénage, les champs de distance signés avec dérivées standard, les champs de distance signés multicanaux, les polices multi-textures, et plus encore. Voir [link:https://github.com/felixmariotto/three-mesh-ui three-mesh-ui] ou [link:https://github.com/Jam3/three-bmfont-text three-bmfont-text].

Des polices standard sont disponibles dans des projets comme [link:https://github.com/etiennepinchon/aframe-fonts A-Frame Fonts], ou vous pouvez créer les vôtres à partir de n'importe quelle police .TTF, en optimisant pour n'inclure que les caractères requis pour un projet.

Quelques outils utiles :

- [link:http://msdf-bmfont.donmccurdy.com/ msdf-bmfont-web] (basé sur le web)
- [link:https://github.com/soimy/msdf-bmfont-xml msdf-bmfont-xml] (ligne de commande)
- [link:https://github.com/libgdx/libgdx/wiki/Hiero hiero] (application de bureau)

## 7. Troika Text

Le paquet [link:https://www.npmjs.com/package/troika-three-text troika-three-text] rend du texte antialiasé de qualité en utilisant une technique similaire à celle des BMFonts, mais fonctionne directement avec n'importe quel fichier de police .TTF ou .WOFF, vous n'avez donc pas à prégénérer une texture de glyphe hors ligne. Il ajoute également des capacités, notamment :

- Effets comme les contours, les ombres portées et la courbure
- La possibilité d'appliquer n'importe quel Material three.js, même un ShaderMaterial personnalisé
- Prise en charge des ligatures de police, des scripts avec lettres jointes et de la mise en page de droite à gauche/bidirectionnelle
- Optimisation pour de grandes quantités de texte dynamique, effectuant la majeure partie du travail hors du thread principal dans un web worker