# Criando texto

Muitas vezes, você pode precisar usar texto em sua aplicação three.js - aqui estão algumas maneiras de fazer isso.

## 1. DOM + CSS

Usar HTML geralmente é a maneira mais fácil e rápida de adicionar texto. Este é o método usado para sobreposições descritivas na maioria dos exemplos three.js.

Você pode adicionar conteúdo para uma

`<div id="info">Description</div>`

e usar marcação CSS para posicionar absolutamente em uma posição acima de todas as outras com um z-index, especialmente se você estiver executando o three.js em tela cheia.

`#info { position: absolute; top: 10px; width: 100%; text-align: center; z-index: 100; display:block; }`

## 2. Usar [page:CSS2DRenderer] ou [page:CSS3DRenderer]

Use esses renderizadores para desenhar texto de alta qualidade contido em elementos DOM para sua cena three.js. Isso é semelhante ao item 1. exceto que esses elementos de renderização podem ser integrados mais firmemente e dinamicamente na cena.

## 3. Desenhe texto na tela e use como [page:Texture]

Use este método se deseja desenhar texto facilmente em um plano na sua cena three.js.

## 4. Crie um modelo em seu aplicativo 3D favorito e exporte para three.js

Use este método se preferir trabalhar com seus aplicativos 3D e importar os modelos para o three.js.

## 5. Geometria de Texto Procedural

Se você preferir trabalhar puramente em THREE.js ou criar geometrias de texto 3D procedurais e dinâmicas, você pode criar um mesh cuja geometria é uma instância de THREE.TextGeometry:

`new THREE.TextGeometry( text, parameters );`

Para que isso funcione, no entanto, seu TextGeometry precisará de uma instância de THREE.Font para ser definido em seu parâmetro "fonte". Veja a página [page:TextGeometry] para mais informações sobre como isso pode ser feito, descrição de cada um dos parâmetros aceitos e uma lista das fontes JSON que vêm com a própria distribuição THREE.js.

### Exemplos

[example:webgl_geometry_text WebGL / geometry / text]
[example:webgl_shadowmap WebGL / shadowmap]

Se o Typeface estiver desativado ou você quiser usar uma fonte que não está lá, há um tutorial com um script python para blender que permite exportar texto para o formato JSON do Three.js: [link:http://www.jaanga.com/2012/03/blender-to-threejs-create-3d-text-with.html]

## 6. Fontes Bitmap

BMFonts (fontes Bitmap) permitem agrupar glifos em um único BufferGeometry. A renderização do BMFont suporta quebra de palavras, espaçamento entre letras, kerning, campos de distância assinados com padrão derivados, campos de distância com sinal multicanal, fontes com várias texturas e muito mais. Veja [link:https://github.com/felixmariotto/three-mesh-ui three-mesh-ui] ou [link:https://github.com/Jam3/three-bmfont-text three-bmfont-text].

As Stock Fonts estão disponíveis em projetos como [link:https://github.com/etiennepinchon/aframe-fonts A-Frame Fonts], ou você pode criar o seu próprio de qualquer fonte .TTF, otimizando para incluir apenas os caracteres necessários para um projeto.

Algumas ferramentas úteis:

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

## 7. Troika Text

O pacote [link:https://www.npmjs.com/package/troika-three-text troika-three-text] renderiza texto com suavização de qualidade usando uma técnica semelhante ao BMFonts, mas funciona diretamente com qualquer arquivo de fonte .TTF ou .WOFF, para que você não precise pré-gerar uma textura de glifo offline. Também adiciona capacidades incluindo:

- Efeitos como traços, sombras e curvatura
- A capacidade de aplicar qualquer material three.js, até mesmo um ShaderMaterial personalizado
- Suporte para ligaduras de fonte, scripts com letras unidas e layout da direita para a esquerda/bidirecional
- Otimização para grandes quantidades de texto dinâmico, realizando a maior parte do trabalho fora da thread principal em um web worker