虽然通过script标签来引入three.js是一个能够快速起步、快速运行的方式,但这种方式对于一些具有较长生命周期的项目来说是有一些缺点的。比如说:
使用像npm这样的依赖包管理器可以很好地避免这些需要注意的问题,只需在你的电脑上下载并导入你所需要的库的版本即可。
Three.js目前已经作为一个npm包来进行了发布,详情请参阅:[link:https://www.npmjs.com/package/three npm]。这意味着,在所有你需要包含three.js库的项目中,只需运行"npm install three"即可。
假设你正在使用[link:https://webpack.github.io/ Webpack]或者[link:https://github.com/substack/node-browserify Browserify]等允许你“通过打包所有依赖,来在浏览器中使用require('modules')”的打包工具对你的文件进行打包。
你现在可以在你的源代码中引入模块,并继续像往常一样使用这个库。
var THREE = require('three');
var scene = new THREE.Scene();
...
你也可以使用[link:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import 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();
...
目前,无法用这种方式导入"examples/js"目录中的文件。 这是因为一些文件依赖于THREE的全局命名空间污染。了解更多详情,请参阅Transform `examples/js` to support modules #9562。