javascript
/
three.js
의 미러 https://github.com/tazdij/three.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
							<!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>&lt;div id="info"&gt;Description&lt;/div&gt;</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>