3 年之前 · 929c61a4f4
--- a/docs/index.html
+++ b/docs/index.html
@@ -37,6 +37,7 @@
 
				 						<option value="zh">中文</option>
			
 
				 						<option value="ja">日本語</option>
			
 
				 						<option value="it">it</option>
			
 
				+						<option value="pt-br">pt-br</option>
			
 
				 					</select>
			
 
				 				</div>
			
 
				 				<div id="content"></div>
			
@@ -87,7 +88,7 @@
 
				 
			
 
				 			if ( /^(api|manual|examples)/.test( hash ) ) {
			
 
				 
			
 
				-				const hashLanguage = /^(api|manual|examples)\/(en|ar|ko|zh|ja|it)\//.exec( hash );
			
 
				+				const hashLanguage = /^(api|manual|examples)\/(en|ar|ko|zh|ja|it|pt-br)\//.exec( hash );
			
 
				 
			
 
				 				if ( hashLanguage === null ) {
			
 
				 
			
--- a/docs/list.json
+++ b/docs/list.json
@@ -1162,6 +1162,34 @@
 
				           "VectorKeyframeTrack": "api/it/animation/tracks/VectorKeyframeTrack"
			
 
				         }
			
 
				       }
			
 
				-    }
			
 
				+    },
			
 
				+	"pt-br": {
			
 
				+		"Manual": {
			
 
				+			"Comece a usar": {
			
 
				+				"Criando uma cena": "manual/pt-br/introduction/Creating-a-scene",
			
 
				+				"Instalação": "manual/pt-br/introduction/Installation",
			
 
				+				"Compatibilidade WebGL": "manual/pt-br/introduction/WebGL-compatibility-check",
			
 
				+				"Como executar localmente": "manual/pt-br/introduction/How-to-run-things-locally",
			
 
				+				"Desenhando linhas": "manual/pt-br/introduction/Drawing-lines",
			
 
				+				"Criando texto": "manual/pt-br/introduction/Creating-text",
			
 
				+				"Carregando modelos 3D": "manual/pt-br/introduction/Loading-3D-models",
			
 
				+				"Bibliotecas e Plugins": "manual/pt-br/introduction/Libraries-and-Plugins",
			
 
				+				"FAQ": "manual/pt-br/introduction/FAQ",
			
 
				+				"Links úteis": "manual/pt-br/introduction/Useful-links"
			
 
				+			},
			
 
				+			"Próximos Passos": {
			
 
				+				"Como atualizar as coisas": "manual/pt-br/introduction/How-to-update-things",
			
 
				+				"Como descartar objetos": "manual/pt-br/introduction/How-to-dispose-of-objects",
			
 
				+				"Como criar conteúdo de VR": "manual/pt-br/introduction/How-to-create-VR-content",
			
 
				+				"Como usar o pós-processamento": "manual/pt-br/introduction/How-to-use-post-processing",
			
 
				+				"Transformações de matriz": "manual/pt-br/introduction/Matrix-transformations",
			
 
				+				"Sistema de animação": "manual/pt-br/introduction/Animation-system",
			
 
				+				"Gerenciamento de cor": "manual/pt-br/introduction/Color-management"
			
 
				+			},
			
 
				+			"Ferramentas de Build": {
			
 
				+				"Testando com NPM": "manual/pt-br/buildTools/Testing-with-NPM"
			
 
				+			}
			
 
				+		}
			
 
				+	}
			
 
				 
			
 
				 }
			
