# Creare testo ([name])

Spesso si ha la necessità di utilizzare del testo nella propria applicazione three.js - ecco un paio di modi per farlo.

## 1. DOM + CSS

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; }`

## 2. Usare [page:CSS2DRenderer] o [page:CSS3DRenderer]

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.

## 3. Disegnare il testo nel canvas e usarlo come [page:Texture]

Utilizza questo metodo se desideri disegnare testo facilmente su un piano nella scena three.js.

## 4. Disegnare un modello nella tua applicazione 3D preferita ed esportarlo in three.js

Utilizza questo metodo se preferisci lavorare con la tua applicazione 3D e importare i modelli in three.js.

## 5. Text Geometry Procedurale

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.

### Esempi

[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]

## 6. Font Bitmap

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:

- [link:http://msdf-bmfont.donmccurdy.com/ msdf-bmfont-web] (web-based)
- [link:https://github.com/soimy/msdf-bmfont-xml msdf-bmfont-xml] (commandline)
- [link:https://github.com/libgdx/libgdx/wiki/Hiero hiero] (desktop app)

## 7. Troika Text

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:

- Effetti come pennellate, ombreggiature e curvature
- La capacità di applicare qualsiasi materiale three.js, anche un ShaderMaterial personalizzato
- Supporto per le legature dei font, script con lettere unite e il layout da destra-a-sinistra/bidirezionale
- Ottimizzazione per grandi quantità di testo dinamico, eseguendo la maggior parte del lavoro fuori dal thread principale in un web worker