1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
<!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>可引入的示例</h2>
<p>
three.js的核心专注于实现3D引擎中最为重要的组件。其他诸如加载器和控制器等组件，是示例文件夹中的一部分。
three.js确保这些文件能够与核心保持同步，但如果在一个项目中这些组件是必要的，用户将必须分别地引入它们。
你可以在[link:https://github.com/mrdoob/three.js/tree/master/examples/jsm examples/jsm]文件夹中找到所有示例文件的ES6版本。
如果你是通过npm来安装three.js的，那么你可以使用类似下面的代码来引入它们：
</p>
<code>
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
</code>
<p>
请注意：当你在使用来自示例（examples）文件夹中的代码时，其中的所有文件和你的three.js主文件版本相匹配是很重要的。
比如说，three.js的R103版本不能够接受和来自R96版本的*GLTFLoader*和*OrbitControls*一起使用。
</p>
</body>
</html>
|