--- a/docs/manual/pt-br/buildTools/Testing-with-NPM.html
+++ b/docs/manual/pt-br/buildTools/Testing-with-NPM.html
@@ -0,0 +1,255 @@
 
				+<!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>Testando com NPM</h1>
			
 
				+
			
 
				+		<p class="desc">
			
 
				+            Este artigo mostra como colocar o three.js em um ambiente [link:https://nodejs.org/en/ node.js] para que você
			
 
				+            possa executar testes automatizados. Os testes podem ser executados na linha de comando ou por
			
 
				+            Ferramentas de CI como [link:https://travis-ci.org/ Travis].
			
 
				+		</p>
			
 
				+
			
 
				+		<h2>A versão curta</h2>
			
 
				+
			
 
				+		<p>
			
 
				+			Se você estiver confortável com node e npm,
			
 
				+			<code>
			
 
				+				$ npm install three --save-dev
			
 
				+			</code>
			
 
				+			e adicione
			
 
				+		<code>
			
 
				+			const THREE = require('three');
			
 
				+		</code>
			
 
				+			para o seu teste.
			
 
				+		</p>
			
 
				+
			
 
				+		<h2>Criar um projeto testável do zero</h2>
			
 
				+		<p>
			
 
				+            Se você não estiver familiarizado com essas ferramentas, aqui está um guia rápido (para linux, o processo de instalação
			
 
				+            será um pouco diferente do que usando o Windows, mas os comandos do NPM são idênticos).
			
 
				+		</p>
			
 
				+
			
 
				+		<h3>Configuração básica</h3>
			
 
				+		<div>
			
 
				+			<ol>
			
 
				+				<li>
			
 
				+					Instale o [link:https://www.npmjs.org/ npm] e o nodejs. O caminho mais curto normalmente parece algo como
			
 
				+					<code>
			
 
				+$ sudo apt-get install -y npm nodejs-legacy
			
 
				+# fix any problems with SSL in the default registry URL
			
 
				+$ npm config set registry http://registry.npmjs.org/
			
 
				+					</code>
			
 
				+				</li>
			
 
				+
			
 
				+				<li>
			
 
				+					Crie um novo diretório de projeto
			
 
				+					<code>
			
 
				+						 $ mkdir test-example; cd test-example
			
 
				+					</code>
			
 
				+				</li>
			
 
				+
			
 
				+				<li>
			
 
				+					Peça ao npm para criar um novo arquivo de projeto para você:
			
 
				+					<code>
			
 
				+					 $ npm init
			
 
				+					</code>
			
 
				+                    e aceite todas as opções default pressionando Enter em todos os prompts.
			
 
				+                    Isso criará o package.json.
			
 
				+				</li><br />
			
 
				+
			
 
				+				<li>
			
 
				+					Experimente iniciar o recurso de teste com
			
 
				+					<code>
			
 
				+$ npm test
			
 
				+					</code>
			
 
				+					Isso falhará, o que é esperado.
			
 
				+                    Se você olhar no package.json, a definição do script de teste é
			
 
				+					<code>
			
 
				+						"test": "echo \"Error: no test specified\" && exit 1"
			
 
				+					</code>
			
 
				+				</li>
			
 
				+
			
 
				+			</ol>
			
 
				+		</div>
			
 
				+
			
 
				+		<h2>Adicionar mocha</h2>
			
 
				+		<div>
			
 
				+			Vamos usar o [link:https://mochajs.org/mocha].
			
 
				+
			
 
				+			<ol>
			
 
				+				<li>
			
 
				+					Instale o mocha com
			
 
				+					<code>
			
 
				+$ npm install mocha --save-dev
			
 
				+					</code>
			
 
				+					Observe que a pasta node_modules/ é criada e suas dependências aparecem lá.
			
 
				+                    Observe também que seu package.json foi atualizado: a propriedade devDependencies
			
 
				+                    é adicionada e atualizada pelo uso de --save-dev.
			
 
				+				</li><br />
			
 
				+
			
 
				+				<li>
			
 
				+                    Edite o package.json para usar o mocha para teste. Quando o teste for chamado, queremos apenas executar
			
 
				+                    o mocha e especificar um relatório detalhado. Por padrão, isso executará qualquer coisa em test/
			
 
				+                    (não ter a pasta test/ pode levar a um ERR! no npm, crie-a pelo comando mkdir test)
			
 
				+					<code>
			
 
				+						"test": "mocha --reporter list"
			
 
				+					</code>
			
 
				+				</li>
			
 
				+
			
 
				+				<li>
			
 
				+					Reexecute o teste com
			
 
				+					<code>
			
 
				+						$ npm test
			
 
				+					</code>
			
 
				+                    Isso agora deve correr bem, reportando "0 passing (1ms)"
			
 
				+                    ou similar.
			
 
				+				</li>
			
 
				+
			
 
				+			</ol>
			
 
				+		</div>
			
 
				+
			
 
				+		<h2>Adicionar three.js</h2>
			
 
				+		<div>
			
 
				+			<ol>
			
 
				+				<li>
			
 
				+					Vamos baixar nossa dependência three.js com
			
 
				+					<code>
			
 
				+$ npm install three --save-dev
			
 
				+					</code>
			
 
				+					<ul>
			
 
				+						<li>
			
 
				+							Se você precisar de uma versão diferente do three.js, use
			
 
				+							<code>
			
 
				+								$ npm show three versions
			
 
				+							</code>
			
 
				+                          para listar o que está disponível. Para escolher pelo npm a versão correta, use
			
 
				+							<code>
			
 
				+ $ npm install [email protected] --save
			
 
				+							</code>
			
 
				+							(0.84.0 nesse exemplo). --save torna isso uma dependência do projeto, em vez de
			
 
				+                            dependência dev. Veja os documentos [link:https://docs.npmjs.com/cli/v8/configuring-npm/package-json aqui] para mais informações.
			
 
				+						</li>
			
 
				+					</ul>
			
 
				+				</li>
			
 
				+
			
 
				+				<li>
			
 
				+					Mocha irá procurar por testes em test/, então vamos executar
			
 
				+					<code>
			
 
				+					$ mkdir test
			
 
				+					</code>
			
 
				+				</li>
			
 
				+
			
 
				+				<li>
			
 
				+                    Finalmente, precisamos de um teste JS para ser executado. Vamos adicionar um teste simples que verificará que
			
 
				+                    o objeto three.js está disponível e funcionando. Crie test/verify-three.js contendo:
			
 
				+<code>
			
 
				+const THREE = require('three');
			
 
				+const assert = require('assert');
			
 
				+
			
 
				+describe('The THREE object', function() {
			
 
				+  it('should have a defined BasicShadowMap constant', function() {
			
 
				+    assert.notEqual('undefined', THREE.BasicShadowMap);
			
 
				+  }),
			
 
				+
			
 
				+  it('should be able to construct a Vector3 with default of x=0', function() {
			
 
				+    const vec3 = new THREE.Vector3();
			
 
				+    assert.equal(0, vec3.x);
			
 
				+  })
			
 
				+})
			
 
				+</code>
			
 
				+				</li>
			
 
				+
			
 
				+				<li>
			
 
				+                Finalmente vamos testar novamente com $ npm test. Isso deve executar os testes acima e ter sucesso,
			
 
				+                mostrando algo como:
			
 
				+				<code>
			
 
				+The THREE object should have a defined BasicShadowMap constant: 0ms
			
 
				+The THREE object should be able to construct a Vector3 with default of x=0: 0ms
			
 
				+2 passing (8ms)
			
 
				+				</code>
			
 
				+				</li>
			
 
				+			</ol>
			
 
				+		</div>
			
 
				+
			
 
				+		<h2>Adicione seu próprio código</h2>
			
 
				+		<div>
			
 
				+			Você precisa fazer três coisas:
			
 
				+
			
 
				+			<ol>
			
 
				+				<li>
			
 
				+					Escreva um teste para o comportamento esperado do seu código e coloque-o em test/.
			
 
				+					[link:https://github.com/air/encounter/blob/master/test/Physics-test.js aqui] tem um exemplo de um projeto real.
			
 
				+				</li>
			
 
				+
			
 
				+				<li>
			
 
				+					Exporte seu código funcional de forma que o nodejs possa vê-lo, para uso em conjunto com require.
			
 
				+					Veja isso [link:https://github.com/air/encounter/blob/master/js/Physics.js aqui].
			
 
				+				</li>
			
 
				+
			
 
				+				<li>
			
 
				+                    Requisite seu código no arquivo de teste, da mesma forma que fizemos um require('three') no exemplo acima.
			
 
				+				</li>
			
 
				+			</ol>
			
 
				+
			
 
				+			<p>
			
 
				+                Os itens 2 e 3 variam dependendo de como você gerencia seu código. No exemplo de Physics.js
			
 
				+                dado acima, a parte de exportação está bem no final. Atribuímos um objeto a module.exports:
			
 
				+			</p>
			
 
				+			<code>
			
 
				+//=============================================================================
			
 
				+// make available in nodejs
			
 
				+//=============================================================================
			
 
				+if (typeof exports !== 'undefined')
			
 
				+{
			
 
				+  module.exports = Physics;
			
 
				+}
			
 
				+			</code>
			
 
				+		</div>
			
 
				+
			
 
				+		<h2>Lidando com dependências</h2>
			
 
				+		<div>
			
 
				+			<p>
			
 
				+				Se você já estiver usando algo como require.js ou browserify, pule esta parte.
			
 
				+			</p>
			
 
				+			<p>
			
 
				+                Normalmente, um projeto three.js será executado no navegador. O carregamento do módulo é, portanto, feito pelo 
			
 
				+                navegador, executando um monte de tags de script. Seus arquivos individuais não precisam se preocupar
			
 
				+                com dependências. No entanto, em um contexto nodejs, não há index.html vinculando tudo
			
 
				+                junto, então você tem que ser explícito.
			
 
				+			</p>
			
 
				+			<p>
			
 
				+				Se você estiver exportando um módulo que depende de outros arquivos, precisará dizer ao node para carregá-los.
			
 
				+                Aqui está uma abordagem:
			
 
				+			</p>
			
 
				+			<ol>
			
 
				+				<li>
			
 
				+					No início do seu módulo, verifique se você está em um ambiente nodejs.
			
 
				+				</li>
			
 
				+				<li>
			
 
				+					Em caso afirmativo, declare explicitamente suas dependências.
			
 
				+				</li>
			
 
				+				<li>
			
 
				+					Caso contrário, você provavelmente está em um navegador, então não precisa fazer mais nada.
			
 
				+				</li>
			
 
				+			</ol>
			
 
				+			Código de exemplo de Physics.js:
			
 
				+			<code>
			
 
				+//=============================================================================
			
 
				+// setup for server-side testing
			
 
				+//=============================================================================
			
 
				+if (typeof require === 'function') // test for nodejs environment
			
 
				+{
			
 
				+  const THREE = require('three');
			
 
				+  const MY3 = require('./MY3.js');
			
 
				+}
			
 
				+			</code>
			
 
				+		</div>
			
 
				+
			
 
				+	</body>
			
 
				+</html>
			
--- a/docs/manual/pt-br/introduction/Animation-system.html
+++ b/docs/manual/pt-br/introduction/Animation-system.html
@@ -0,0 +1,149 @@
 
				+<!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>Sistema de animação</h1>
			
 
				+
			
 
				+		<h2>Visão geral</h2>
			
 
				+
			
 
				+		<p class="desc">
			
 
				+
			
 
				+			No sistema de animação three.js, você pode animar várias propriedades de seus modelos:
			
 
				+			os ossos (bones) de um [page:SkinnedMesh skinned and rigged model], morph targets, 
			
 
				+            diferentes propriedades de material
			
 
				+			(cores, opacidade, booleanos), visibilidade e transformações. As propriedades animadas podem ser utilizadas com fade in,
			
 
				+			fade out, crossfaded e warped. As escalas de peso e tempo de diferentes
			
 
				+			animações no mesmo objeto, bem como em objetos diferentes, podem ser alteradas
			
 
				+			independentemente. Várias animações no mesmo objeto e em objetos diferentes podem ser
			
 
				+			sincronizadas.<br /><br />
			
 
				+
			
 
				+			Para conseguir tudo isso em um sistema homogêneo, o sistema de animação three.js
			
 
				+			[link:https://github.com/mrdoob/three.js/issues/6881 mudou completamente em 2015]
			
 
				+			(cuidado com informações desatualizadas!), e agora tem uma arquitetura semelhante à
			
 
				+			Unity/Unreal Engine 4. Esta página fornece uma breve visão geral dos principais componentes do
			
 
				+			sistema e como eles trabalham juntos.
			
 
				+		
			
 
				+		</p>
			
 
				+
			
 
				+		<h3>Clipes de animação (Animation Clips)</h3>
			
 
				+
			
 
				+		<p class="desc">
			
 
				+
			
 
				+			Se você importou com sucesso um objeto 3D animado (não importa se
			
 
				+			bones ou morph targets ou ambos) — por exemplo, exportando-o do Blender com o
			
 
				+			[link:https://github.com/KhronosGroup/glTF-Blender-IO glTF Blender] e
			
 
				+			carregando-o em uma cena three.js usando [page:GLTFLoader] — um dos campos da resposta
			
 
				+			deve ser um array chamado "animations", contendo o [page:AnimationClip AnimationClips]
			
 
				+			para este modelo (veja uma lista de carregadores possíveis abaixo).<br /><br />
			
 
				+
			
 
				+			Cada `AnimationClip` geralmente contém os dados de uma determinada atividade do objeto. Se o
			
 
				+			mesh é um personagem, por exemplo, pode haver um AnimationClip para caminhar, um segundo
			
 
				+			para salto, um terceiro para contornar e assim por diante.
			
 
				+		
			
 
				+		</p>
			
 
				+
			
 
				+		<h3>Keyframe Tracks</h3>
			
 
				+
			
 
				+		<p class="desc">
			
 
				+
			
 
				+			Dentro de tal 'AnimationClip' os dados para cada propriedade animada são armazenados em um
			
 
				+			[page:KeyframeTrack] separado. Supondo que um objeto de personagem tenha um [page:Skeleton esqueleto] (skeleton),
			
 
				+			uma keyframe track pode armazenar os dados para as mudanças de posição do osso do antebraço
			
 
				+			ao longo do tempo, uma faixa diferente dos dados para as mudanças de rotação do mesmo osso, uma terceira
			
 
				+			a posição da pista, rotação ou dimensionamento de outro osso, e assim por diante. Deve ficar claro,
			
 
				+			que um AnimationClip pode ser composto de muitas dessas tracks.<br /><br />
			
 
				+
			
 
				+			Supondo que o modelo tenha morph targets (por exemplo, um
			
 
				+			morph target mostrando um rosto amigável e outro mostrando um rosto irritado), cada track contém as
			
 
				+			informações sobre como a [page:Mesh.morphTargetInfluences influence] de um certo morph target
			
 
				+			muda durante a execução do clipe.
			
 
				+
			
 
				+		</p>
			
 
				+
			
 
				+		<h3>Animation Mixer</h3>
			
 
				+
			
 
				+		<p class="desc">
			
 
				+
			
 
				+			Os dados armazenados formam apenas a base para as animações - a reprodução real é controlada pelo 
			
 
				+			[page:AnimationMixer]. Você pode imaginar isso não apenas como um player de animações, mas
			
 
				+			como uma simulação de um hardware como um mixer real, que pode controlar várias animações
			
 
				+			simultaneamente, misturando-os e fundindo-os.
			
 
				+
			
 
				+		</p>
			
 
				+
			
 
				+		<h3>Ações de animação (Animation Actions)</h3>
			
 
				+
			
 
				+		<p class="desc">
			
 
				+
			
 
				+			O próprio `AnimationMixer` tem muito poucas propriedades e métodos (gerais), porque
			
 
				+			pode ser controlado por [page:AnimationAction AnimationActions]. Ao configurar um
			
 
				+			`AnimationAction` você pode determinar quando um certo `AnimationClip` deve ser reproduzido, pausado
			
 
				+			ou parado em um dos mixers, se e com que frequência o clipe deve ser repetido, seja
			
 
				+			executado com um fade ou uma escala de tempo, e algumas coisas adicionais, como crossfading
			
 
				+			ou sincronização.
			
 
				+
			
 
				+		</p>
			
 
				+
			
 
				+		<h3>Animação de Grupos de Objetos</h3>
			
 
				+
			
 
				+		<p class="desc">
			
 
				+
			
 
				+			Se você quiser que um grupo de objetos receba um estado de animação compartilhado, você pode usar um
			
 
				+			[page:AnimationObjectGroup].
			
 
				+
			
 
				+		</p>
			
 
				+
			
 
				+		<h3>Formatos e Loaders suportados</h3>
			
 
				+
			
 
				+		<p class="desc">
			
 
				+			Observe que nem todos os formatos de modelo incluem animação (notadamente o OBJ não inclui), e que apenas alguns
			
 
				+			loaders do three.js suportam sequências [page:AnimationClip AnimationClip]. Vários que <i>tem</i>
			
 
				+			suporte para este tipo de animação:
			
 
				+		</p>
			
 
				+
			
 
				+			<ul>
			
 
				+				<li>[page:ObjectLoader THREE.ObjectLoader]</li>
			
 
				+				<li>THREE.BVHLoader</li>
			
 
				+				<li>THREE.ColladaLoader</li>
			
 
				+				<li>THREE.FBXLoader</li>
			
 
				+				<li>[page:GLTFLoader THREE.GLTFLoader]</li>
			
 
				+				<li>THREE.MMDLoader</li>
			
 
				+			</ul>
			
 
				+
			
 
				+		<p class="desc">
			
 
				+			Observe que o 3ds max e o Maya atualmente não podem exportar várias animações (ou seja, animações que não estão
			
 
				+			na mesma linha do tempo) diretamente para um único arquivo.
			
 
				+		</p>
			
 
				+
			
 
				+		<h2>Exemplo</h2>
			
 
				+
			
 
				+		<code>
			
 
				+		let mesh;
			
 
				+
			
 
				+		// Create an AnimationMixer, and get the list of AnimationClip instances
			
 
				+		const mixer = new THREE.AnimationMixer( mesh );
			
 
				+		const clips = mesh.animations;
			
 
				+
			
 
				+		// Update the mixer on each frame
			
 
				+		function update () {
			
 
				+			mixer.update( deltaSeconds );
			
 
				+		}
			
 
				+
			
 
				+		// Play a specific animation
			
 
				+		const clip = THREE.AnimationClip.findByName( clips, 'dance' );
			
 
				+		const action = mixer.clipAction( clip );
			
 
				+		action.play();
			
 
				+
			
 
				+		// Play all animations
			
 
				+		clips.forEach( function ( clip ) {
			
 
				+			mixer.clipAction( clip ).play();
			
 
				+		} );
			
 
				+		</code>
			
 
				+
			
 
				+	</body>
			
 
				+</html>
			
--- a/docs/manual/pt-br/introduction/Color-management.html
+++ b/docs/manual/pt-br/introduction/Color-management.html
@@ -0,0 +1,337 @@
 
				+<!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" />
			
 
				+	<style>
			
 
				+		blockquote {
			
 
				+			font-size: 0.8em;
			
 
				+			line-height: 1.5em;
			
 
				+			margin-left: 0;
			
 
				+			border-left: 4px solid #cccccc;
			
 
				+			padding: 1em 2em 1em 2em;
			
 
				+		}
			
 
				+
			
 
				+		blockquote p:first-child {
			
 
				+			margin-top: 0;
			
 
				+		}
			
 
				+
			
 
				+		blockquote p:last-child {
			
 
				+			margin-bottom: 0;
			
 
				+		}
			
 
				+
			
 
				+		figure {
			
 
				+			width: 100%;
			
 
				+			margin: 1em 0;
			
 
				+			font-style: italic;
			
 
				+		}
			
 
				+
			
 
				+		figure img {
			
 
				+			width: 100%;
			
 
				+		}
			
 
				+
			
 
				+		figure.float {
			
 
				+			float: right;
			
 
				+			max-width: 30%;
			
 
				+			margin: 1em;
			
 
				+		}
			
 
				+
			
 
				+		@media all and ( max-width: 640px ) {
			
 
				+
			
 
				+			figure.float {
			
 
				+				float: none;
			
 
				+				max-width: 100%;
			
 
				+			}
			
 
				+
			
 
				+		}
			
 
				+	</style>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+	<h1>Gerenciamento de cor</h1>
			
 
				+
			
 
				+	<h2>O que é um espaço de cor?</h2>
			
 
				+
			
 
				+	<p>
			
 
				+		Cada espaço de cor é uma coleção de várias decisões de design, escolhidas em conjunto para dar suporte a uma
			
 
				+		grande variedade de cores, satisfazendo as restrições técnicas relacionadas à precisão e a tecnologia das telas. Ao criar um recurso 3D ou ao montar recursos 3D em uma cena, é
			
 
				+		importante saber quais são essas propriedades e como as propriedades de um espaço de cores se relacionam
			
 
				+		com outros espaços de cor na cena.
			
 
				+	</p>
			
 
				+
			
 
				+	<figure class="float">
			
 
				+		<img src="resources/srgb_gamut.png" alt="">
			
 
				+		<figcaption>
			
 
				+			Cores sRGB e ponto branco (D65) exibidos no diagrama de referência cromaticidade CIE 1931. 
			
 
				+			A região colorida representa uma projeção 2D da gama sRGB, que é um volume 3D.
			
 
				+			Fonte: <a href="https://en.wikipedia.org/wiki/SRGB" target="_blank" rel="noopener">Wikipedia</a>
			
 
				+		</figcaption>
			
 
				+	</figure>
			
 
				+
			
 
				+	<ul>
			
 
				+		<li>
			
 
				+			<b>
			
 
				+				Cores primárias:</b> As cores primárias (por exemplo, vermelho, verde, azul) não são absolutas; elas são
			
 
				+				selecionadas a partir do espectro visível com base em restrições de precisão limitada e
			
 
				+				capacidades dos dispositivos de exibição disponíveis. As cores são expressas como uma proporção das cores primárias.
			
 
				+		</li>
			
 
				+		<li>
			
 
				+			<b>Ponto branco:</b> a maioria dos espaços de cores é projetada de forma que uma soma igualmente ponderada das 
			
 
				+			primárias <i>R = G = B</i> parecerão sem cor, ou "acromáticas". A aparência
			
 
				+			de valores acromáticos (como branco ou cinza) dependem da percepção humana, que por sua vez depende
			
 
				+			fortemente no contexto do observador. Um espaço de cor especifica seu "ponto branco" para equilibrar
			
 
				+			essas necessidades. O ponto branco definido pelo espaço de cores sRGB é
			
 
				+			<a href="https://en.wikipedia.org/wiki/Illuminant_D65" target="_blank">D65</a>.
			
 
				+		</li>
			
 
				+		<li>
			
 
				+			<b>Transfer functions:</b> depois de escolher a gama de cores e um modelo de cores, ainda precisamos
			
 
				+			definir mapeamentos ("transfer functions") de valores numéricos para o espaço de cores. <i>r = 0,5</i>
			
 
				+			representa 50% menos iluminação física do que <i>r = 1.0</i>? Ou 50% menos brilhante, conforme percebido
			
 
				+			por um olho humano médio? São coisas diferentes, e essa diferença pode ser representada como
			
 
				+			uma função matemática. As transfer functions podem ser <i>lineares</i> ou <i>não lineares</i>, dependendo
			
 
				+			dos objetivos do espaço de cores. sRGB define transfer functions não lineares. Aquelas
			
 
				+			funções são às vezes aproximadas como <i>funções gamma</i>, mas o termo "gamma" é
			
 
				+			ambíguo e deve ser evitado neste contexto.
			
 
				+		</li>
			
 
				+	</ul>
			
 
				+
			
 
				+	Esses três parâmetros — cores primárias, ponto branco e transfer functions — definem um espaço de cores, 
			
 
				+	cada um escolhido para objetivos particulares. Tendo definido os parâmetros, alguns termos adicionais
			
 
				+	são úteis:
			
 
				+
			
 
				+	<ul>
			
 
				+		<li>
			
 
				+			<b>Modelo de cores:</b> Sintaxe para identificar numericamente as cores dentro da gama de cores escolhida —
			
 
				+			um sistema de coordenadas para cores. No three.js estamos preocupados principalmente com o modelo de cor RGB,
			
 
				+			tendo três coordenadas <i>r, g, b ∈ [0,1]</i> ("domínio fechado") ou
			
 
				+			<i>r, g, b ∈ [0,∞]</i> ("domínio aberto"), cada um representando uma fração de uma cor primária. 
			
 
				+			Outros modelos de cores (HSL, Lab, LCH) são comumente usados para controle artístico.
			
 
				+		</li>
			
 
				+		<li>
			
 
				+			<b>Gama de cores:</b> uma vez que as cores primárias e um ponto branco tenham sido escolhidos, eles representam
			
 
				+			um volume dentro do espectro visível (uma "gama"). Cores fora deste volume ("fora da gama")
			
 
				+			não podem ser expressas por valores RGB de domínio fechado [0,1]. No domínio aberto [0,∞], a gama é
			
 
				+			tecnicamente infinita.
			
 
				+		</li>
			
 
				+	</ul>
			
 
				+
			
 
				+	<p>
			
 
				+		Considere dois espaços de cores muito comuns: [page:SRGBColorSpace] ("sRGB") e
			
 
				+		[page:LinearSRGBColorSpace] ("Linear-sRGB"). Ambos usam as mesmas cores primárias e ponto branco,
			
 
				+		e, portanto, têm a mesma gama de cores. Ambos usam o modelo de cores RGB. Eles diferem apenas
			
 
				+		nas transfer functions — Linear-sRGB é linear em relação à intensidade da luz física.
			
 
				+		sRGB usa as transfer functions sRGB não lineares e se assemelha mais à maneira que
			
 
				+		o olho humano percebe a luz e a capacidade de resposta de dispositivos de exibição comuns.
			
 
				+	</p>
			
 
				+
			
 
				+	<p>
			
 
				+		Essa diferença é importante. Cálculos de iluminação e outras operações de renderização devem
			
 
				+		geralmente ocorrem em um espaço de cores linear. No entanto, cores lineares são menos eficientes para
			
 
				+		armazenar em uma imagem ou framebuffer e não parecem corretas quando vistas por um observador humano.
			
 
				+		Como resultado, as texturas de entrada e a imagem final renderizada geralmente usarão o método não linear
			
 
				+		do espaço de cores sRGB.
			
 
				+	</p>
			
 
				+
			
 
				+	<blockquote>
			
 
				+		<p>
			
 
				+			ℹ️ <i><b>AVISO:</b> Embora alguns monitores modernos sejam compatíveis com gamas mais amplas, como Display-P3,
			
 
				+				as APIs gráficas da plataforma web dependem em grande parte do sRGB. Aplicativos que usam three.js
			
 
				+				hoje normalmente usarão apenas os espaços de cores sRGB e Linear-sRGB.</i>
			
 
				+		</p>
			
 
				+	</blockquote>
			
 
				+
			
 
				+	<h2>Atribuições dos espaços de cores</h2>
			
 
				+
			
 
				+	<p>
			
 
				+		Fluxos de trabalho lineares - necessários para métodos modernos de renderização - geralmente envolvem mais de
			
 
				+		um espaço de cores, cada um atribuído a uma função específica. Espaços de cores lineares e não lineares são
			
 
				+		apropriados para diferentes funções, como explicado abaixo.
			
 
				+	</p>
			
 
				+
			
 
				+	<h3>Input do espaço de cores</h3>
			
 
				+
			
 
				+	<p>
			
 
				+		Cores fornecidas ao three.js — de seletores de cores, texturas, modelos 3D e outras fontes —
			
 
				+		cada um tem um espaço de cor associado. Aqueles que ainda não estão na cor de trabalho Linear-sRGB,
			
 
				+        devem ser convertidos e as texturas devem receber a atribuição <i>texture.encoding</i> correta.
			
 
				+		Certas conversões (para cores hexadecimais e CSS em sRGB) podem ser feitas automaticamente se
			
 
				+		o modo de gerenciamento de cores herdado é desabilitado antes de inicializar as cores:
			
 
				+	</p>
			
 
				+
			
 
				+	<code>
			
 
				+THREE.ColorManagement.legacyMode = false;
			
 
				+	</code>
			
 
				+
			
 
				+	<ul>
			
 
				+		<li>
			
 
				+			<b>Materiais, luzes e shaders:</b> cores nos materiais, luzes e shaders armazenam
			
 
				+			componentes RGB no espaço de cores de trabalho Linear-sRGB.
			
 
				+		</li>
			
 
				+		<li>
			
 
				+			<b>Cores de vértices:</b> [page:BufferAttribute BufferAttributes] armazena componentes RGB no
			
 
				+			Espaço de cores de trabalho linear-sRGB.
			
 
				+		</li>
			
 
				+		<li>
			
 
				+			<b>Texturas de cores:</b> PNG ou JPEG [page:Texture Textures] contendo informações de cores
			
 
				+			(como .map ou .emissiveMap) usam o espaço de cores sRGB de domínio fechado e devem ser anotados com
			
 
				+			<i>texture.encoding = sRGBEncoding</i>. Formatos como OpenEXR (às vezes usado para .envMap ou
			
 
				+			.lightMap) usam o espaço de cores Linear-sRGB indicado com <i>texture.encoding = LinearEncoding</i>,
			
 
				+			e podem conter valores no domínio aberto [0,∞].
			
 
				+		</li>
			
 
				+		<li>
			
 
				+			<b>Texturas não coloridas:</b> Texturas que não armazenam informações de cores (como .normalMap
			
 
				+			ou .roughnessMap) não têm um espaço de cores associado e geralmente usam a textura (padrão)
			
 
				+			como <i>texture.encoding = LinearEncoding</i>. Em casos raros, dados sem cor
			
 
				+			podem ser representados com outras codificações não lineares por motivos técnicos.
			
 
				+		</li>
			
 
				+	</ul>
			
 
				+
			
 
				+	<blockquote>
			
 
				+		<p>
			
 
				+			⚠️ <i><b>AVISO:</b> [page:Scene.fog], [page:Scene.background] e [page:WebGLRenderer.setClearColor]
			
 
				+			são exceções à regra. Essas propriedades não são afetadas por [page:WebGLRenderer.outputEncoding]
			
 
				+			e, portanto, devem armazenar componentes RGB na <u>saída</u> do renderizador do espaço de cores.</i>
			
 
				+		</p>
			
 
				+	</blockquote>
			
 
				+
			
 
				+	<blockquote>
			
 
				+		<p>
			
 
				+			⚠️ <i><b>AVISO:</b> Muitos formatos para modelos 3D não funcionam de forma correta ou consistente
			
 
				+			na definição das informações do espaço de cores. Enquanto o three.js tenta lidar com a maioria dos casos, problemas
			
 
				+			são comuns com formatos de arquivo mais antigos. Para melhores resultados, use glTF 2.0 ([page:GLTFLoader])
			
 
				+			e teste modelos 3D em visualizadores on-line antecipadamente para confirmar que o recurso em si está correto.</i>
			
 
				+		</p>
			
 
				+	</blockquote>
			
 
				+
			
 
				+	<h3>Espaço de cores de trabalho</h3>
			
 
				+
			
 
				+	<p>
			
 
				+		Renderização, interpolação e muitas outras operações devem ser executadas em um domínio aberto
			
 
				+		do espaço de cores de trabalho linear, no qual os componentes RGB são proporcionais a iluminação 
			
 
				+		física. No three.js, o espaço de cores de trabalho é Linear-sRGB.
			
 
				+	</p>
			
 
				+
			
 
				+	<h3>Output do espaço de cores</h3>
			
 
				+
			
 
				+	<p>
			
 
				+		A saída para um dispositivo de exibição, imagem ou vídeo pode envolver a conversão do domínio aberto
			
 
				+		do espaço de cores de trabalho linear-sRGB para outro espaço de cores. Essa conversão pode ser feita em
			
 
				+		uma passagem de renderização principal ([page:WebGLRenderer.outputEncoding]), ou durante o pós-processamento.
			
 
				+	</p>
			
 
				+
			
 
				+	<code>
			
 
				+renderer.outputEncoding = THREE.sRGBEncoding; // optional with post-processing
			
 
				+	</code>
			
 
				+
			
 
				+	<ul>
			
 
				+		<li>
			
 
				+			<b>Tela:</b> as cores gravadas em um canvas WebGL para exibição devem estar no espaço sRGB
			
 
				+			colorido.
			
 
				+		</li>
			
 
				+		<li>
			
 
				+			<b>Imagem:</b> as cores gravadas em uma imagem devem usar o espaço de cores apropriado para
			
 
				+			o formato e o uso. Imagens totalmente renderizadas gravadas em texturas PNG ou JPEG geralmente
			
 
				+			usam o espaço de cores sRGB. Imagens contendo emissão, mapas de luz ou outros dados não
			
 
				+			confinados ao intervalo [0,1] geralmente usarão o espaço de cores Linear-sRGB de domínio aberto,
			
 
				+			e um formato de imagem compatível como OpenEXR.
			
 
				+		</li>
			
 
				+	</ul>
			
 
				+
			
 
				+	<blockquote>
			
 
				+		<p>
			
 
				+			⚠️ <i><b>AVISO:</b> 
			
 
				+			Os render targets podem usar sRGB ou Linear-sRGB. sRGB faz
			
 
				+			melhor uso de precisão limitada. No domínio fechado, 8 bits geralmente são suficientes para sRGB
			
 
				+			enquanto que ≥12 bits (meio flutuante) podem ser necessários para Linear-sRGB. Se mais tarde
			
 
				+			os estágios pipeline precisarem de entrada Linear-sRGB, as conversões adicionais podem ter um pequeno
			
 
				+			custo de desempenho.</i>
			
 
				+		</p>
			
 
				+	</blockquote>
			
 
				+
			
 
				+	<h2>Trabalhando com instâncias THREE.Color</h2>
			
 
				+
			
 
				+	<p>
			
 
				+		Métodos de leitura ou modificação de instâncias [page:Color] assumem que os dados já estão no
			
 
				+		espaço de cores de trabalho three.js, Linear-sRGB. Os componentes RGB e HSL são
			
 
				+		representações diretas de dados armazenados pela instância Color e nunca são convertidos
			
 
				+		implicitamente. Os dados de cores podem ser convertidos explicitamente com <i>.convertLinearToSRGB()</i>
			
 
				+		ou <i>.convertSRGBToLinear()</i>.
			
 
				+	</p>
			
 
				+
			
 
				+	<code>
			
 
				+		// RGB components (no change).
			
 
				+		color.r = color.g = color.b = 0.5;
			
 
				+		console.log( color.r ); // → 0.5
			
 
				+
			
 
				+		// Manual conversion.
			
 
				+		color.r = 0.5;
			
 
				+		color.convertSRGBToLinear();
			
 
				+		console.log( color.r ); // → 0.214041140
			
 
				+	</code>
			
 
				+
			
 
				+	<p>
			
 
				+		Com <i>ColorManagement.legacyMode = false</i> definido (recomendado), determinadas conversões
			
 
				+		são feitas automaticamente. Como as cores hexadecimais e CSS geralmente são sRGB, métodos [page:Color]
			
 
				+		irão converter automaticamente essas entradas de sRGB para Linear-sRGB em setters, ou
			
 
				+		converter de Linear-sRGB para sRGB ao retornar hexadecimal ou CSS de getters.
			
 
				+	</p>
			
 
				+
			
 
				+	<code>
			
 
				+		// Hexadecimal conversion.
			
 
				+		color.setHex( 0x808080 );
			
 
				+		console.log( color.r ); // → 0.214041140
			
 
				+		console.log( color.getHex() ); // → 0x808080
			
 
				+
			
 
				+		// CSS conversion.
			
 
				+		color.setStyle( 'rgb( 0.5, 0.5, 0.5 )' );
			
 
				+		console.log( color.r ); // → 0.214041140
			
 
				+
			
 
				+		// Override conversion with 'colorSpace' argument.
			
 
				+		color.setHex( 0x808080, LinearSRGBColorSpace );
			
 
				+		console.log( color.r ); // → 0.5
			
 
				+		console.log( color.getHex( LinearSRGBColorSpace ) ); // → 0x808080
			
 
				+		console.log( color.getHex( SRGBColorSpace ) ); // → 0xBCBCBC
			
 
				+	</code>
			
 
				+
			
 
				+	<h2>Erros comuns</h2>
			
 
				+
			
 
				+	<p>
			
 
				+		Quando uma cor ou textura individual é configurada incorretamente, ela aparecerá mais escura ou mais clara do que
			
 
				+		esperado. Quando o espaço de cores de saída do renderizador está mal configurado, a cena inteira pode aparecer
			
 
				+		mais escura (por exemplo, conversão ausente para sRGB) ou mais clara (por exemplo, uma conversão dupla para sRGB com
			
 
				+		pós-processamento). Em cada caso, o problema pode não ser uniforme e simplesmente aumentar/diminuir
			
 
				+		a iluminação não resolve.
			
 
				+	</p>
			
 
				+
			
 
				+	<p>
			
 
				+		Um problema mais sutil aparece quando <i>ambos</i> os espaços de cores de entrada e saída
			
 
				+		estão incorretos — os níveis gerais de brilho podem ser bons, mas as cores podem mudar
			
 
				+		inesperadamente sob iluminação diferente, ou o sombreamento pode parecer mais estourado e menos suave
			
 
				+		do que o pretendido. Esses dois erros não fazem um acerto, e é importante que o trabalho
			
 
				+		espaço de cores funcional seja linear ("cena referida") e o espaço de cores de saída seja não linear
			
 
				+		("exibição referida").
			
 
				+	</p>
			
 
				+
			
 
				+	<h2>Leitura adicional</h2>
			
 
				+
			
 
				+	<ul>
			
 
				+		<li>
			
 
				+			<a href="https://developer.nvidia.com/gpugems/gpugems3/part-iv-image-effects/chapter-24-importance-being-linear" target="_blank" rel="noopener">GPU Gems 3: The Importance of Being Linear</a>, de Larry Gritz and Eugene d'Eon
			
 
				+		</li>
			
 
				+		<li>
			
 
				+			<a href="https://blog.johnnovak.net/2016/09/21/what-every-coder-should-know-about-gamma/" target="_blank" rel="noopener">What every coder should know about gamma</a>, de John Novak
			
 
				+		</li>
			
 
				+		<li>
			
 
				+			<a href="https://hg2dc.com/" target="_blank" rel="noopener">The Hitchhiker's Guide to Digital Color</a>, de Troy Sobotka
			
 
				+		</li>
			
 
				+		<li>
			
 
				+			<a href="https://docs.blender.org/manual/en/latest/render/color_management.html" target="_blank" rel="noopener">Color Management</a>, Blender
			
 
				+		</li>
			
 
				+	</ul>
			
 
				+
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/docs/manual/pt-br/introduction/Creating-a-scene.html
+++ b/docs/manual/pt-br/introduction/Creating-a-scene.html
@@ -0,0 +1,165 @@
 
				+<!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 uma cena</h1>
			
 
				+
			
 
				+		<p>O objetivo dessa seção é dar uma breve introdução ao three.js. Nós iremos começar configurando uma cena (scene) com um cubo giratório. Um exemplo é apresentado no final dessa página, caso você precise de ajuda.</p>
			
 
				+
			
 
				+		<h2>Antes de começar</h2>
			
 
				+
			
 
				+		<p>Antes de começar usar o three.js, você precisa de algum lugar para mostrá-lo. Salve o HTML abaixo em um arquivo no seu computador, junto com uma cópia do [link:https://threejs.org/build/three.js three.js] na pasta js/, e abra o arquivo no navegador.</p>
			
 
				+
			
 
				+		<code>
			
 
				+		&lt;!DOCTYPE html&gt;
			
 
				+		&lt;html&gt;
			
 
				+			&lt;head&gt;
			
 
				+				&lt;meta charset="utf-8"&gt;
			
 
				+				&lt;title&gt;My first three.js app&lt;/title&gt;
			
 
				+				&lt;style&gt;
			
 
				+					body { margin: 0; }
			
 
				+				&lt;/style&gt;
			
 
				+			&lt;/head&gt;
			
 
				+			&lt;body&gt;
			
 
				+				&lt;script src="js/three.js"&gt;&lt;/script&gt;
			
 
				+				&lt;script&gt;
			
 
				+					// Our Javascript will go here.
			
 
				+				&lt;/script&gt;
			
 
				+			&lt;/body&gt;
			
 
				+		&lt;/html&gt;
			
 
				+		</code>
			
 
				+
			
 
				+		<p>Isso é tudo. Todo o código abaixo vai dentro da tag &lt;script&gt; vazia.</p>
			
 
				+
			
 
				+		<h2>Criando a cena</h2>
			
 
				+
			
 
				+		<p>Para realmente ser capaz de exibir algum conteúdo com o three.js, nós precisamos de três coisas: cena (scene), câmera (camera) e renderizador (renderer), para que possamos então renderizar a cena com a câmera.
			
 
				+		</p>
			
 
				+
			
 
				+		<code>
			
 
				+		const scene = new THREE.Scene();
			
 
				+		const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
			
 
				+
			
 
				+		const renderer = new THREE.WebGLRenderer();
			
 
				+		renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				+		document.body.appendChild( renderer.domElement );
			
 
				+		</code>
			
 
				+
			
 
				+		<p>Vamos tirar um momento para explicar o que está acontecendo aqui. Nós temos agora configurados a cena, nossa câmera e o renderizador.</p>
			
 
				+
			
 
				+		<p>Existem alguns diferentes tipos de câmera no three.js. Por enquanto usaremos a `PerspectiveCamera`.</p>
			
 
				+
			
 
				+		<p>O primeiro atributo é o `field of view`. FOV é a extensão da cena que é vista na tela em um dado momento. O valor está em graus.</p>
			
 
				+
			
 
				+		<p>O segundo atributo é o `aspect ratio`. Você quase sempre irá usar o comprimento do elemento dividido pela sua altura, ou você terá o mesmo resultado de quando reproduz filmes antigos em uma TV widescreen - a imagem parece esmagada.</p>
			
 
				+
			
 
				+		<p>Os próximos dois atributos são os planos de corte `near` e `far`. Isso significa que os objetos mais distantes da câmera do que o valor `far` ou mais próximos que o valor `near` não serão renderizados. Você não precisa se preocupar com isso agora, mas pode ser necessário usar outros valores em seus apps para obter uma melhor performance.</p>
			
 
				+
			
 
				+		<p>Em seguida temos o renderizador. É aqui que a mágica acontece. Além do WebGLRenderer que usamos aqui, three.js vem com alguns outros, frequentemente usados como substitutos para usuários com navegadores antigos ou para aqueles que não possuem suporte para WebGL por algum motivo.</p>
			
 
				+
			
 
				+		<p>Além da criação da intância do renderizador, nós também precisamos configurar o tamanho em que queremos renderizar nossa aplicação. É uma boa ideia usar o comprimento e a altura da área que queremos preencher com nossa aplicação - no nosso caso, o comprimento e altura da janela do navegador. Para aplicativos de alto desempenho, você pode fornecer valores menores para o `setSize`, como `window.innerWidth/2` e `window.innerHeight/2`, o que fará com que a aplicação seja renderizada no tamanho de um quarto do original.</p>
			
 
				+
			
 
				+		<p>Se você deseja manter o tamanho do seu aplicativo mas renderizá-lo em uma resolução mais baixa, você pode chamar o `setSize` passando false como `updateStyle` (o terceiro argumento). Por exemplo, `setSize(window.innerWidth/2, window.innerHeight/2, false)` irá renderizar sua aplicação na metade da resolução, já que seu elemento &lt;canvas&gt; tem 100% de comprimento e altura.</p>
			
 
				+
			
 
				+		<p>Por último mas não menos importante, nós adicionamos o elemento `renderer` ao nosso HTML. Este é o elemento &lt;canvas&gt; que o renderizador usa para exibir a cena para nós.</p>
			
 
				+
			
 
				+		<p><em>"Tudo bem, mas onde está aquele cubo que você prometeu?"</em>. Vamos adicioná-lo agora.</p>
			
 
				+
			
 
				+		<code>
			
 
				+		const geometry = new THREE.BoxGeometry( 1, 1, 1 );
			
 
				+		const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
			
 
				+		const cube = new THREE.Mesh( geometry, material );
			
 
				+		scene.add( cube );
			
 
				+
			
 
				+		camera.position.z = 5;
			
 
				+		</code>
			
 
				+
			
 
				+		<p>Para criar um cubo, nós precisamos de um `BoxGeometry`. Este é um objeto que contém todos os pontos (`vertices`) e preenchimento (`faces`) do cubo. Nós vamos explorar mais sobre isso no futuro.</p>
			
 
				+
			
 
				+		<p>Além da geometria, nós precisamos de um material para colorir. Three.js vem com vários materiais, mas vamos nos ater ao `MeshBasicMaterial` por enquanto. Todos os materiais têm um objeto de propriedades que serão aplicadas a eles. Para manter as coisas simples, forneceremos apenas um atributo de cor `0x00ff00`, que é verde. Isso funciona da mesma maneira que as cores no CSS ou no Photoshop (`hex colors`).</p>
			
 
				+
			
 
				+		<p>A terceira coisa que precisamos é de um `Mesh`. Um mesh é um objeto que pega a geometria e aplica um material a ela, para que então possamos inseri-lo em nossa cena e move-lo livremente.</p>
			
 
				+
			
 
				+		<p>Por padrão, quando nós chamamos `scene.add()`, o elemento que queremos adicionar será inserido nas coordenadas `(0,0,0)`. Isso faz com que a câmera e o cubo fiquem um dentro do outro. Para evitar isso, simplesmente movemos a câmera um pouco para fora.</p>
			
 
				+
			
 
				+		<h2>Renderizando a cena</h2>
			
 
				+
			
 
				+		<p>Se você copiou o código acima para o arquivo HTML criado anteriormente, você não será capaz de ver nada. Isso acontece porque ainda não estamos renderizando nada. Para isso, precisamos chamar um `render ou animate loop`.</p>
			
 
				+
			
 
				+		<code>
			
 
				+		function animate() {
			
 
				+			requestAnimationFrame( animate );
			
 
				+			renderer.render( scene, camera );
			
 
				+		}
			
 
				+		animate();
			
 
				+		</code>
			
 
				+
			
 
				+		<p>Isso criará um loop que fará com que o renderizador desenhe a cena novamente toda vez que a tela for atualizada (em uma tela típica, isso significa 60 vezes por segundo). Se você é novato em escrever jogos no navegador, pode perguntar <em>"por que não criamos um setInterval?"</em>. A questão é - nós poderíamos, mas `requestAnimationFrame` tem várias vantagens. Talvez a mais importante seja que ele pausa quando o usuário navega para outra aba do navegador, portanto, não desperdiçando seu precioso poder de processamento e vida útil da bateria.</p>
			
 
				+
			
 
				+		<h2>Animando o cubo</h2>
			
 
				+
			
 
				+		<p>Se você inseriu todo o código acima no arquivo que criamos no início, deve visualizar uma caixa verde. Vamos deixar isso tudo um pouco mais interessante rotacionando o cubo.
			
 
				+		</p>
			
 
				+
			
 
				+		<p>Adicione o seguinte trecho logo acima da chamada `renderer.render` na função `animate`:</p>
			
 
				+
			
 
				+		<code>
			
 
				+		cube.rotation.x += 0.01;
			
 
				+		cube.rotation.y += 0.01;
			
 
				+		</code>
			
 
				+
			
 
				+		<p>Isso será executado a cada quadro (normalmento 60 vezes por segundo), e dará ao cubo uma boa animação de rotação. Basicamente, quaquer coisa que você queira mover ou alterar enquanto a aplicação está sendo executada tem que passar pelo loop de animação. É claro que você pode chamar outras funções de lá para que não acabe com uma função `animate` com centenas de linhas.</p>
			
 
				+
			
 
				+		<h2>O resultado</h2>
			
 
				+		<p>Parabéns! Agora você concluiu seu primeiro aplicativo three.js. É simples, mas você tem que começar de algum lugar.</p>
			
 
				+
			
 
				+		<p>O código completo está disponível abaixo e como um [link:https://jsfiddle.net/fxurzeb4/ exemplo] editável. Brinque com ele para entender melhor como funciona.</p>
			
 
				+
			
 
				+		<code>
			
 
				+		&lt;!DOCTYPE html&gt;
			
 
				+		&lt;html&gt;
			
 
				+			&lt;head&gt;
			
 
				+				&lt;meta charset="utf-8"&gt;
			
 
				+				&lt;title&gt;My first three.js app&lt;/title&gt;
			
 
				+				&lt;style&gt;
			
 
				+					body { margin: 0; }
			
 
				+				&lt;/style&gt;
			
 
				+			&lt;/head&gt;
			
 
				+			&lt;body&gt;
			
 
				+				&lt;script src="js/three.js"&gt;&lt;/script&gt;
			
 
				+				&lt;script&gt;
			
 
				+					const scene = new THREE.Scene();
			
 
				+					const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
			
 
				+
			
 
				+					const renderer = new THREE.WebGLRenderer();
			
 
				+					renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				+					document.body.appendChild( renderer.domElement );
			
 
				+
			
 
				+					const geometry = new THREE.BoxGeometry( 1, 1, 1 );
			
 
				+					const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
			
 
				+					const cube = new THREE.Mesh( geometry, material );
			
 
				+					scene.add( cube );
			
 
				+
			
 
				+					camera.position.z = 5;
			
 
				+
			
 
				+					function animate() {
			
 
				+						requestAnimationFrame( animate );
			
 
				+
			
 
				+						cube.rotation.x += 0.01;
			
 
				+						cube.rotation.y += 0.01;
			
 
				+
			
 
				+						renderer.render( scene, camera );
			
 
				+					};
			
 
				+
			
 
				+					animate();
			
 
				+				&lt;/script&gt;
			
 
				+			&lt;/body&gt;
			
 
				+		&lt;/html&gt;
			
 
				+		</code>
			
 
				+	</body>
			
 
				+</html>
			
--- a/docs/manual/pt-br/introduction/Creating-text.html
+++ b/docs/manual/pt-br/introduction/Creating-text.html
@@ -0,0 +1,144 @@
 
				+<!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>
			
--- a/docs/manual/pt-br/introduction/Drawing-lines.html
+++ b/docs/manual/pt-br/introduction/Drawing-lines.html
@@ -0,0 +1,83 @@
 
				+<!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>Desenhando linhas</h1>
			
 
				+		<div>
			
 
				+			<p>
			
 
				+				Digamos que você queira desenhar uma linha ou um círculo, não um wireframe [page:Mesh].
			
 
				+				Primeiro precisamos configurar o [page:WebGLRenderer renderizador] (renderer), a [page:Scene cena] (scene) e 
			
 
				+				a câmera (camera) (veja a página Criando uma cena).
			
 
				+			</p>
			
 
				+
			
 
				+			<p>
			
 
				+				Aqui está o código que vamos usar:
			
 
				+			</p>
			
 
				+			<code>
			
 
				+const renderer = new THREE.WebGLRenderer();
			
 
				+renderer.setSize( window.innerWidth, window.innerHeight );
			
 
				+document.body.appendChild( renderer.domElement );
			
 
				+
			
 
				+const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 );
			
 
				+camera.position.set( 0, 0, 100 );
			
 
				+camera.lookAt( 0, 0, 0 );
			
 
				+
			
 
				+const scene = new THREE.Scene();
			
 
				+			</code>
			
 
				+
			
 
				+			<p>
			
 
				+				A próxima coisa que vamos fazer é definir um material. 
			
 
				+				Para linhas nós temos que usar [page:LineBasicMaterial] ou [page:LineDashedMaterial].
			
 
				+			</p>
			
 
				+			
			
 
				+			<code>
			
 
				+//create a blue LineBasicMaterial
			
 
				+const material = new THREE.LineBasicMaterial( { color: 0x0000ff } );
			
 
				+			</code>
			
 
				+
			
 
				+			<p>
			
 
				+				Depois do material, nós vamos precisar de uma geometria com alguns vértices:
			
 
				+			</p>
			
 
				+
			
 
				+			<code>
			
 
				+const points = [];
			
 
				+points.push( new THREE.Vector3( - 10, 0, 0 ) );
			
 
				+points.push( new THREE.Vector3( 0, 10, 0 ) );
			
 
				+points.push( new THREE.Vector3( 10, 0, 0 ) );
			
 
				+
			
 
				+const geometry = new THREE.BufferGeometry().setFromPoints( points );
			
 
				+			</code>
			
 
				+
			
 
				+			<p>
			
 
				+				Note que linhas são desenhadas entre cada par consecutivo de vértices, 
			
 
				+				mas não entre o primeiro e o último (a linha não é fechada).
			
 
				+			</p>
			
 
				+
			
 
				+			<p>
			
 
				+				Agora que nós temos os pontos para duas linhas e um material,
			
 
				+				podemos juntar tudo e formar uma linha
			
 
				+			</p>
			
 
				+			<code>
			
 
				+const line = new THREE.Line( geometry, material );
			
 
				+			</code>
			
 
				+
			
 
				+			<p>
			
 
				+				Tudo o que falta é adicioná-la na cena e chamar o [page:WebGLRenderer.render renderizador].
			
 
				+			</p>
			
 
				+
			
 
				+			<code>
			
 
				+scene.add( line );
			
 
				+renderer.render( scene, camera );
			
 
				+			</code>
			
 
				+
			
 
				+			<p>
			
 
				+			Agora você deve estar vendo uma seta apontando para cima, feita de duas linhas azuis.
			
 
				+			</p>
			
 
				+		</div>
			
 
				+	</body>
			
 
				+</html>
			
--- a/docs/manual/pt-br/introduction/FAQ.html
+++ b/docs/manual/pt-br/introduction/FAQ.html
@@ -0,0 +1,75 @@
 
				+<!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>FAQ</h1>
			
 
				+
			
 
				+		<h2>Qual formato de modelo 3D é melhor suportado?</h2>
			
 
				+		<div>
			
 
				+			<p>
			
 
				+				O formato recomendado para importar e exportar recursos é
			
 
				+				o glTF (GL Transmission Format). Isso porque o glTF é focado na entrega de recursos em 
			
 
				+				tempo de execução, é compacto para transmitir e rápido para carregar.
			
 
				+			</p>
			
 
				+			<p>
			
 
				+				O three.js também fornece loaders para muitos outros formatos populares como FBX, Collada ou OBJ.
			
 
				+				No entanto, primeiro você deve sempre tentar estabelecer um fluxo de trabalho baseado em glTF em seus projetos.
			
 
				+				Para obter mais informações, consulte [link:#manual/introduction/Loading-3D-models Carregando modelos 3D].
			
 
				+			</p>
			
 
				+		</div>
			
 
				+
			
 
				+		<h2>Por que existem meta tags de viewport nos exemplos?</h2>
			
 
				+		<div>
			
 
				+				<code>&lt;meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"&gt;</code>
			
 
				+
			
 
				+				<p>
			
 
				+					Essas tags controlam o tamanho e a escala da janela de visualização para navegadores móveis
			
 
				+					(onde o conteúdo da página pode ser renderizado em tamanho diferente da janela de visualização visível).
			
 
				+				</p>
			
 
				+
			
 
				+				<p>[link:https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html Safari: Using the Viewport]</p>
			
 
				+
			
 
				+				<p>[link:https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag MDN: Using the viewport meta tag]</p>
			
 
				+		</div>
			
 
				+
			
 
				+		<h2>Como a escala da cena pode ser preservada no redimensionamento?</h2>
			
 
				+		<p>
			
 
				+			Queremos que todos os objetos, independentemente da sua distância da câmera, apareçam do mesmo tamanho,
			
 
				+			mesmo que a janela seja redimensionada.
			
 
				+
			
 
				+			A equação chave para resolver isso é esta fórmula para a altura visível dada uma determinada distância da câmera:
			
 
				+
			
 
				+			<code>
			
 
				+visible_height = 2 * Math.tan( ( Math.PI / 180 ) * camera.fov / 2 ) * distance_from_camera;
			
 
				+			</code>
			
 
				+			Se aumentarmos a altura da janela por uma certa porcentagem, o que queremos é que a altura visível em todas as distâncias
			
 
				+			aumentem na mesma porcentagem.
			
 
				+
			
 
				+			Isso não pode ser feito alterando a posição da câmera. Em vez disso, você tem que mudar 
			
 
				+			o campo de visão da câmera (FOV).
			
 
				+			[link:http://jsfiddle.net/Q4Jpu/ Exemplo].
			
 
				+		</p>
			
 
				+
			
 
				+		<h2>Por que parte do meu objeto está invisível?</h2>
			
 
				+		<p>
			
 
				+			Isso pode acontecer por causa do corte de faces. As faces têm uma orientação que decide qual lado
			
 
				+			é qual. E o corte remove a parte traseira em circunstâncias normais.
			
 
				+			Para verificar se este é o seu problema, altere o lado do material para THREE.DoubleSide.
			
 
				+
			
 
				+			<code>material.side = THREE.DoubleSide</code>
			
 
				+		</p>
			
 
				+
			
 
				+		<h2>
			
 
				+			Por que o three.js às vezes retorna resultados estranhos para entradas inválidas?
			
 
				+		</h2>
			
 
				+		<p>
			
 
				+			Por motivos de desempenho, o three.js não valida entradas na maioria dos casos. 
			
 
				+			É responsabilidade do seu aplicativo garantir que todas as entradas sejam válidas.
			
 
				+		</p>
			
 
				+	</body>
			
 
				+</html>
			
--- a/docs/manual/pt-br/introduction/How-to-create-VR-content.html
+++ b/docs/manual/pt-br/introduction/How-to-create-VR-content.html
@@ -0,0 +1,81 @@
 
				+<!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>Como criar conteúdo de VR</h1>
			
 
				+
			
 
				+	<p>
			
 
				+		Este guia fornece uma breve visão geral dos componentes básicos de uma aplicação de VR baseada na web
			
 
				+		feita com three.js.
			
 
				+	</p>
			
 
				+
			
 
				+	<h2>Workflow</h2>
			
 
				+
			
 
				+	<p>
			
 
				+		Primeiro, você deve incluir [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/webxr/VRButton.js VRButton.js]
			
 
				+		em seu projeto.
			
 
				+	</p>
			
 
				+
			
 
				+	<code>
			
 
				+import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
			
 
				+	</code>
			
 
				+
			
 
				+	<p>
			
 
				+		*VRButton.createButton()* faz duas coisas importantes: Cria um botão que indica
			
 
				+		compatibilidade com VR. Além disso, inicia uma sessão de VR se o usuário ativar o botão. A única coisa que você tem
			
 
				+		fazer é adicionar a seguinte linha de código ao seu aplicativo.
			
 
				+	</p>
			
 
				+
			
 
				+	<code>
			
 
				+document.body.appendChild( VRButton.createButton( renderer ) );
			
 
				+	</code>
			
 
				+
			
 
				+	<p>
			
 
				+		Em seguida, você deve informar sua instância do `WebGLRenderer` para habilitar a renderização XR.
			
 
				+	</p>
			
 
				+
			
 
				+	<code>
			
 
				+renderer.xr.enabled = true;
			
 
				+	</code>
			
 
				+
			
 
				+	<p>
			
 
				+		Finalmente, você precisa ajustar seu loop de animação, pois não podemos usar nossa conhecida função
			
 
				+		*window.requestAnimationFrame()*. Para projetos de VR usamos [page:WebGLRenderer.setAnimationLoop setAnimationLoop].
			
 
				+		O código mínimo fica assim:
			
 
				+	</p>
			
 
				+
			
 
				+	<code>
			
 
				+renderer.setAnimationLoop( function () {
			
 
				+
			
 
				+	renderer.render( scene, camera );
			
 
				+
			
 
				+} );
			
 
				+	</code>
			
 
				+
			
 
				+	<h2>Próximos Passos</h2>
			
 
				+
			
 
				+	<p>
			
 
				+		Dê uma olhada em um dos exemplos oficiais de WebVR para ver esse workflow em ação<br /><br />
			
 
				+
			
 
				+		[example:webxr_vr_ballshooter WebXR / VR / ballshooter]<br />
			
 
				+		[example:webxr_vr_cubes WebXR / VR / cubes]<br />
			
 
				+		[example:webxr_vr_dragging WebXR / VR / dragging]<br />
			
 
				+		[example:webxr_vr_paint WebXR / VR / paint]<br />
			
 
				+		[example:webxr_vr_panorama_depth WebXR / VR / panorama_depth]<br />
			
 
				+		[example:webxr_vr_panorama WebXR / VR / panorama]<br />
			
 
				+		[example:webxr_vr_rollercoaster WebXR / VR / rollercoaster]<br />
			
 
				+		[example:webxr_vr_sandbox WebXR / VR / sandbox]<br />
			
 
				+		[example:webxr_vr_sculpt WebXR / VR / sculpt]<br />
			
 
				+		[example:webxr_vr_video WebXR / VR / video]
			
 
				+	</p>
			
 
				+
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/docs/manual/pt-br/introduction/How-to-dispose-of-objects.html
+++ b/docs/manual/pt-br/introduction/How-to-dispose-of-objects.html
@@ -0,0 +1,124 @@
 
				+<!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>Como descartar objetos</h1>
			
 
				+
			
 
				+	<p>
			
 
				+		Um aspecto importante para aumentar o desempenho e evitar vazamentos de memória em sua aplicação é o descarte de entidades da biblioteca não utilizadas.
			
 
				+		Sempre que você cria uma instância do tipo *three.js*, você aloca uma certa quantidade de memória. No entanto, o *three.js* cria para objetos específicos,
			
 
				+		como geometrias ou materiais, entidades relacionadas ao WebGL como buffers ou programas de shader que são necessários para renderização. É importante
			
 
				+		destacar que esses objetos não são liberados automaticamente. Em vez disso, o aplicativo precisa usar uma API especial para liberar esses recursos.
			
 
				+		Este guia fornece uma breve visão geral sobre como essa API é utilizada e quais objetos são relevantes nesse contexto.
			
 
				+	</p>
			
 
				+
			
 
				+	<h2>Geometrias (Geometries)</h2>
			
 
				+
			
 
				+	<p>
			
 
				+		Uma geometria geralmente representa informações de vértices definidas como uma coleção de atributos. *three.js* cria internamente um objeto do tipo [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLBuffer WebGLBuffer]
			
 
				+		para cada atributo. Essas entidades são excluídas apenas se você chamar [page:BufferGeometry.dispose](). Se uma geometria se tornar obsoleta em seu aplicativo,
			
 
				+		execute o método para liberar todos os recursos relacionados.
			
 
				+	</p>
			
 
				+
			
 
				+	<h2>Materiais (Materials)</h2>
			
 
				+
			
 
				+	<p>
			
 
				+		Um material define como os objetos são renderizados. *three.js* usa as informações de uma definição de material para construir um shader para a renderização.
			
 
				+		Os shaders só podem ser excluídos se o respectivo material for descartado. Por motivos de desempenho, o *three.js* tenta reutilizar
			
 
				+		shaders, se possível. Portanto, um shader só é excluído se todos os materiais relacionados forem descartados. Você pode indicar o descarte de um material
			
 
				+		executando [page:Material.dispose]().
			
 
				+	</p>
			
 
				+
			
 
				+	<h2>Texturas (Textures)</h2>
			
 
				+
			
 
				+	<p>
			
 
				+		O descarte de um material não afeta as texturas. Eles são manuseados separadamente, pois uma única textura pode ser usada por vários materiais ao mesmo tempo.
			
 
				+		Sempre que você cria uma instância de [page:Texture], o three.js cria internamente uma instância de [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLTexture WebGLTexture].
			
 
				+		Semelhante aos buffers, este objeto só pode ser excluído chamando [page:Texture.dispose]().
			
 
				+	</p>
			
 
				+
			
 
				+	<p>
			
 
				+		Se você usar uma `ImageBitmap` como fonte de dados da textura, você deve chamar [link:https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmap/close ImageBitmap.close]() no nível da aplicação para descartar todos os recursos relacionados à CPU.
			
 
				+		Uma chamada automatizada de `ImageBitmap.close()` em [page:Texture.dispose]() não é possível, pois o bitmap da imagem se torna inutilizável e o mecanismo não tem como saber se o bitmap da imagem é usado em outro lugar.
			
 
				+	</p>
			
 
				+
			
 
				+	<h2>Render Targets</h2>
			
 
				+
			
 
				+	<p>
			
 
				+		Objetos do tipo [page:WebGLRenderTarget] não apenas alocam uma instância de [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLTexture WebGLTexture], mas também
			
 
				+		[link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLFramebuffer WebGLFramebuffer]s e [link:https://developer.mozilla.org/en-US/docs/Web/API WebGLRenderbuffer]s
			
 
				+		para realizar render targets personalizados. Esses objetos são desalocados apenas executando [page:WebGLRenderTarget.dispose]().
			
 
				+	</p>
			
 
				+
			
 
				+	<h2>Diversos</h2>
			
 
				+
			
 
				+	<p>
			
 
				+		Existem outras classes da pasta de exemplos como controles ou passes de pós-processamento que fornecem métodos `dispose()` para remover listeners de eventos internos
			
 
				+		ou renderizar targets. Em geral, é recomendado verificar a API ou a documentação de uma classe e procurar o método `dispose()`. Se existir, você deve usá-lo ao limpar as coisas.
			
 
				+	</p>
			
 
				+
			
 
				+	<h2>FAQ</h2>
			
 
				+
			
 
				+	<h3>Por que o *three.js* não pode descartar objetos automaticamente?</h3>
			
 
				+
			
 
				+	<p>
			
 
				+		Esta pergunta foi feita muitas vezes pela comunidade, por isso é importante esclarecer este assunto. O fato é que o *three.js* não conhece o tempo de vida ou o escopo
			
 
				+		das entidades criadas pelo usuário, como geometrias ou materiais. Isso é responsabilidade do aplicativo. Por exemplo, mesmo que um material não seja usado atualmente para renderização,
			
 
				+		ele pode ser necessário no próximo quadro. Portanto, se o aplicativo decidir que um determinado objeto pode ser excluído, ele deve notificar a engine chamando o respectivo
			
 
				+		método `dispose()`.
			
 
				+	</p>
			
 
				+
			
 
				+	<h3>A remoção de um mesh da cena também descarta sua geometria e material?</h3>
			
 
				+
			
 
				+	<p>
			
 
				+		Não, você precisa descartar explicitamente a geometria e o material via *dispose()*. Tenha em mente que geometrias e materiais podem ser compartilhados entre objetos 3D como meshes.
			
 
				+	</p>
			
 
				+
			
 
				+	<h3>*three.js* fornece informações sobre a quantidade de objetos em cache?</h3>
			
 
				+
			
 
				+	<p>
			
 
				+		Sim. É possível avaliar [page:WebGLRenderer.info], uma propriedade especial do renderizador (renderer) com uma série de informações estatísticas sobre a memória da placa gráfica
			
 
				+		e o processo de renderização. Entre outras coisas, ele informa quantas texturas, geometrias e shaders são armazenados internamente. Se você notar problemas de desempenho
			
 
				+		em seu aplicativo, é uma boa ideia depurar essa propriedade para identificar facilmente um vazamento de memória.
			
 
				+	</p>
			
 
				+
			
 
				+	<h3>O que acontece quando você chama `dispose()` em uma textura, mas a imagem ainda não foi carregada?</h3>
			
 
				+
			
 
				+	<p>
			
 
				+		Os recursos internos para uma textura são alocados apenas se a imagem estiver totalmente carregada. Se você descartar uma textura antes de carregar a imagem,
			
 
				+		nada acontece. Nenhum recurso foi alocado, portanto, também não há necessidade de limpeza.
			
 
				+	</p>
			
 
				+
			
 
				+	<h3>O que acontece quando eu chamo `dispose()` e uso o respectivo objeto posteriormente?</h3>
			
 
				+
			
 
				+	<p>
			
 
				+		Os recursos internos excluídos serão criados novamente pela engine. Portanto, nenhum erro em tempo de execução ocorrerá, mas você poderá notar um impacto negativo no desempenho do quadro atual,
			
 
				+		especialmente quando shaders precisam ser compilados.
			
 
				+	</p>
			
 
				+
			
 
				+	<h3>Como devo gerenciar objetos *three.js* em minha aplicação? Quando eu sei como descartar as coisas?</h3>
			
 
				+
			
 
				+	<p>
			
 
				+		Em geral, não existe uma recomendação definitiva para isso. Depende muito do caso específico de uso quando será mais apropriado chamar `dispose()`. É importante destacar que
			
 
				+		nem sempre é necessário descartar objetos o tempo todo. Um bom exemplo disso é um jogo que consiste de vários níveis. Um bom momento para descarte de objetos é quando
			
 
				+		ocorre uma mudança de nível. A aplicação pode percorrer a cena antiga e descartar todos os materiais, geometrias e texturas obsoletos. Como mencionado na seção anterior, não
			
 
				+		ocorrerá um erro em tempo de execução se você descartar um objeto que ainda está em uso. A pior coisa que pode acontecer é a queda de desempenho para um único quadro.
			
 
				+	</p>
			
 
				+
			
 
				+	<h2>Exemplos que demonstram o uso de dispose()</h2>
			
 
				+
			
 
				+	<p>
			
 
				+		[example:webgl_test_memory WebGL / test / memory]<br />
			
 
				+		[example:webgl_test_memory2 WebGL / test / memory2]<br />
			
 
				+	</p>
			
 
				+
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/docs/manual/pt-br/introduction/How-to-run-things-locally.html
+++ b/docs/manual/pt-br/introduction/How-to-run-things-locally.html
@@ -0,0 +1,186 @@
 
				+<!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>Como executar localmente</h1>
			
 
				+
			
 
				+		<p>
			
 
				+			Se você usar apenas geometrias procedurais e não carregar nenhuma textura, 
			
 
				+			as páginas web devem funcionar direto do sistema de arquivos, bastando clicar duas vezes 
			
 
				+			no arquivo HTML em um gerenciador de arquivos para então funcionar direto no navegador (você verá <em>file:///yourFile.html</em> na barra de endereço).
			
 
				+		</p>
			
 
				+
			
 
				+		<h2>Conteúdo carregado de arquivos externos</h2>
			
 
				+
			
 
				+		<div>
			
 
				+			<p>
			
 
				+				Se você carregar modelos ou texturas de arquivos externos, devido a [link:http://en.wikipedia.org/wiki/Same_origin_policy same origin policy] 
			
 
				+				dos navegadores, o carregamento de um sistema de arquivos falhará com uma exceção de segurança.
			
 
				+			</p>
			
 
				+
			
 
				+			<p>
			
 
				+				Para resolver isso, execute os arquivos de um servidor web local. Isso permitirá acessar a página por:
			
 
				+			</p>
			
 
				+
			
 
				+			<p>
			
 
				+				<code>http://localhost/yourFile.html</code>
			
 
				+			</p>
			
 
				+
			
 
				+			<p>
			
 
				+				Embora também seja possível alterar as configurações de segurança do navegador ao invés de executar 
			
 
				+				um servidor local, não recomendamos essa abordagem. Isso pode abrir seu dispositivo para vulnerabilidades, 
			
 
				+				se o mesmo navegador é usado para navegação regular na web. O uso de um servidor local é uma prática padrão 
			
 
				+				em desenvolvimento web e explicamos abaixo como instalar e usar um servidor local.
			
 
				+			</p>
			
 
				+		</div>
			
 
				+
			
 
				+
			
 
				+		<h2>Rodando um servidor local</h2>
			
 
				+		<div>
			
 
				+			<p>
			
 
				+				Muitas linguagens de programação têm servidores HTTP simples embutidos. Eles não são tão 
			
 
				+				completos quanto servidores de produção como o [link:https://www.apache.org/ Apache] ou o 
			
 
				+				[link:https://nginx.org NGINX], no entanto devem ser suficientes para testar sua aplicação three.js.
			
 
				+			</p>
			
 
				+
			
 
				+			<h3>Plugins para editores populares de código</h3>
			
 
				+			<div>
			
 
				+				<p>
			
 
				+					Alguns editores de código tem plugins que irão rodar um servidor simples.
			
 
				+				</p>
			
 
				+				<ul>
			
 
				+					<li>[link:https://marketplace.visualstudio.com/items?itemName=yandeu.five-server Five Server] para Visual Studio Code.</li>
			
 
				+					<li>[link:https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer Live Server] para Visual Studio Code.</li>
			
 
				+					<li>[link:https://atom.io/packages/atom-live-server Live Server] para Atom.</li>
			
 
				+				</ul>
			
 
				+			</div>
			
 
				+
			
 
				+			<h3>Servez</h3>
			
 
				+			<div>
			
 
				+				<p>
			
 
				+					[link:https://greggman.github.io/servez Servez] é um servidor simples com uma interface gráfica.
			
 
				+				</p>
			
 
				+			</div>
			
 
				+
			
 
				+			<h3>Node.js five-server</h3>
			
 
				+			<div>
			
 
				+				<p>
			
 
				+					Servidor de desenvolvimento com live reload. Para instalar:
			
 
				+				</p>
			
 
				+				<code>
			
 
				+# Remove live-server (if you have it)
			
 
				+npm -g rm live-server
			
 
				+
			
 
				+# Install five-server
			
 
				+npm -g i five-server
			
 
				+
			
 
				+# Update five-server (from time to time)
			
 
				+npm -g i five-server@latest
			
 
				+				</code>
			
 
				+
			
 
				+				<p>Para executar (do seu diretório local):</p>
			
 
				+				<code>five-server . -p 8000</code>
			
 
				+			</div>
			
 
				+
			
 
				+			<h3>Node.js http-server</h3>
			
 
				+			<div>
			
 
				+				<p>
			
 
				+					O Node.js tem um pacote simples de um servidor HTTP. Para instalar:
			
 
				+				</p>
			
 
				+				<code>npm install http-server -g</code>
			
 
				+
			
 
				+				<p>Para executar (do seu diretório local):</p>
			
 
				+				<code>http-server . -p 8000</code>
			
 
				+			</div>
			
 
				+
			
 
				+			<h3>Servidor Python</h3>
			
 
				+			<div>
			
 
				+				<p>
			
 
				+					Se você tem [link:http://python.org/ Python] instalado, deve ser suficiente para 
			
 
				+					executar esse comando (do seu diretório de trabalho):
			
 
				+				</p>
			
 
				+				<code>
			
 
				+//Python 2.x
			
 
				+python -m SimpleHTTPServer
			
 
				+			
			
 
				+//Python 3.x
			
 
				+python -m http.server
			
 
				+				</code>
			
 
				+
			
 
				+				<p>Isso vai servir os arquivos do diretório atual para localhost na porta 8000, 
			
 
				+					isto é, na barra de endereço digite:
			
 
				+				</p>
			
 
				+
			
 
				+				<code>http://localhost:8000/</code>
			
 
				+			</div>
			
 
				+
			
 
				+			<h3>Servidor Ruby</h3>
			
 
				+			<div>
			
 
				+				<p>
			
 
				+					Se você tem Ruby instalado, você poder ter o mesmo resultado executando:
			
 
				+				</p>
			
 
				+				<code>
			
 
				+					ruby -r webrick -e "s = WEBrick::HTTPServer.new(:Port => 8000, :DocumentRoot => Dir.pwd); trap('INT') { s.shutdown }; s.start"
			
 
				+				</code>
			
 
				+			</div>
			
 
				+
			
 
				+			<h3>Servidor PHP</h3>
			
 
				+			<div>
			
 
				+				<p>PHP também tem um servidor web embutido, começando com php 5.4.0:</p>
			
 
				+				<code>php -S localhost:8000</code>
			
 
				+			</div>
			
 
				+
			
 
				+			<h3>Lighttpd</h3>
			
 
				+			<div>
			
 
				+				<p>
			
 
				+					Lighttpd é um servidor web de uso geral muito leve. Abordaremos a instalação no OSX 
			
 
				+					com HomeBrew aqui. Ao contrário dos outros servidores discutidos, Lighttpd é um servidor 
			
 
				+					completo de produção.
			
 
				+				</p>
			
 
				+
			
 
				+				<ol>
			
 
				+					<li>
			
 
				+						Instale via homebrew
			
 
				+						<code>brew install lighttpd</code>
			
 
				+					</li>
			
 
				+					<li>
			
 
				+						Crie um arquivo de configuração chamado lighttpd.conf no diretório onde você irá executar 
			
 
				+						o servidor web. Um exemplo está [link:http://redmine.lighttpd.net/projects/lighttpd/wiki/TutorialConfiguration aqui].
			
 
				+					 </li>
			
 
				+					<li>
			
 
				+						No arquivo conf, mude o server.document-root para o diretório do qual você quer servir os arquivos.
			
 
				+					</li>
			
 
				+					<li>
			
 
				+						Comece com
			
 
				+						<code>lighttpd -f lighttpd.conf</code>
			
 
				+					</li>
			
 
				+					<li>
			
 
				+						Navegue até http://localhost:8000/ e ele servirá os arquivos estáticos do diretório que você 
			
 
				+						escolheu.
			
 
				+					</li>
			
 
				+				</ol>
			
 
				+			</div>
			
 
				+			<h3>IIS</h3>
			
 
				+			<div>
			
 
				+				<p>
			
 
				+					Se você estiver usando o Microsoft IIS como servidor web. Por favor adicione
			
 
				+					 configurações de tipo MIME em relação à extensão .fbx antes de carregar.
			
 
				+				</p>
			
 
				+				<code>File name extension: fbx        MIME Type: text/plain</code>
			
 
				+				<p>
			
 
				+					Por padrão, o IIS bloqueia downloads de arquivos .fbx e .obj. Você tem que 
			
 
				+					configurar o IIS para habilitar que esse tipo de arquivo possa ser baixado.
			
 
				+				</p>
			
 
				+			</div>
			
 
				+			<p>
			
 
				+				Outras alternativas simples são [link:http://stackoverflow.com/q/12905426/24874 discutidas aqui] no StackOverflow.
			
 
				+			</p>
			
 
				+		</div>
			
 
				+
			
 
				+	</body>
			
 
				+</html>
			
--- a/docs/manual/pt-br/introduction/How-to-update-things.html
+++ b/docs/manual/pt-br/introduction/How-to-update-things.html
@@ -0,0 +1,259 @@
 
				+<!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>Como atualizar as coisas</h1>
			
 
				+		<div>
			
 
				+			<p>Todos os objetos, por padrão, atualizam automaticamente suas matrizes se
			
 
				+			forem adicionados à cena (scene) dessa forma</p>
			
 
				+			<code>
			
 
				+const object = new THREE.Object3D();
			
 
				+scene.add( object );
			
 
				+			</code>
			
 
				+			ou se eles são filhos de outro objeto que foi adicionado à cena:
			
 
				+			<code>
			
 
				+const object1 = new THREE.Object3D();
			
 
				+const object2 = new THREE.Object3D();
			
 
				+
			
 
				+object1.add( object2 );
			
 
				+scene.add( object1 ); //object1 and object2 will automatically update their matrices
			
 
				+			</code>
			
 
				+		</div>
			
 
				+
			
 
				+		<p>
			
 
				+			No entanto, se você sabe que o objeto será estático, pode desativar este recurso e atualizar
			
 
				+			a matriz de transformação manualmente apenas quando necessário.
			
 
				+		</p>
			
 
				+
			
 
				+		<code>
			
 
				+object.matrixAutoUpdate = false;
			
 
				+object.updateMatrix();
			
 
				+		</code>
			
 
				+
			
 
				+		<h2>BufferGeometry</h2>
			
 
				+		<div>
			
 
				+			<p>
			
 
				+				BufferGeometries armazenam informações (tais como posições de vértice, índice de faces, normais, cores,
			
 
				+				UVs, e quaisquer outros atributos personalizados) em [page:BufferAttribute buffers] - isto é,
			
 
				+				[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays arrays tipados].
			
 
				+				Isso os torna geralmente mais rápidos do que os Geometries padrão, ao custo de serem um pouco mais difíceis de
			
 
				+				trabalhar.
			
 
				+			</p>
			
 
				+			<p>
			
 
				+				Com relação à atualização dos BufferGeometries, o mais importante é entender que
			
 
				+				você não pode redimensionar buffers (isso é muito custoso, sendo basicamente o equivalente a criar uma nova geometria).
			
 
				+				No entanto, você pode atualizar o conteúdo dos buffers.
			
 
				+			</p>
			
 
				+			<p>
			
 
				+				Isso significa que se você sabe que um atributo do seu BufferGeometry vai crescer, digamos o número de vértices,
			
 
				+				você deve pré-alocar um buffer grande o suficiente para conter quaisquer novos vértices que possam ser criados. 
			
 
				+				É claro, isso também significa que haverá um tamanho máximo para o seu BufferGeometry - 
			
 
				+				não há como criar um BufferGeometry que possa ser estendido de forma eficiente indefinidamente.
			
 
				+			</p>
			
 
				+			<p>
			
 
				+				Usaremos o exemplo de uma linha que é estendida em tempo de renderização. Vamos alocar espaço
			
 
				+				no buffer para 500 vértices, mas desenhando apenas dois primeiro, usando [page:BufferGeometry.drawRange].
			
 
				+			</p>
			
 
				+			<code>
			
 
				+const MAX_POINTS = 500;
			
 
				+
			
 
				+// geometry
			
 
				+const geometry = new THREE.BufferGeometry();
			
 
				+
			
 
				+// attributes
			
 
				+const positions = new Float32Array( MAX_POINTS * 3 ); // 3 vertices per point
			
 
				+geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
			
 
				+
			
 
				+// draw range
			
 
				+const drawCount = 2; // draw the first 2 points, only
			
 
				+geometry.setDrawRange( 0, drawCount );
			
 
				+
			
 
				+// material
			
 
				+const material = new THREE.LineBasicMaterial( { color: 0xff0000 } );
			
 
				+
			
 
				+// line
			
 
				+const line = new THREE.Line( geometry, material );
			
 
				+scene.add( line );
			
 
				+			</code>
			
 
				+		 	<p>
			
 
				+				Em seguida, adicionaremos aleatoriamente pontos à linha usando um padrão como:
			
 
				+			</p>
			
 
				+			<code>
			
 
				+const positions = line.geometry.attributes.position.array;
			
 
				+
			
 
				+let x, y, z, index;
			
 
				+x = y = z = index = 0;
			
 
				+
			
 
				+for ( let i = 0, l = MAX_POINTS; i < l; i ++ ) {
			
 
				+
			
 
				+    positions[ index ++ ] = x;
			
 
				+    positions[ index ++ ] = y;
			
 
				+    positions[ index ++ ] = z;
			
 
				+
			
 
				+    x += ( Math.random() - 0.5 ) * 30;
			
 
				+    y += ( Math.random() - 0.5 ) * 30;
			
 
				+    z += ( Math.random() - 0.5 ) * 30;
			
 
				+
			
 
				+}
			
 
				+			</code>
			
 
				+			<p>
			
 
				+				Se você quiser alterar o <em>número de pontos</em> renderizados após a primeira renderização, faça o seguinte:
			
 
				+			</p>
			
 
				+			<code>
			
 
				+line.geometry.setDrawRange( 0, newValue );
			
 
				+			</code>
			
 
				+			<p>
			
 
				+				Se você deseja alterar os valores dos dados de posição após a primeira renderização, você precisa
			
 
				+				definir a propriedade needsUpdate assim:
			
 
				+			</p>
			
 
				+			<code>
			
 
				+line.geometry.attributes.position.needsUpdate = true; // required after the first render
			
 
				+			</code>
			
 
				+
			
 
				+			<p>
			
 
				+				Se você alterar os valores dos dados de posição após a renderização inicial, pode ser necessário recalcular
			
 
				+				os limites de volume para que outros recursos da engine, como view frustum culling ou helpers,
			
 
				+				funcionem corretamente
			
 
				+			</p>
			
 
				+			<code>
			
 
				+line.geometry.computeBoundingBox();
			
 
				+line.geometry.computeBoundingSphere();
			
 
				+			</code>
			
 
				+
			
 
				+			<p>
			
 
				+				[link:https://jsfiddle.net/t4m85pLr/1/ O fiddle] mostra uma linha animada que você pode adaptar ao seu caso de uso.
			
 
				+			</p>
			
 
				+
			
 
				+			<h3>Exemplos</h3>
			
 
				+
			
 
				+			<p>
			
 
				+				[example:webgl_custom_attributes WebGL / custom / attributes]<br />
			
 
				+				[example:webgl_buffergeometry_custom_attributes_particles WebGL / buffergeometry / custom / attributes / particles]
			
 
				+			</p>
			
 
				+
			
 
				+		</div>
			
 
				+
			
 
				+		<h2>Materiais (Materials)</h2>
			
 
				+		<div>
			
 
				+			<p>
			
 
				+				Todos os valores uniformes podem ser alterados livremente (por exemplo, cores, texturas, opacidade, etc),
			
 
				+				os valores são enviados para o shader a cada quadro.
			
 
				+			</p>
			
 
				+
			
 
				+			<p>
			
 
				+				Também os parâmetros relacionados ao GLstate podem mudar a qualquer momento
			
 
				+				(depthTest, blending, polygonOffset, etc).
			
 
				+			</p>
			
 
				+
			
 
				+			<p>
			
 
				+				As seguintes propriedades não podem ser alteradas facilmente em tempo de execução
			
 
				+				(uma vez que o material é renderizado pelo menos uma vez):
			
 
				+			</p>
			
 
				+			<ul>
			
 
				+				<li>números e tipos de uniformes</li>
			
 
				+				<li>presença ou não de
			
 
				+					<ul>
			
 
				+						<li>textura (texture)</li>
			
 
				+						<li>fog</li>
			
 
				+						<li>cores dos vértices (vertex colors)</li>
			
 
				+						<li>morphing</li>
			
 
				+						<li>shadow map</li>
			
 
				+						<li>alpha test</li>
			
 
				+						<li>transparent</li>
			
 
				+					</ul>
			
 
				+				</li>
			
 
				+			</ul>
			
 
				+
			
 
				+			<p>
			
 
				+				Mudanças nestas propriedades requerem a construção de um novo programa de shader. Você precisará definir</p>
			
 
				+			<code>material.needsUpdate = true</code>
			
 
				+
			
 
				+			<p>
			
 
				+				Tenha em mente que isso pode ser bastante lento e induzir lags na taxa de quadros (especialmente no Windows, pois a compilação do shader é mais lenta no DirectX do que no OpenGL).
			
 
				+			</p>
			
 
				+
			
 
				+			<p>
			
 
				+				Para uma experiência mais suave, você pode emular alterações nessas propriedades
			
 
				+				até certo ponto, por ter valores "fictícios" como luzes de intensidade zero, texturas brancas ou fog de densidade zero.
			
 
				+			</p>
			
 
				+
			
 
				+			<p>
			
 
				+				Você pode alterar livremente o material usado para partes da geometria,
			
 
				+				no entanto, você não pode alterar como um objeto é dividido em partes (de acordo com os materiais da face).
			
 
				+			</p>
			
 
				+
			
 
				+			<h3>Se você precisar ter diferentes configurações de materiais durante o tempo de execução:</h3>
			
 
				+			<p>
			
 
				+				Se o número de materiais / partes for pequeno, você pode pré-dividir o objeto
			
 
				+				de antemão (por exemplo, cabelo / rosto / corpo / roupa superior / calças para um humano,
			
 
				+				frente / laterais /topo / vidro / pneu / interior para um carro).
			
 
				+			</p>
			
 
				+
			
 
				+			<p>
			
 
				+				Se o número for grande (por exemplo, cada rosto pode ser potencialmente diferente),
			
 
				+				considere uma solução diferente, como usar atributos / texturas para produzir diferenças
			
 
				+				nos rostos.
			
 
				+			</p>
			
 
				+
			
 
				+			<h3>Exemplos</h3>
			
 
				+			<p>
			
 
				+				[example:webgl_materials_car WebGL / materials / car]<br />
			
 
				+				[example:webgl_postprocessing_dof WebGL / webgl_postprocessing / dof]
			
 
				+			</p>
			
 
				+		</div>
			
 
				+
			
 
				+
			
 
				+		<h2>Texturas</h2>
			
 
				+		<div>
			
 
				+			<p>
			
 
				+				Imagem, canvas, vídeo e dados de textura precisam ter a seguinte
			
 
				+				propriedade definida se eles forem alterados:
			
 
				+			</p>
			
 
				+			<code>
			
 
				+				texture.needsUpdate = true;
			
 
				+			</code>
			
 
				+			<p>Os alvos de renderização são atualizados automaticamente.</p>
			
 
				+
			
 
				+			<h3>Exemplos</h3>
			
 
				+			<p>
			
 
				+				[example:webgl_materials_video WebGL / materials / video]<br />
			
 
				+				[example:webgl_rtt WebGL / rtt]
			
 
				+			</p>
			
 
				+
			
 
				+		</div>
			
 
				+
			
 
				+
			
 
				+		<h2>Câmeras</h2>
			
 
				+		<div>
			
 
				+			<p>
			
 
				+				A posição e o alvo de uma câmera são atualizados automaticamente. Se você precisa mudar
			
 
				+			</p>
			
 
				+			<ul>
			
 
				+				<li>
			
 
				+					fov
			
 
				+				</li>
			
 
				+				<li>
			
 
				+					aspect
			
 
				+				</li>
			
 
				+				<li>
			
 
				+					near
			
 
				+				</li>
			
 
				+				<li>
			
 
				+					far
			
 
				+				</li>
			
 
				+			</ul>
			
 
				+			<p>	
			
 
				+				então você precisará recalcular a matriz de projeção:
			
 
				+			</p>
			
 
				+			<code>
			
 
				+camera.aspect = window.innerWidth / window.innerHeight;
			
 
				+camera.updateProjectionMatrix();
			
 
				+			</code>
			
 
				+		</div>
			
 
				+	</body>
			
 
				+</html>
			
--- a/docs/manual/pt-br/introduction/How-to-use-post-processing.html
+++ b/docs/manual/pt-br/introduction/How-to-use-post-processing.html
@@ -0,0 +1,111 @@
 
				+<!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>Como usar o pós-processamento</h1>
			
 
				+
			
 
				+		<p>
			
 
				+			Muitas aplicações three.js renderizam seus objetos 3D diretamente na tela. Às vezes, no entanto, você deseja aplicar um ou mais efeitos gráficos
			
 
				+			como Depth-Of-Field, Bloom, Film Grain ou vários tipos de Anti-aliasing.
			
 
				+ 
			
 
				+			O pós-processamento é uma abordagem amplamente utilizada para implementar tais efeitos. Primeiro, a cena é renderizada para um render target que representa 
			
 
				+			um buffer na memória da placa de vídeo. Na próxima etapa, um ou mais passos de pós-processamento aplicam filtros e efeitos ao buffer de imagem antes que ele seja renderizado para a tela.
			
 
				+		</p>
			
 
				+		<p>
			
 
				+			three.js fornece uma solução completa de pós-processamento via [page:EffectComposer] para implementar esse workflow.
			
 
				+		</p>
			
 
				+
			
 
				+		<h2>Workflow</h2>
			
 
				+
			
 
				+		<p>
			
 
				+			A primeira etapa do processo é importar todos os arquivos necessários do diretório de exemplos. Este guia assume que você está usando o
			
 
				+			[link:https://www.npmjs.com/package/three npm package] do three.js. Para nossa demonstração básica, precisamos dos seguintes arquivos.
			
 
				+		</p>
			
 
				+
			
 
				+		<code>
			
 
				+		import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
			
 
				+		import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
			
 
				+		import { GlitchPass } from 'three/examples/jsm/postprocessing/GlitchPass.js';
			
 
				+		</code>
			
 
				+
			
 
				+		<p>
			
 
				+			Depois que todos os arquivos forem importados com sucesso, podemos criar nosso composer passando uma instância de [page:WebGLRenderer].
			
 
				+		</p>
			
 
				+
			
 
				+		<code>
			
 
				+		const composer = new EffectComposer( renderer );
			
 
				+		</code>
			
 
				+
			
 
				+		<p>
			
 
				+			Ao usar um composer, é necessário alterar o loop de animação da aplicação. Em vez de chamar o método render de
			
 
				+			[page:WebGLRenderer], agora usamos a respectiva contraparte de [page:EffectComposer].
			
 
				+		</p>
			
 
				+
			
 
				+		<code>
			
 
				+		function animate() {
			
 
				+
			
 
				+			requestAnimationFrame( animate );
			
 
				+
			
 
				+			composer.render();
			
 
				+
			
 
				+		}
			
 
				+		</code>
			
 
				+
			
 
				+		<p>
			
 
				+			Nosso composer já está pronto para que seja possível configurar a cadeia de passos de pós-processamento. Esses passos são responsáveis por criar
			
 
				+			a saída visual final do aplicativo. Eles são processados na ordem de sua adição/inserção. Em nosso exemplo, a instância de `RenderPass`
			
 
				+			é executada primeiro e depois a instância de `GlitchPass`. A última passagem habilitada na cadeia é renderizada automaticamente na tela. A configuração
			
 
				+			dos passos fica assim:
			
 
				+		</p>
			
 
				+
			
 
				+		<code>
			
 
				+		const renderPass = new RenderPass( scene, camera );
			
 
				+		composer.addPass( renderPass );
			
 
				+
			
 
				+		const glitchPass = new GlitchPass();
			
 
				+		composer.addPass( glitchPass );
			
 
				+		</code>
			
 
				+
			
 
				+		<p>
			
 
				+			O `RenderPass` é normalmente colocado no início da cadeia para fornecer a cena renderizada como entrada para a próxima etapa de pós-processamento. No nosso caso,
			
 
				+			o `GlitchPass` usará esses dados de imagem para aplicar um efeito de glitch selvagem. Confira este [link:https://threejs.org/examples/webgl_postprocessing_glitch exemplo]
			
 
				+			para vê-lo em ação.
			
 
				+		</p>
			
 
				+
			
 
				+		<h2>Passes integrados</h2>
			
 
				+
			
 
				+		<p>
			
 
				+			Você pode usar uma ampla variedade de passos de pós-processamento predefinidos fornecidos pela engine. Estão localizados no diretório
			
 
				+			[link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/postprocessing postprocessing].
			
 
				+		</p>
			
 
				+
			
 
				+		<h2>Passos Personalizados</h2>
			
 
				+
			
 
				+		<p>
			
 
				+			Às vezes, você deseja escrever um shader de pós-processamento personalizado e incluí-lo na cadeia de passos de pós-processamento. Para este cenário,
			
 
				+			você pode utilizar o `ShaderPass`. Depois de importar o arquivo e seu shader personalizado, você pode usar o código a seguir para configurar o passo.
			
 
				+		</p>
			
 
				+
			
 
				+		<code>
			
 
				+		import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
			
 
				+		import { LuminosityShader } from 'three/examples/jsm/shaders/LuminosityShader.js';
			
 
				+
			
 
				+		// later in your init routine
			
 
				+
			
 
				+		const luminosityPass = new ShaderPass( LuminosityShader );
			
 
				+		composer.addPass( luminosityPass );
			
 
				+		</code>
			
 
				+
			
 
				+		<p>
			
 
				+			O repositório fornece um arquivo chamado [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/shaders/CopyShader.js CopyShader] que é um
			
 
				+			bom código inicial para seu próprio shader personalizado. `CopyShader` apenas copia o conteúdo da imagem do buffer de leitura do [page:EffectComposer]
			
 
				+			para seu buffer de gravação sem aplicar nenhum efeito.
			
 
				+		</p>
			
 
				+
			
 
				+	</body>
			
 
				+</html>
			
--- a/docs/manual/pt-br/introduction/Installation.html
+++ b/docs/manual/pt-br/introduction/Installation.html
@@ -0,0 +1,134 @@
 
				+<!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>Instalação</h1>
			
 
				+
			
 
				+		<p>Você pode instalar o three.js através do [link:https://www.npmjs.com/ npm] e modernas ferramentas de build ou começar rapidamente apenas com hospedagem estática ou um CDN. Para a maioria dos usuários, instalar pelo npm é a melhor opção.</p>
			
 
				+
			
 
				+		<p>Qualquer maneira que escolher, seja consistente e importe todos os arquivos na mesma versão da biblioteca. A mistura de arquivos de versões diferentes pode causar a inclusão de código duplicado ou até mesmo quebrar a aplicação de maneiras inesperadas.</p>
			
 
				+
			
 
				+		<p>Todos os métodos de instalação do three.js dependem dos ES modules (veja [link:https://eloquentjavascript.net/10_modules.html#h_hF2FmOVxw7 Eloquent JavaScript: ECMAScript Modules]), que permitem incluir somente as partes necessárias da biblioteca no projeto final.</p>
			
 
				+
			
 
				+		<h2>Instalar pelo npm</h2>
			
 
				+
			
 
				+		<p>
			
 
				+			Para instalar o módulo do npm do [link:https://www.npmjs.com/package/three three], abra uma janela do terminal na sua pasta do projeto e execute:
			
 
				+		</p>
			
 
				+
			
 
				+		<code>
			
 
				+		npm install three
			
 
				+		</code>
			
 
				+
			
 
				+		<p>
			
 
				+			O pacote será baixado e instalado. Então você estará pronto para importar no seu código:
			
 
				+		</p>
			
 
				+
			
 
				+		<code>
			
 
				+		// Option 1: Import the entire three.js core library.
			
 
				+		import * as THREE from 'three';
			
 
				+
			
 
				+		const scene = new THREE.Scene();
			
 
				+
			
 
				+
			
 
				+		// Option 2: Import just the parts you need.
			
 
				+		import { Scene } from 'three';
			
 
				+
			
 
				+		const scene = new Scene();
			
 
				+		</code>
			
 
				+
			
 
				+		<p>Ao instalar a partir do npm, você quase sempre usará algum tipo de [link:https://eloquentjavascript.net/10_modules.html#h_zWTXAU93DC ferramenta de build] para combinar todos os pacotes que seu projeto precisa em um único arquivo JavaScript. Embora alguns modernos empacotadores JavaScript possam ser usados com o three.js, a escolha mais popular é o [link:https://webpack.js.org/ webpack].</p>
			
 
				+
			
 
				+		<p>Nem todos os recursos são acessados diretamente pelo módulo <em>three</em>. Outras partes populares da biblioteca - tais como controls, loaders e post-processing effects - devem ser importados da subpasta [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm examples/jsm]. Para aprender mais, veja o <em>Exemplo</em> abaixo.</p>
			
 
				+
			
 
				+		<p>Aprenda mais sobre módulos do npm em [link:https://eloquentjavascript.net/20_node.html#h_J6hW/SmL/a Eloquent JavaScript: Installing with npm].</p>
			
 
				+
			
 
				+		<h2>Instalar através de CDN ou hospedagem estática</h2>
			
 
				+
			
 
				+		<p>A biblioteca three.js pode ser utilizada sem nenhum sistema de build, seja fazendo o upload dos arquivos para seu próprio servidor web ou usando um CDN existente. Como a biblioteca depende dos ES modules, qualquer script que faça referência a eles deve usar <em>type="module"</em> como mostrado abaixo. Também é necessário definir um mapa de importação que resolva a importação direta do `three`.</p>
			
 
				+
			
 
				+		<code>
			
 
				+		&lt;script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js">&lt;/script>
			
 
				+
			
 
				+		&lt;script type="importmap">
			
 
				+		  {
			
 
				+		    "imports": {
			
 
				+		      "three": "https://unpkg.com/three@&lt;version&gt;/build/three.module.js"
			
 
				+		    }
			
 
				+		  }
			
 
				+		&lt;/script>
			
 
				+
			
 
				+		&lt;script type="module">
			
 
				+
			
 
				+		  import * as THREE from 'three';
			
 
				+
			
 
				+		  const scene = new THREE.Scene();
			
 
				+
			
 
				+		&lt;/script>
			
 
				+		</code>
			
 
				+
			
 
				+		<p>
			
 
				+			Nem todos os recursos disponíveis são acessados diretamente através do módulo <em>three</em>. Outras partes populares da biblioteca - tais como controls, loaders e post-processing effects - devem ser importados da subpasta [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm examples/jsm]. Para aprender mais, veja o <em>Exemplo</em> abaixo.
			
 
				+		</p>
			
 
				+
			
 
				+		<p>
			
 
				+			Como os mapas de importação ainda não são suportados por todos os navegadores, é necessário adicionar o polyfill *es-module-shims.js*.
			
 
				+		</p>
			
 
				+
			
 
				+		<h2>Exemplos</h2>
			
 
				+
			
 
				+		<p>
			
 
				+			O núcleo do three.js está focado nos componentes mais importantes de uma engine 3D. Muitos outros componentes úteis - como controls, loaders e post-processing effects - fazem parte da pasta [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm examples/jsm]. Eles são chamados de "exemplos" porque embora você possa usá-los diretamente, eles também podem ser remixados e personalizados. Esses componentes são sempre mantidos em sincronia com a biblioteca principal, enquanto pacotes semelhantes de terceiros no npm são mantidos por pessoas diferentes e podem estar desatualizados.
			
 
				+		</p>
			
 
				+
			
 
				+		<p>
			
 
				+			Os exemplos não precisam ser <em>instalados</em> separadamente, mas precisam ser <em>importados</em> separadamente. Se o three.js foi instalado com npm, você pode carregar o componente [page:OrbitControls] com: 
			
 
				+		</p>
			
 
				+
			
 
				+		<code>
			
 
				+		import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
			
 
				+
			
 
				+		const controls = new OrbitControls( camera, renderer.domElement );
			
 
				+		</code>
			
 
				+
			
 
				+		<p>Se o three.js foi instalado de um CDN, use o mesmo CDN para instalar outros componentes:</p>
			
 
				+
			
 
				+		<code>
			
 
				+		&lt;script type="module">
			
 
				+
			
 
				+		  import { OrbitControls } from 'https://unpkg.com/three@&lt;version&gt;/examples/jsm/controls/OrbitControls.js';
			
 
				+
			
 
				+		  const controls = new OrbitControls( camera, renderer.domElement );
			
 
				+
			
 
				+		&lt;/script>
			
 
				+		</code>
			
 
				+
			
 
				+		<p>
			
 
				+			É importante que todos os arquivos utilizem a mesma versão. Não importe diferentes exemplos de diferentes versões, ou use exemplos de uma versão diferente que a própria biblioteca three.js.
			
 
				+		</p>
			
 
				+
			
 
				+		<h2>Compatibilidade</h2>
			
 
				+
			
 
				+		<h3>Importação CommonJS</h3>
			
 
				+
			
 
				+		<p>
			
 
				+			Embora a maioria dos bundlers JavaScript modernos atualmente suportem os ES modules por padrão, algumas ferramentas de build mais antigas podem não suportar. Nesses casos você provavelmente pode configurar o bundler para entender os ES modules: [link:http://browserify.org/ Browserify] precisa apenas do plugin [link:https://github.com/babel/babelify babelify], por exemplo.
			
 
				+		</p>
			
 
				+
			
 
				+		<h3>Node.js</h3>
			
 
				+
			
 
				+		<p>
			
 
				+			Como o three.js foi desenvolvido para a web, ele depende do navegador e das APIs DOM que nem sempre existem no Node.js. Alguns desses problemas podem ser resolvidos usando ferramentas como [link:https://github.com/stackgl/headless-gl headless-gl], ou substituindo componentes como [page:TextureLoader] por alternativas personalizadas. Outras APIs DOM podem ser profundamente entrelaçadas com o código que as utiliza, e serão mais difíceis de contornar. Aceitamos solicitações de pull simples e fáceis de manter para melhorar o suporte ao Node.js, mas recomendo abrir uma issue para discutir suas melhorias primeiro.
			
 
				+		</p>
			
 
				+
			
 
				+		<p>
			
 
				+			Certifique-se de adicionar `{ "type": "module" }` ao seu `package.json` para habilitar os ES6 modules em seu projeto Node.js.
			
 
				+		</p>
			
 
				+
			
 
				+	</body>
			
 
				+</html>
			
--- a/docs/manual/pt-br/introduction/Libraries-and-Plugins.html
+++ b/docs/manual/pt-br/introduction/Libraries-and-Plugins.html
@@ -0,0 +1,107 @@
 
				+<!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>Bibliotecas e Plugins</h1>
			
 
				+
			
 
				+		<p class="desc">
			
 
				+			Aqui estão listadas bibliotecas e plugins para three.js desenvolvidos por terceiros. Esta
			
 
				+			lista e os pacotes associados são mantidos pela comunidade e não é garantido que estejam atualizados. 
			
 
				+			Se você gostaria de atualizar esta lista faça uma PR!
			
 
				+		</p>
			
 
				+
			
 
				+		<h3>Física</h3>
			
 
				+
			
 
				+		<ul>
			
 
				+			<li>[link:https://github.com/lo-th/Oimo.js/ Oimo.js]</li>
			
 
				+			<li>[link:https://enable3d.io/ enable3d]</li>
			
 
				+			<li>[link:https://github.com/kripken/ammo.js/ ammo.js]</li>
			
 
				+			<li>[link:https://github.com/pmndrs/cannon-es cannon-es]</li>
			
 
				+		</ul>
			
 
				+
			
 
				+		<h3>Pós-processamento</h3>
			
 
				+
			
 
				+		<p>
			
 
				+			Além do oficial [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/postprocessing postprocessing effects],
			
 
				+			suporte para alguns efeitos e estruturas adicionais estão disponíveis por meio de bibliotecas externas.
			
 
				+		</p>
			
 
				+
			
 
				+		<ul>
			
 
				+			<li>[link:https://github.com/vanruesc/postprocessing postprocessing]</li>
			
 
				+		</ul>
			
 
				+
			
 
				+		<h3>Intersecção e Performance Raycast </h3>
			
 
				+
			
 
				+		<ul>
			
 
				+			<li>[link:https://github.com/gkjohnson/three-mesh-bvh three-mesh-bvh]</li>
			
 
				+		</ul>
			
 
				+
			
 
				+		<h3>Path Tracing</h3>
			
 
				+		
			
 
				+		<ul>
			
 
				+			<li>[link:https://github.com/gkjohnson/three-gpu-pathtracer three-gpu-pathtracer]</li>
			
 
				+		</ul>
			
 
				+		
			
 
				+		<h3>Formatos de arquivos</h3>
			
 
				+
			
 
				+		<p>
			
 
				+			Além do oficial [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/loaders loaders],
			
 
				+			suporte para alguns formatos adicionais estão disponíveis por meio de bibliotecas externas.
			
 
				+		</p>
			
 
				+
			
 
				+		<ul>
			
 
				+			<li>[link:https://github.com/gkjohnson/urdf-loaders/tree/master/javascript urdf-loader]</li>
			
 
				+			<li>[link:https://github.com/NASA-AMMOS/3DTilesRendererJS 3d-tiles-renderer-js]</li>
			
 
				+			<li>[link:https://github.com/kaisalmen/WWOBJLoader WebWorker OBJLoader]</li>
			
 
				+			<li>[link:https://github.com/IFCjs/web-ifc-three IFC.js]</li>
			
 
				+		</ul>
			
 
				+
			
 
				+		<h3>Geometria</h3>
			
 
				+
			
 
				+		<ul>
			
 
				+			<li>[link:https://github.com/spite/THREE.MeshLine THREE.MeshLine]</li>
			
 
				+		</ul>
			
 
				+
			
 
				+		<h3>Texto e Layout 3D</h3>
			
 
				+
			
 
				+		<ul>
			
 
				+			<li>[link:https://github.com/protectwise/troika/tree/master/packages/troika-three-text troika-three-text]</li>
			
 
				+			<li>[link:https://github.com/felixmariotto/three-mesh-ui three-mesh-ui]</li>
			
 
				+		</ul>
			
 
				+
			
 
				+		<h3>Sistema de partículas</h3>
			
 
				+
			
 
				+		<ul>
			
 
				+			<li>[link:https://github.com/creativelifeform/three-nebula three-nebula]</li>
			
 
				+		</ul>
			
 
				+
			
 
				+		<h3>Inverse Kinematics</h3>
			
 
				+
			
 
				+		<ul>
			
 
				+			<li>[link:https://github.com/jsantell/THREE.IK THREE.IK]</li>
			
 
				+			<li>[link:https://github.com/lo-th/fullik fullik]</li>
			
 
				+			<li>[link:https://github.com/gkjohnson/closed-chain-ik-js closed-chain-ik]</li>
			
 
				+		</ul>
			
 
				+
			
 
				+		<h3>IA para Games</h3>
			
 
				+
			
 
				+		<ul>
			
 
				+			<li>[link:https://mugen87.github.io/yuka/ yuka]</li>
			
 
				+			<li>[link:https://github.com/donmccurdy/three-pathfinding three-pathfinding]</li>
			
 
				+		</ul>
			
 
				+
			
 
				+		<h3>Wrappers e Frameworks</h3>
			
 
				+
			
 
				+		<ul>
			
 
				+			<li>[link:https://aframe.io/ A-Frame]</li>
			
 
				+			<li>[link:https://github.com/pmndrs/react-three-fiber react-three-fiber]</li>
			
 
				+			<li>[link:https://github.com/ecsyjs/ecsy-three ECSY]</li>
			
 
				+		</ul>
			
 
				+
			
 
				+	</body>
			
 
				+</html>
			
--- a/docs/manual/pt-br/introduction/Loading-3D-models.html
+++ b/docs/manual/pt-br/introduction/Loading-3D-models.html
@@ -0,0 +1,165 @@
 
				+<!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>Carregando modelos 3D</h1>
			
 
				+
			
 
				+	<p>
			
 
				+		Os modelos 3D estão disponíveis em centenas de formatos de arquivo, cada um com diferentes
			
 
				+		propósitos, recursos variados e complexidade variável. Embora o
			
 
				+		<a href="https://github.com/mrdoob/three.js/tree/dev/examples/jsm/loaders" target="_blank" rel="noopener">
			
 
				+		three.js forneça muitos loaders</a>, escolher o formato e o fluxo de trabalho certos economizará tempo e frustração mais tarde. 
			
 
				+		Alguns formatos são difíceis de trabalhar, ineficientes para experiências em tempo real
			
 
				+		ou simplesmente não são totalmente suportados por enquanto.
			
 
				+	</p>
			
 
				+
			
 
				+	<p>
			
 
				+		Este guia fornece um fluxo de trabalho recomendado para a maioria dos usuários e sugestões
			
 
				+		do que tentar se as coisas não correrem como o esperado.
			
 
				+	</p>
			
 
				+
			
 
				+	<h2>Antes de começar</h2>
			
 
				+
			
 
				+	<p>
			
 
				+		Se você é iniciante na execução de um servidor local, comece com
			
 
				+		[link:#manual/introduction/How-to-run-things-locally Como executar localmente]
			
 
				+		primeiro. Muitos erros comuns de visualização de modelos 3D podem ser evitados hospedando arquivos
			
 
				+		corretamente.
			
 
				+	</p>
			
 
				+
			
 
				+	<h2>Fluxo de trabalho recomendado</h2>
			
 
				+
			
 
				+	<p>
			
 
				+		Sempre que possível, recomendamos o uso do glTF (GL Transmission Format). Ambas versões do formato, 
			
 
				+		<small>.GLB</small> e <small>.GLTF</small>, são bem suportadas. 
			
 
				+		Como o glTF está focado na entrega de recursos em tempo de execução, 
			
 
				+		ele é compacto para transmitir e rápido para carregar. Seus recursos incluem meshs, materiais,
			
 
				+		texturas, skins, skeletons, morph targets, animações, luzes e câmeras.
			
 
				+	</p>
			
 
				+
			
 
				+	<p>
			
 
				+		Os arquivos glTF de domínio público estão disponíveis em sites como
			
 
				+		<a href="https://sketchfab.com/models?features=downloadable&sort_by=-likeCount&type=models" target="_blank" rel="noopener">
			
 
				+		Sketchfab</a>, ou várias ferramentas que incluem exportação glTF:
			
 
				+	</p>
			
 
				+
			
 
				+	<ul>
			
 
				+		<li><a href="https://www.blender.org/" target="_blank" rel="noopener">Blender</a> da Blender Foundation</li>
			
 
				+		<li><a href="https://www.allegorithmic.com/products/substance-painter" target="_blank" rel="noopener">Substance Painter</a> da Allegorithmic</li>
			
 
				+		<li><a href="https://www.foundry.com/products/modo" target="_blank" rel="noopener">Modo</a> da Foundry</li>
			
 
				+		<li><a href="https://www.marmoset.co/toolbag/" target="_blank" rel="noopener">Toolbag</a> da Marmoset</li>
			
 
				+		<li><a href="https://www.sidefx.com/products/houdini/" target="_blank" rel="noopener">Houdini</a> da SideFX</li>
			
 
				+		<li><a href="https://labs.maxon.net/?p=3360" target="_blank" rel="noopener">Cinema 4D</a> da MAXON</li>
			
 
				+		<li><a href="https://github.com/KhronosGroup/COLLADA2GLTF" target="_blank" rel="noopener">COLLADA2GLTF</a> do Khronos Group</li>
			
 
				+		<li><a href="https://github.com/facebookincubator/FBX2glTF" target="_blank" rel="noopener">FBX2GLTF</a> do Facebook</li>
			
 
				+		<li><a href="https://github.com/AnalyticalGraphicsInc/obj2gltf" target="_blank" rel="noopener">OBJ2GLTF</a> da Analytical Graphics Inc</li>
			
 
				+		<li>&hellip;e <a href="http://github.khronos.org/glTF-Project-Explorer/" target="_blank" rel="noopener">muito mais</a></li>
			
 
				+	</ul>
			
 
				+
			
 
				+	<p>
			
 
				+		Se suas ferramentas preferidas não suportam glTF, considere solicitar exportação de glTF para os autores,
			
 
				+		ou postar no <a href="https://github.com/KhronosGroup/glTF/issues/1051" target="_blank" rel="noopener">glTF roadmap thread</a>.
			
 
				+	</p>
			
 
				+
			
 
				+	<p>
			
 
				+		Quando o glTF não é uma opção, formatos populares como FBX, OBJ ou COLLADA
			
 
				+		também estão disponíveis e são mantidos regularmente.
			
 
				+	</p>
			
 
				+
			
 
				+	<h2>Carregando</h2>
			
 
				+
			
 
				+	<p>
			
 
				+		Apenas alguns poucos loaders (por exemplo [page:ObjectLoader]) são incluídos por padrão com o 
			
 
				+		three.js — outros devem ser adicionados ao seu aplicativo individualmente.
			
 
				+	</p>
			
 
				+
			
 
				+	<code>
			
 
				+		import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
			
 
				+	</code>
			
 
				+
			
 
				+	<p>
			
 
				+		Depois de importar um loader você está pronto para adicionar um modelo à sua cena. A sintaxe varia entre
			
 
				+		loaders diferentes — ao usar outro formato, verifique os exemplos e a documentação para esse loader.
			
 
				+		Para glTF, o uso com scripts globais ficaria:
			
 
				+	</p>
			
 
				+
			
 
				+	<code>
			
 
				+		const loader = new GLTFLoader();
			
 
				+
			
 
				+		loader.load( 'path/to/model.glb', function ( gltf ) {
			
 
				+
			
 
				+			scene.add( gltf.scene );
			
 
				+
			
 
				+		}, undefined, function ( error ) {
			
 
				+
			
 
				+			console.error( error );
			
 
				+
			
 
				+		} );
			
 
				+	</code>
			
 
				+
			
 
				+	<p>
			
 
				+		Veja a documentação [page:GLTFLoader GLTFLoader] para mais detalhes.
			
 
				+	</p>
			
 
				+
			
 
				+	<h2>Solução de problemas</h2>
			
 
				+
			
 
				+	<p>
			
 
				+		Você passou horas modelando uma obra-prima artesanal, você a carrega em
			
 
				+		uma página web e — ah, não! 😭 Está distorcido, descolorido ou totalmente ausente.
			
 
				+		Comece com estas etapas de solução de problemas:
			
 
				+	</p>
			
 
				+
			
 
				+	<ol>
			
 
				+		<li>
			
 
				+			Verifique se há erros no console JavaScript e certifique-se de ter usado um
			
 
				+			callback `onError` ao chamar `.load()` para logar o resultado.
			
 
				+		</li>
			
 
				+		<li>
			
 
				+			Visualize o modelo em outro aplicativo. Para glTF, visualizadores drag-and-drop
			
 
				+			estão disponíveis para
			
 
				+			<a href="https://gltf-viewer.donmccurdy.com/" target="_blank" rel="noopener">three.js</a> e
			
 
				+			<a href="https://sandbox.babylonjs.com/" target="_blank" rel="noopener">babylon.js</a>. 
			
 
				+			Se o modelo aparece corretamente em um ou mais aplicativos,
			
 
				+			<a href="https://github.com/mrdoob/three.js/issues/new" target="_blank" rel="noopener">registre um bug do three.js</a>.
			
 
				+			Se o modelo não puder ser mostrado em nenhum aplicativo, recomendamos
			
 
				+        	registrar um bug com o aplicativo usado para criar o modelo.
			
 
				+		</li>
			
 
				+		<li>
			
 
				+			Tente dimensionar o modelo para cima ou para baixo por um fator de 1.000. Muitos modelos são
			
 
				+			dimensionados de forma diferente, e modelos grandes podem não aparecer se a câmera estiver
			
 
				+			dentro do modelo.
			
 
				+		</li>
			
 
				+		<li>	
			
 
				+			Tente adicionar e posicionar uma fonte de luz. O modelo pode estar escondido no escuro.
			
 
				+		</li>
			
 
				+		<li>
			
 
				+			Procure requisições de textura com falha na aba network, como
			
 
				+			`"C:\\Path\To\Model\texture.jpg"`. Use caminhos relativos ao seu
			
 
				+			modelo em vez disso, tal como `images/texture.jpg` — 
			
 
				+			isso pode exigir edição do arquivo de modelo em um editor de texto.
			
 
				+		</li>
			
 
				+	</ol>
			
 
				+
			
 
				+	<h2>Pedindo ajuda</h2>
			
 
				+
			
 
				+	<p>
			
 
				+		Se você passou pelo processo de solução de problemas acima e seu modelo
			
 
				+		ainda não está funcionando, uma abordagem correta para pedir ajuda fará com que você
			
 
				+		tenha uma solução mais rápida. Poste uma pergunta no
			
 
				+		<a href="https://discourse.threejs.org/" target="_blank" rel="noopener">fórum three.js</a> 
			
 
				+		e, sempre que possível,
			
 
				+		inclua seu modelo (ou um modelo mais simples com o mesmo problema) em qualquer formato que
			
 
				+		você tiver disponível. Inclua informações suficientes para outra pessoa reproduzir
			
 
				+		o problema rapidamente - idealmente, uma demonstração ao vivo.
			
 
				+	</p>
			
 
				+
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/docs/manual/pt-br/introduction/Matrix-transformations.html
+++ b/docs/manual/pt-br/introduction/Matrix-transformations.html
@@ -0,0 +1,70 @@
 
				+<!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>Transformações de matriz</h1>
			
 
				+
			
 
				+		<p>
			
 
				+		Three.js usa `matrizes` para codificar transformações 3D --- translações (posição), rotações e dimensionamento.
			
 
				+		Cada instância de [page:Object3D] tem uma [page:Object3D.matrix matriz] (matrix) que armazena a
			
 
				+		posição, rotação e escala. Esta página descreve como atualizar a transformação de um objeto.
			
 
				+		</p>
			
 
				+
			
 
				+		<h2>Propriedades de conveniência e `matrixAutoUpdate`</h2>
			
 
				+
			
 
				+		<p>
			
 
				+			Existem duas maneiras de atualizar a transformação de um objeto:
			
 
				+		</p>
			
 
				+		<ol>
			
 
				+			<li>
			
 
				+				Modifique as propriedades `position`, `quaternion` e `scale` do objeto e deixe o three.js recalcular
			
 
				+				a matriz do objeto a partir destas propriedades:
			
 
				+				<code>
			
 
				+object.position.copy( start_position );
			
 
				+object.quaternion.copy( quaternion );
			
 
				+				</code>
			
 
				+				Por padrão, a propriedade `matrixAutoUpdate` é definida como verdadeira e a matriz será recalculada automaticamente.
			
 
				+				Se o objeto é estático, ou você deseja controlar manualmente quando ocorre o recálculo, um melhor desempenho pode ser obtido configurando a propriedade false:
			
 
				+				<code>
			
 
				+object.matrixAutoUpdate = false;
			
 
				+				</code>
			
 
				+				E depois de alterar qualquer propriedade, atualize manualmente a matriz:
			
 
				+				<code>
			
 
				+object.updateMatrix();
			
 
				+				</code>
			
 
				+			</li>
			
 
				+			<li>
			
 
				+				Modifique a matriz do objeto diretamente. A classe [page:Matrix4] tem vários métodos para modificar a matriz:
			
 
				+				<code>
			
 
				+object.matrix.setRotationFromQuaternion( quaternion );
			
 
				+object.matrix.setPosition( start_position );
			
 
				+object.matrixAutoUpdate = false;
			
 
				+				</code>
			
 
				+				Observe que `matrixAutoUpdate` <em>deve</em> ser definido como `false` neste caso, e você deve ter certeza de <em>não</em> chamar `updateMatrix`. Chamar `updateMatrix` irá destruir as alterações manuais feitas na matriz, recalculando a matriz de `position`, `scale` e assim por diante.
			
 
				+			</li>
			
 
				+		</ol>
			
 
				+
			
 
				+		<h2>Objeto e matrizes mundo (world matrices)</h2>
			
 
				+		<p>
			
 
				+			A [page:Object3D.matrix matriz] (matrix) de um objeto armazena a transformação do objeto <em>relativa</em> ao objeto [page:Object3D.parent pai] (parent); para obter a transformação do objeto em coordenadas <em>mundo</em>, deve-se acessar a [page:Object3D.matrixWorld] do objeto.
			
 
				+		</p>
			
 
				+		<p>
			
 
				+			Quando a transformação do objeto pai ou filho muda, você pode solicitar que a [page:Object3D.matrixWorld matrixWorld] do objeto filho seja atualizada chamando [page:Object3D.updateMatrixWorld updateMatrixWorld]().
			
 
				+		</p>
			
 
				+
			
 
				+		<h2>Rotação e Quaternion</h2>
			
 
				+		<p>
			
 
				+			Three.js fornece duas maneiras de representar rotações 3D: [page:Euler Euler angles] e [page:Quaternion Quaternions], bem como métodos para converter entre os dois. 
			
 
				+			Os ângulos de Euler estão sujeitos a um problema chamado "gimbal lock", onde certas configurações podem perder um grau de liberdade (impedindo que o objeto seja girado em torno de um eixo). Por esta razão,
			
 
				+			as rotações do objeto são <em>sempre</em> armazenadas no objeto [page:Object3D.quaternion quaternion].
			
 
				+		</p>
			
 
				+		<p>
			
 
				+			As versões anteriores da biblioteca incluíam uma propriedade `useQuaternion` que, quando definida como false, faria com que a [page:Object3D.matrix matrix] do objeto fosse calculada a partir de um ângulo de Euler. Essa prática está obsoleta --- em vez disso, você deve usar o método [page:Object3D.setRotationFromEuler setRotationFromEuler], que atualizará o quaternion.
			
 
				+		</p>
			
 
				+	</body>
			
 
				+</html>
			
--- a/docs/manual/pt-br/introduction/Useful-links.html
+++ b/docs/manual/pt-br/introduction/Useful-links.html
@@ -0,0 +1,185 @@
 
				+<!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>Links úteis</h1>
			
 
				+
			
 
				+		<p class="desc">
			
 
				+			Veja a seguir uma coleção de links que podem ser úteis para aprender three.js.<br />
			
 
				+			Se você encontrar algo que gostaria de adicionar aqui ou achar que um dos links abaixo não está mais
			
 
				+			relevante ou funcionando, sinta-se à vontade para clicar no botão 'editar' no canto inferior direito e fazer algumas alterações!<br /><br />
			
 
				+
			
 
				+			Note também que, como o three.js está em rápido desenvolvimento, muitos desses links conterão informações que estão
			
 
				+			desatualizadas - se algo não estiver funcionando como esperado ou como um desses links diz que deveria funcionar,
			
 
				+			verifique se há avisos ou erros no console do navegador. Verifique também as páginas de documentação relevantes.
			
 
				+		</p>
			
 
				+
			
 
				+		<h2>Fóruns de ajuda</h2>
			
 
				+		<p>
			
 
				+			Three.js utiliza oficialmente o [link:https://discourse.threejs.org/ forum] e o [link:http://stackoverflow.com/tags/three.js/info Stack Overflow] para 
			
 
				+			pedidos de ajuda.
			
 
				+
			
 
				+			Se você precisar de ajuda com algo, esse é o caminho. NÃO abra uma issue no Github para pedidos de ajuda.
			
 
				+		</p>
			
 
				+
			
 
				+		<h2>Cursos e tutoriais</h2>
			
 
				+
			
 
				+		<h3>Primeiros passos com o three.js</h3>
			
 
				+		<ul>
			
 
				+			<li>
			
 
				+				[link:https://threejs.org/manual/#en/fundamentals Three.js Fundamentals starting lesson]
			
 
				+			</li>
			
 
				+			<li>
			
 
				+				[link:https://codepen.io/rachsmith/post/beginning-with-3d-webgl-pt-1-the-scene Beginning with 3D WebGL] de [link:https://codepen.io/rachsmith/ Rachel Smith].
			
 
				+			</li>
			
 
				+			<li>
			
 
				+				[link:https://www.august.com.au/blog/animating-scenes-with-webgl-three-js/ Animating scenes with WebGL and three.js]
			
 
				+			</li>
			
 
				+		</ul>
			
 
				+
			
 
				+		<h3>Artigos e cursos mais extensos / avançados</h3>
			
 
				+		<ul>
			
 
				+			<li>
			
 
				+				[link:https://threejs-journey.com/ Three Journey] Curso do [link:https://bruno-simon.com/ Bruno Simon] - 
			
 
				+				Ensina os iniciantes a usar o Three.js passo a passo
			
 
				+			</li>
			
 
				+			<li>
			
 
				+				[link:https://discoverthreejs.com/ Discover three.js]
			
 
				+			</li>
			
 
				+			<li>
			
 
				+				[link:http://blog.cjgammon.com/ Collection of tutorials] do [link:http://www.cjgammon.com/ CJ Gammon].
			
 
				+			</li>
			
 
				+			<li>
			
 
				+				[link:https://medium.com/soffritti.pierfrancesco/glossy-spheres-in-three-js-bfd2785d4857 Glossy spheres in three.js].
			
 
				+			</li>
			
 
				+		 <li>
			
 
				+			 [link:https://www.udacity.com/course/cs291 Interactive 3D Graphics] - um curso gratuito da Udacity que ensina os fundamentos de gráficos 3D,
			
 
				+			 e usa three.js como sua ferramenta de codificação.
			
 
				+		 </li>
			
 
				+		 <li>
			
 
				+			[Link:https://aerotwist.com/tutorials/ Aerotwist] tutoriais do [link:https://github.com/paullewis/ Paul Lewis].
			
 
				+		 </li>
			
 
				+			 <li>
			
 
				+			 [link:http://learningthreejs.com/ Learning Three.js] – um blog com artigos dedicados ao ensino de three.js
			
 
				+		 </li>
			
 
				+		 <li>
			
 
				+			 [link:https://discourse.threejs.org/t/three-js-bookshelf/2468 Three.js Bookshelf] - Procurando mais recursos sobre three.js ou computação gráfica em geral?
			
 
				+			 Confira a seleção de literatura recomendada pela comunidade.
			
 
				+		 </li>
			
 
				+		</ul>
			
 
				+
			
 
				+		<h2>Notícias e atualizações</h2>
			
 
				+		<ul>
			
 
				+			<li>
			
 
				+				[link:https://twitter.com/hashtag/threejs Three.js no Twitter]
			
 
				+			</li>
			
 
				+			<li>
			
 
				+				[link:http://www.reddit.com/r/threejs/ Three.js no reddit]
			
 
				+			</li>
			
 
				+			<li>
			
 
				+				[link:http://www.reddit.com/r/webgl/ WebGL no reddit]
			
 
				+			</li>
			
 
				+		</ul>
			
 
				+
			
 
				+		<h2>Exemplos</h2>
			
 
				+		<ul>
			
 
				+			<li>
			
 
				+				[link:https://github.com/edwinwebb/three-seed/ three-seed] - Projeto inicial three.js com ES6 e Webpack
			
 
				+			</li>
			
 
				+			<li>
			
 
				+				[link:http://stemkoski.github.io/Three.js/index.html Professor Stemkoskis Examples] - Uma coleção de exemplos 
			
 
				+				amigáveis para iniciantes desenvolvidos com three.js.
			
 
				+			</li>
			
 
				+			<li>
			
 
				+				[link:https://threejs.org/examples/ Official three.js examples] - esses exemplos são
			
 
				+				mantidos como parte do repositório three.js e sempre usam a versão mais recente da biblioteca.
			
 
				+			</li>
			
 
				+			<li>
			
 
				+				[link:https://raw.githack.com/mrdoob/three.js/dev/examples/ Official three.js dev branch examples]  -
			
 
				+				Igual ao anterior, exceto que eles usam a branch dev do three.js e são usados para verificar se
			
 
				+				tudo está funcionando enquanto o three.js está sendo desenvolvido.
			
 
				+			</li>
			
 
				+		</ul>
			
 
				+
			
 
				+	<h2>Ferramentas</h2>
			
 
				+	<ul>
			
 
				+		<li>
			
 
				+			[link:https://github.com/tbensky/physgl physgl.org] - Front-end JavaScript com wrappers para three.js, com o intuito de trazer gráficos WebGL
			
 
				+			para alunos que estão aprendendo física e matemática.
			
 
				+		</li>
			
 
				+		<li>
			
 
				+			[link:https://whsjs.readme.io/ Whitestorm.js] – Framework modular three.js com o plugin de física AmmoNext.
			
 
				+		</li>
			
 
				+		<li>
			
 
				+			[link:http://zz85.github.io/zz85-bookmarklets/threelabs.html Three.js Inspector]
			
 
				+		</li>
			
 
				+		<li>
			
 
				+			[link:http://idflood.github.io/ThreeNodes.js/ ThreeNodes.js].
			
 
				+		</li>
			
 
				+		<li>
			
 
				+			[link:https://marketplace.visualstudio.com/items?itemName=slevesque.shader vscode shader] - Marcador de sintaxe para linguagem de shader.
			
 
				+			<br />
			
 
				+			[link:https://marketplace.visualstudio.com/items?itemName=bierner.comment-tagged-templates vscode comment-tagged-templates] - 
			
 
				+			Marcador de sintaxe para modelo de strings com tags usando comentários para linguagem de shader, como: glsl.js.
			
 
				+		</li>
			
 
				+		<li>
			
 
				+			[link:https://github.com/MozillaReality/WebXR-emulator-extension WebXR-emulator-extension]
			
 
				+		</li>
			
 
				+	</ul>
			
 
				+
			
 
				+	<h2>Referências WebGL</h2>
			
 
				+		<ul>
			
 
				+			<li>
			
 
				+			[link:https://www.khronos.org/files/webgl/webgl-reference-card-1_0.pdf webgl-reference-card.pdf] - Referência de todas as palavras-chave WebGL e GLSL, terminologia, sintaxe e definições.
			
 
				+			</li>
			
 
				+		</ul>
			
 
				+
			
 
				+	<h2>Links antigos</h2>
			
 
				+	<p>
			
 
				+		Esses links são mantidos para fins históricos - você ainda pode achá-los úteis, mas esteja avisado de que
			
 
				+		eles podem ter informações relacionadas a versões muito antigas do three.js.
			
 
				+	</p>
			
 
				+
			
 
				+	<ul>
			
 
				+		<li>
			
 
				+			<a href="https://www.youtube.com/watch?v=Dir4KO9RdhM" target="_blank">AlterQualia at WebGL Camp 3</a>
			
 
				+		</li>
			
 
				+		<li>
			
 
				+			[link:http://yomotsu.github.io/threejs-examples/ Yomotsus Examples] - uma coleção de exemplos usando three.js r45
			
 
				+		</li>
			
 
				+		<li>
			
 
				+			[link:http://fhtr.org/BasicsOfThreeJS/#1 Introduction to Three.js] de [link:http://github.com/kig/ Ilmari Heikkinen] (slides).
			
 
				+		</li>
			
 
				+		<li>
			
 
				+			[link:http://www.slideshare.net/yomotsu/webgl-and-threejs WebGL and Three.js] de [link:http://github.com/yomotsu Akihiro Oyamada] (slides).
			
 
				+		</li>
			
 
				+		<li>
			
 
				+			<a href="https://www.youtube.com/watch?v=VdQnOaolrPA" target="_blank">Trigger Rally</a>  de [link:https://github.com/jareiko jareiko] (vídeo).
			
 
				+		</li>
			
 
				+		<li>
			
 
				+			[link:http://blackjk3.github.io/threefab/ ThreeFab] - editor de cena, mantido até cerca do three.js r50.
			
 
				+		</li>
			
 
				+		<li>
			
 
				+			[link:http://bkcore.com/blog/3d/webgl-three-js-workflow-tips.html Max to Three.js workflow tips and tricks] de [link:https://github.com/BKcore BKcore]
			
 
				+		</li>
			
 
				+		<li>
			
 
				+			[link:http://12devsofxmas.co.uk/2012/01/webgl-and-three-js/ A whirlwind look at Three.js]
			
 
				+			de [link:http://github.com/nrocy Paul King]
			
 
				+		</li>
			
 
				+		<li>
			
 
				+			[link:http://bkcore.com/blog/3d/webgl-three-js-animated-selective-glow.html Animated selective glow in Three.js]
			
 
				+			de [link:https://github.com/BKcore BKcore]
			
 
				+		</li>
			
 
				+		<li>
			
 
				+			[link:http://www.natural-science.or.jp/article/20120220155529.php Building A Physics Simulation Environment] - 
			
 
				+			tutorial three.js em japonês
			
 
				+		</li>
			
 
				+	 </ul>
			
 
				+
			
 
				+	</body>
			
 
				+</html>
			
--- a/docs/manual/pt-br/introduction/WebGL-compatibility-check.html
+++ b/docs/manual/pt-br/introduction/WebGL-compatibility-check.html
@@ -0,0 +1,34 @@
 
				+<!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>Compatibilidade WebGL</h1>
			
 
				+		
			
 
				+		<p>
			
 
				+			Mesmo que isso esteja se tornando um problema cada vez menor, alguns dispositivos ou navegadores podem ainda não suportar WebGL. O método a seguir permite verificar se há suporte e exibe uma mensagem para o usuário se não existir.
			
 
				+		</p>
			
 
				+
			
 
				+		<p>
			
 
				+			Adicione [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/capabilities/WebGL.js] ao seu JavaScript e execute o seguinte código antes de tentar renderizar qualquer coisa.
			
 
				+		</p>
			
 
				+
			
 
				+		<code>
			
 
				+		if ( WebGL.isWebGLAvailable() ) {
			
 
				+
			
 
				+			// Initiate function or other initializations here
			
 
				+			animate();
			
 
				+
			
 
				+		} else {
			
 
				+
			
 
				+			const warning = WebGL.getWebGLErrorMessage();
			
 
				+			document.getElementById( 'container' ).appendChild( warning );
			
 
				+
			
 
				+		}
			
 
				+		</code>
			
 
				+	</body>
			
 
				+</html>