Muitas vezes, você pode precisar usar texto em sua aplicação three.js - aqui estão algumas maneiras de fazer isso.
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;
}
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.
Use este método se deseja desenhar texto facilmente em um plano na sua cena three.js.
Use este método se preferir trabalhar com seus aplicativos 3D e importar os modelos para o three.js.
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.
[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]
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:
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: