javascript
/
three.js
同期ミラー https://github.com/tazdij/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252
							<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<base href="../../../" />
		<script src="list.js"></script>
		<script src="page.js"></script>
		<link type="text/css" rel="stylesheet" href="page.css" />
	</head>
	<body>
		<h1>[name]</h1>

		<p class="desc">
			本文介绍如何将three.js放入[link:https://nodejs.org/en/ node.js]环境中执行自动化测试。 测试可以在命令行上运行，也可以通过自动化
			CI工具，如[link:https://travis-ci.org/ Travis]
		</p>

		<h2>The short version（简版）</h2>

		<p>
			如果你熟悉node 和 npm,
			<code>
				$ npm install three --save-dev
			</code>
			然后添加
		<code>
			var THREE = require('three');
		</code>
			到你的测试文件中
		</p>

		<h2>Create a testable project from scratch（从头开始创建一个可测试的项目）</h2>
		<p>
		如果你不熟悉这些工具，这里有一个快速指南（对于linux，安装过程
		使用Windows会略有不同，但NPM命令是相同的）。
		</p>

		<h3>Basic setup（基本步骤）</h3>
		<div>
			<ol>
				<li>
					安装 [link:https://www.npmjs.org/ npm] 和 nodejs. 最简短的方法通常类似这样
					<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>
					创建一个新的项目目录
					<code>
						 $ mkdir test-example; cd test-example
					</code>
				</li>

				<li>
					用npm创建一个项目文件:
					<code>
					 $ npm init
					</code>
					接受所有默认设定，在提示问题时候都按回车。这会创建package.json文件。
				</li><br />

				<li>
					尝试并启动测试功能
					<code>
$ npm test
					</code>
					这将会失败，符合预期。
					在package.json中, 测试脚本的定义是
					<code>
						"test": "echo \"Error: no test specified\" && exit 1"
					</code>
				</li>

			</ol>
		</div>

		<h2>Add mocha（增加mocha）</h2>
		<div>
			我们将要使用 [link:https://mochajs.org/ mocha].

			<ol>
				<li>
					安装 mocha
					<code>
$ npm install mocha --save-dev
					</code>
					注意依赖存储路径 node_modules/ 会被创建.
				  同时注意package.json被更新了: 属性devDependencies
					被新增，由于这个指令 --save-dev.
				</li><br />

				<li>
					编辑 package.json 来调用 mocha来测试. 当测试被调用, 我们只想运行mocha并且定义个显式的reporter。
					默认情况这回运行test/路径下所有的测试
					(如果目录test/不存在可能会导致npm ERR!, 通过 mkdir test创建该目录)
					<code>
						"test": "mocha --reporter list"
					</code>
				</li>

				<li>
					重新运行测试
					<code>
						$ npm test
					</code>

					现在应该成功，并报告 0 passing (1ms)
				 	或者类似的。
				</li>

			</ol>
		</div>

		<h2>Add three.js（增加three.js）</h2>
		<div>
			<ol>
				<li>
					增加 three.js 作为依赖
					<code>
$ npm install three --save-dev
					</code>
					<ul>
						<li>
							如果想要指定版本号，那么运行
							<code>
								$ npm show three versions
							</code>
							来看可用的版本号。为了告诉npm正确的版本，使用
							<code>
 $ npm install [email protected] --save
							</code>
							(0.84.0 in this example). --save makes this a dependency of this project, rather than
							dev dependency. See the docs [link:https://www.npmjs.org/doc/json.html here] for more info.
						</li>
					</ul>
				</li>

				<li>
					Mocha 会搜索 test/下的测试, 所以
					<code>
					$ mkdir test
					</code>
				</li>

				<li>
					最后，我们实际上需要运行JS测试。 让我们添加一个简单的测试来验证
					three.js对象可用且正常工作。 创建包含以下内容的test/verify-three.js：
<code>
var THREE = require('three');
var 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() {
    var vec3 = new THREE.Vector3();
    assert.equal(0, vec3.x);
  })
})
</code>
				</li>

				<li>
				最后再用 $ npm test测试一下. 这将运行测试并成功,
				显示如下内容:
				<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>Add your own code（增加自己的代码）</h2>
		<div>
			你需要做三件事:

			<ol>
				<li>
					为了你的行为代码编写测试, 放在 test/路径下.
					[link:https://github.com/air/encounter/blob/master/test/Physics-test.js Here] 是一个真实项目的例子.
				</li>

				<li>
					以nodejs可以识别的方式导出您的功能代码，以与require一起使用。
					见 [link:https://github.com/air/encounter/blob/master/js/Physics.js here].
				</li>

				<li>
					在测试文件中Require 你的代码, 跟上面例子中的 require('three') 类似.
				</li>
			</ol>

			<p>
				第2项和第3项将根据您管理代码的方式而有所不同。 在Physics.js的例子中
				如上所述，export部分在最后。 我们将一个对象分配给module.exports：
			</p>
			<code>
//=============================================================================
// make available in nodejs
//=============================================================================
if (typeof exports !== 'undefined')
{
  module.exports = Physics;
}
			</code>
		</div>

		<h2>Dealing with dependencies（处理依赖）</h2>
		<div>
			<p>
				如果你已经使用了聪明的东西，比如require.js或browserify，请跳过这一部分。
			</p>
			<p>
				通常一个three.js项目会在浏览器运行。浏览器通过执行一堆标签脚本来加载模块。你的个人文件没必要担心依赖问题。但在nodejs上下文中，没有index.html绑定这些，所以必须显式声明。
			</p>
			<p>
				如果您要导出依赖于其他文件的模块，则必须告诉节点加载它们。
				这是一种方法：
			</p>
			<ol>
				<li>
				在模块开始时，检查您是否在nodejs环境中。
				</li>
				<li>
				如果是这样，请显式声明您的依赖项。
				</li>
				<li>
						如果没有，您可能在浏览器中，因此您不需要做任何其他事情。
				</li>
			</ol>
			Example 代码来自Physics.js:
			<code>
//=============================================================================
// setup for server-side testing
//=============================================================================
if (typeof require === 'function') // test for nodejs environment
{
  var THREE = require('three');
  var MY3 = require('./MY3.js');
}
			</code>
		</div>

	</body>
</html>