You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
145 lines
5.0 KiB
145 lines
5.0 KiB
2 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="pt-br">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<base href="../../../" />
|
||
|
|
<script src="page.js"></script>
|
||
|
|
<link type="text/css" rel="stylesheet" href="page.css" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>Criando texto</h1>
|
||
|
|
<div>
|
||
|
|
<p>
|
||
|
|
Muitas vezes, você pode precisar usar texto em sua aplicação three.js - aqui estão algumas maneiras de fazer isso.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2>1. DOM + CSS</h2>
|
||
|
|
<div>
|
||
|
|
<p>
|
||
|
|
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.
|
||
|
|
</p>
|
||
|
|
<p>Você pode adicionar conteúdo para uma</p>
|
||
|
|
<code><div id="info">Description</div></code>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
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.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<code>
|
||
|
|
#info {
|
||
|
|
position: absolute;
|
||
|
|
top: 10px;
|
||
|
|
width: 100%;
|
||
|
|
text-align: center;
|
||
|
|
z-index: 100;
|
||
|
|
display:block;
|
||
|
|
}
|
||
|
|
</code>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h2>2. Usar [page:CSS2DRenderer] ou [page:CSS3DRenderer]</h2>
|
||
|
|
<div>
|
||
|
|
<p>
|
||
|
|
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.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h2>3. Desenhe texto na tela e use como [page:Texture]</h2>
|
||
|
|
<div>
|
||
|
|
<p>
|
||
|
|
Use este método se deseja desenhar texto facilmente em um plano na sua cena three.js.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h2>4. Crie um modelo em seu aplicativo 3D favorito e exporte para three.js</h2>
|
||
|
|
<div>
|
||
|
|
<p>Use este método se preferir trabalhar com seus aplicativos 3D e importar os modelos para o three.js.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h2>5. Geometria de Texto Procedural</h2>
|
||
|
|
<div>
|
||
|
|
<p>
|
||
|
|
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:
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<code>new THREE.TextGeometry( text, parameters );</code>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
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.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>Exemplos</h3>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
[example:webgl_geometry_text WebGL / geometry / text]<br />
|
||
|
|
[example:webgl_shadowmap WebGL / shadowmap]
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
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]
|
||
|
|
</p>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h2>6. Fontes Bitmap</h2>
|
||
|
|
<div>
|
||
|
|
<p>
|
||
|
|
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].
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
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.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Algumas ferramentas úteis:
|
||
|
|
</p>
|
||
|
|
<ul>
|
||
|
|
<li>[link:http://msdf-bmfont.donmccurdy.com/ msdf-bmfont-web] <i>(web)</i></li>
|
||
|
|
<li>[link:https://github.com/soimy/msdf-bmfont-xml msdf-bmfont-xml] <i>(linha de comando)</i></li>
|
||
|
|
<li>[link:https://github.com/libgdx/libgdx/wiki/Hiero hiero] <i>(desktop)</i></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h2>7. Troika Text</h2>
|
||
|
|
<div>
|
||
|
|
<p>
|
||
|
|
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:
|
||
|
|
</p>
|
||
|
|
<ul>
|
||
|
|
<li>Efeitos como traços, sombras e curvatura</li>
|
||
|
|
<li>A capacidade de aplicar qualquer material three.js, até mesmo um ShaderMaterial personalizado</li>
|
||
|
|
<li>Suporte para ligaduras de fonte, scripts com letras unidas e layout da direita para a esquerda/bidirecional</li>
|
||
|
|
<li>Otimização para grandes quantidades de texto dinâmico, realizando a maior parte do trabalho fora da thread principal em um web worker</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|