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