通过模块来引入([name])


虽然通过script标签来引入three.js是一个能够快速起步、快速运行的方式,但这种方式对于一些具有较长生命周期的项目来说是有一些缺点的。比如说:

使用像npm这样的依赖包管理器可以很好地避免这些需要注意的问题,只需在你的电脑上下载并导入你所需要的库的版本即可。

通过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