javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
							<!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>
			虽然通过script标签来引入three.js是一个能够快速起步、快速运行的方式，但这种方式对于一些具有较长生命周期的项目来说是有一些缺点。比如：

			<ul>
				<li>你必须手动获得并在你的项目源代码中包含这个库的一个拷贝</li>
				<li>更新库的版本是一个手动操作的过程</li>
				<li>在检查新版本的库时，你的版本差异对比将会被许多行的构建文件给弄乱。</li>
			</ul>
		</p>

		<p>使用像npm这样的依赖包管理器，你只需在你的机器上下载并导入你所需要的版本的库就很好地避免这些需要注意的问题。</p>

		<h2>通过npm来安装</h2>

		<p>Three.js目前已经作为一个npm模块来进行了发布，详情请参阅：[link:https://www.npmjs.com/package/three npm]。这意味着你只需运行"npm install three"就可以使你的项目包含three.js库。</p>

		<h2>导入这个模块</h2>

		<p>假设你正在使用[link:https://webpack.github.io/ Webpack]或者[link:https://github.com/substack/node-browserify Browserify]等允许你“通过打包所有依赖，来在浏览器中使用require('modules')”的打包工具对你的文件进行打包。</p>

		<p>你现在可以在你的源代码中引入模块，并继续像往常一样使用这个库。
		</p>

		<code>
		var THREE = require('three');

		var scene = new THREE.Scene();
		...
		</code>

		<p>
			你也可以使用[link:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import ES6 import]（在ES6标准中新增的import语句）
		</p>

		<code>
		import * as THREE from 'three';

		const scene = new THREE.Scene();
		...
		</code>

		<p>
			或者，如果你希望只导入three.js库中的特定部分，例如Scene：
		</p>

		<code>
		import { Scene } from 'three';

		const scene = new Scene();
		...
		</code>

		<h2>Importable Examples</h2>
		<p>
			The core of three.js is focused on the most important components of a 3D engine. Many other components like loaders or controls are part of the
			examples directory. three.js ensures that these files are kept in sync with the core but users have to import them separately if they are required
			for a project. You can find in the [link:https://github.com/mrdoob/three.js/tree/master/examples/jsm examples/jsm] directory an ES6
			module version for almost all example files. If you install three.js via npm, you can import them like so:
		</p>
		<code>
		import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
		</code>
		<p>
			Note: When using code from the examples directory, it's important that all files match the version of
			your three.js main file. For example, it's not acceptable to use *GLTFLoader* and *OrbitControls* from R96 together
			with three.js R103.
		</p>
	</body>
</html>