javascript
/
three.js
огледало од https://github.com/tazdij/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255
							<!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>