You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
143 lines
5.3 KiB
143 lines
5.3 KiB
3 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="fr">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<base href="../../../" />
|
||
|
|
<script src="page.js"></script>
|
||
|
|
<link type="text/css" rel="stylesheet" href="page.css" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>Créer un texte ([name])</h1>
|
||
|
|
<div>
|
||
|
|
<p>
|
||
|
|
Parfois vous aurez besoin d'utiliser du texte dans votre application three.js - ici
|
||
|
|
sont présentées quelques façons de le faire.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2>1. DOM + CSS</h2>
|
||
|
|
<div>
|
||
|
|
<p>
|
||
|
|
Utiliser du HTML est généralement la manière la plus simple et la plus rapide d'ajouter du texte. Ceci est la méthode
|
||
|
|
utilisée pour les overlays descriptifs de la plupart des exemples three.js.
|
||
|
|
</p>
|
||
|
|
<p>Vous pouvez ajouter du contenu à une</p>
|
||
|
|
<code><div id="info">Description</div></code>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
et utiliser CSS pour donner une position absolute située au-dessus de tout le reste du contenu grâce au
|
||
|
|
z-index plus particulièrement si vous utilisez three.js en plein-écran.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<code>
|
||
|
|
#info {
|
||
|
|
position: absolute;
|
||
|
|
top: 10px;
|
||
|
|
width: 100%;
|
||
|
|
text-align: center;
|
||
|
|
z-index: 100;
|
||
|
|
display:block;
|
||
|
|
}
|
||
|
|
</code>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h2>2. Utiliser [page:CSS2DRenderer] ou [page:CSS3DRenderer]</h2>
|
||
|
|
<div>
|
||
|
|
<p>
|
||
|
|
Utilisez ces moteurs de rendu pour dessiner des textes de haute-qualité contenus dans l'élément DOM de vos scène three.js.
|
||
|
|
Cette approche est similaire à la 1. excepté qu'avec ces moteurs de rendu les éléments peuvent être intégrés plus précisément et dynamiquement à la scène.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h2>3. Associer un texte au canvas et l'utiliser comme [page:Texture]</h2>
|
||
|
|
<div>
|
||
|
|
<p>Utilisez cette méthode si vous souhaitez dessiner du texte facilement sur un plane dans votre scène three.js.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h2>4. Créez un modèle dans votre application 3D préférée et exportez le dans three.js</h2>
|
||
|
|
<div>
|
||
|
|
<p>Utilisez cette méthode si vous préférez travailler avec vos applications 3D puis importer vos modèles dans three.js.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h2>5. Forme de texte procédurale</h2>
|
||
|
|
<div>
|
||
|
|
<p>
|
||
|
|
Si vous souhaitez travailler en three.js pur ou créer des formes de texte 3D procédurales et dynamiques,
|
||
|
|
vous pouvez créer un mesh qui aura pour geometry une instance de THREE.TextGeometry:
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<code>new THREE.TextGeometry( text, parameters );</code>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Pour que cela fonctionne, dans tous les cas, votre TextGeometry aura besoin d'une instance de THREE.Font
|
||
|
|
avec comme paramètre "font".
|
||
|
|
|
||
|
|
Voir [page:TextGeometry] pour avoir plus d'informations sur comment cela peut-être mis en place, une description de chaque
|
||
|
|
paramètre accepté, et une liste des fonts JSON qui viennent avec la distribution THREE.js.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>Exemples</h3>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
[example:webgl_geometry_text WebGL / geometry / text]<br />
|
||
|
|
[example:webgl_shadowmap WebGL / shadowmap]
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Si Typeface ne fonctionne pas, ou que vous souhaitez une font qui n'est pas ici, il y a un tutoriel
|
||
|
|
avec un script python pour blender qui vous permet d'exporter du texte dans au format JSON de Three.js:
|
||
|
|
[link:http://www.jaanga.com/2012/03/blender-to-threejs-create-3d-text-with.html]
|
||
|
|
</p>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h2>6. Fonts Bitmap</h2>
|
||
|
|
<div>
|
||
|
|
<p>
|
||
|
|
BMFonts (bitmap fonts) permet de transformer les lots de glyphs en une seule BufferGeometry. Le rendu BMFont
|
||
|
|
supporte les sauts-de-ligne, l'espacement des lettres, le crénage, les fonctions de distance signée avec
|
||
|
|
des dérivées, les fonctions de distance signée multi-channel, les fonts multi-texture, et bien plus.
|
||
|
|
Voir [link:https://github.com/felixmariotto/three-mesh-ui three-mesh-ui] ou [link:https://github.com/Jam3/three-bmfont-text three-bmfont-text].
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Les fonts de base sont disponibles dans des projets comme
|
||
|
|
[link:https://github.com/etiennepinchon/aframe-fonts A-Frame Fonts], ou vous pouvez créer la votre
|
||
|
|
depuis n'importe quelle font .TTF, en optimisant les performances en n'incluant que les character requis par le projet.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Quelques outils utiles:
|
||
|
|
</p>
|
||
|
|
<ul>
|
||
|
|
<li>[link:http://msdf-bmfont.donmccurdy.com/ msdf-bmfont-web] <i>(web-based)</i></li>
|
||
|
|
<li>[link:https://github.com/soimy/msdf-bmfont-xml msdf-bmfont-xml] <i>(ligne de commande)</i></li>
|
||
|
|
<li>[link:https://github.com/libgdx/libgdx/wiki/Hiero hiero] <i>(applciations desktop)</i></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h2>7. Troika Text</h2>
|
||
|
|
<div>
|
||
|
|
<p>
|
||
|
|
Le package [link:https://www.npmjs.com/package/troika-three-text troika-three-text] effectue un rendu
|
||
|
|
de qualité et anti-alisé des textes, utilisant une technique similaire à BMFonts, mais fonctionne directement avec n'importe quel fichier de font .TTF
|
||
|
|
ou .WOFF pour que vous n'ayez pas à pré-générer une texture glyph hors-ligne. Il ajoute également des fonctionnalités
|
||
|
|
comme:
|
||
|
|
</p>
|
||
|
|
<ul>
|
||
|
|
<li>Des effets comme les strokes, les ombres portées, et les courbures</li>
|
||
|
|
<li>La capacité d'appliquer n'importe quel matériau three.js, même un ShaderMaterial customisé</li>
|
||
|
|
<li>Le support des ligatures de fonts, des scripts pour les lettres jointes, et un layout bi-directionnel de droite-à-gauche</li>
|
||
|
|
<li>Une optimisation pour les grandes quantités de textes dynamiques, en réalisant la plupart du travail en dehors du thread principal dans un web worker</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|