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.
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;
}
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.
Utilisez cette méthode si vous souhaitez dessiner facilement du texte sur un plan dans votre scène three.js.
Utilisez cette méthode si vous préférez travailler avec vos applications 3D et importer les modèles dans three.js.
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.
[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]
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 :
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 :