Spesso si ha la necessità di utilizzare del testo nella propria applicazione three.js - ecco un paio di modi per farlo.
L'uso dell'HTML è generalmente il modo più facile e veloce per aggiungere testo. Questo è il metodo usato per gli overlay descrittivi in quasi tutti gli esempi di three.js.
È possibile aggiungere contenuto ad un div:
<div id="info">Description</div>
e usare il markup CSS per posizionare l'elemento in modo assoluto, in una posizione sopra tutti gli altri elementi con la proprietà z-index, specialmente se three.js viene eseguito in modalità full screen.
#info {
position: absolute;
top: 10px;
width: 100%;
text-align: center;
z-index: 100;
display:block;
}
Questi renderer vengono utilizzati per disegnare testo di alta qualità all'interno di elementi del DOM nella scena three.js. Questo metodo è simile al punto 1 eccetto per il fatto che con questi renderer è possibile integrare più facilmente e dinamicamente gli elementi nella scena three.js.
Utilizza questo metodo se desideri disegnare testo facilmente su un piano nella scena three.js.
Utilizza questo metodo se preferisci lavorare con la tua applicazione 3D e importare i modelli in three.js.
Se preferisci lavorare solo in three.js o creare geometrie di testo 3D dinamiche e procedurali, è possibile creare una mesh che abbia come geometria un'istanza di THREE.TextGeometry:
new THREE.TextGeometry( text, parameters );
In modo tale che questo funzioni correttamente, TextGeometry necessita che un'istanza di THREE.Font venga impostata come valore del parametro "font". Per avere maggiori informazioni su come implementare questo metodo, consulta la pagina [page:TextGeometry], contenente la descrizione di ogni parametro che la classe accetta e una lista di font JSON che vengono forniti con la distribuzione di three.js.
[example:webgl_geometry_text WebGL / geometry / text]
[example:webgl_shadowmap WebGL / shadowmap]
TextGeometry utilizza i font generati da typeface.json. Se Typeface è inattivo, o si preferisce usare un font che non è presente, esiste un tutorial che mostra come con uno script python per blender è possibile esportare il testo nel formato JSON di Three.js: [link:http://www.jaanga.com/2012/03/blender-to-threejs-create-3d-text-with.html]
BMFont (font bitmap) consente di raggruppare glyphs in un unico BufferGeometry. Il rendering di BMFont supporta il word-wrapping, letter spacing, kerning, signed distance fields with standard derivatives, multi-channel signed distance fields, multi-texture fonts, ed altro ancora. Per saperne di più consulta [link:https://github.com/felixmariotto/three-mesh-ui three-mesh-ui] o [link:https://github.com/Jam3/three-bmfont-text three-bmfont-text].
I font sono disponibili in progetti come [link:https://github.com/etiennepinchon/aframe-fonts A-Frame Fonts], o puoi creare il tuo personale partendo da qualsiasi font .TTF, ottimizzazione per includere solo caratteri richiesti per il progetto.
Alcuni strumenti utili:
Il pacchetto [link:https://www.npmjs.com/package/troika-three-text troika-three-text] esegue il rendering del testo con antialias utilizzando una tecnica simile a BMFont, ma funziona direttamente con font di tipo .TTF o .WOFF in modo da non dover pregenerare una texture glyph offline. Ha anche altre funzionalità, tra cui: