本文介绍如何通过npm管理Three.js库，避免手动操作的不便。使用Webpack或Browserify等工具，可轻松引入并使用Three.js及其组件，如OrbitControls。确保版本匹配，以避免兼容性问题。
来源于：知屋安砖
虽然通过script标签来引入three.js是一个能够快速起步、快速运行的方式，但这种方式对于一些具有较长生命周期的项目来说是有一些缺点。比如：
- 你必须手动获得并在你的项目源代码中包含这个库的一个拷贝
- 更新库的版本是一个手动操作的过程
- 在检查新版本的库时，你的版本差异对比将会被许多行的构建文件给弄乱。
使用像npm这样的依赖包管理器，你只需在你的机器上下载并导入你所需要的版本的库就很好地避免这些需要注意的问题。
通过npm来安装
Three.js目前已经作为一个npm模块来进行了发布，详情请参阅：npm。这意味着你只需运行"npm install three"就可以使你的项目包含three.js库。
导入这个模块
假设你正在使用Webpack或者Browserify等允许你“通过打包所有依赖，来在浏览器中使用require(‘modules’)”的打包工具对你的文件进行打包。
你现在可以在你的源代码中引入模块，并继续像往常一样使用这个库。
var THREE = require('three');
var scene = new THREE.Scene();
...
你也可以使用ES6 import（在ES6标准中新增的import语句）
import * as THREE from 'three';
const scene = new THREE.Scene();
...
或者，如果你希望只导入three.js库中的特定部分，例如Scene：
import { Scene } from 'three';
const scene = new Scene();
...
可引入的示例
three.js的核心专注于实现3D引擎中最为重要的组件。其他诸如加载器和控制器等组件，是示例文件夹中的一部分。 three.js确保这些文件能够与核心保持同步，但如果在一个项目中这些组件是必要的，用户将必须分别地引入它们。 你可以在examples/jsm文件夹中找到所有示例文件的ES6版本。 如果你是通过npm来安装three.js的，那么你可以使用类似下面的代码来引入它们：
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
请注意：当你在使用来自示例（examples）文件夹中的代码时，其中的所有文件和你的three.js主文件版本相匹配是很重要的。 比如说，three.js的R103版本不能够接受和来自R96版本的GLTFLoader和OrbitControls一起使用。
扫一扫
420
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
