课程表

three.js课程

工具箱
速查手册

Three 引入模块

当前位置:免费教程 » JS/JS库/框架 » three.js

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

  • 你必须手动获得并在你的源代码中包含这个库的一个拷贝

  • 更新这个库的版本是一个手动操作的过程

  • 在检查新版本的库时,你的版本差异对比将会被许多行给弄乱。

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

通过npm来安装

Three.js目前已经作为一个npm包来进行了发布,详情请参阅:npm。这意味着,在所有你需要包含three.js库的项目中,只需运行"npm install three"即可。

导入这个模块

假设你正在使用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();
...

注意事项

目前,无法用这种方式导入"examples/js"目录中的文件。 这是因为一些文件依赖于THREE的全局命名空间污染。了解更多详情,请参阅Transform `examples/js` to support modules #9562

相关库

下面表格列举了一些Three.js相关的开源库。

功能
PhysijsPhysijs是一款物理引擎,可以协助基于原生WebGL或使用three.js创建模拟物理现象,比如重力下落、物体碰撞等物理现
stats.jsJavaScript性能监控器,同样也可以测试webgl的渲染性能
dat.gui轻量级的icon形用户界面框架,可以用来控制Javascript的变量,比如WebGL中一个物体的尺寸、颜色
tween.js借助tween.js快速创建补间动画,可以非常方便的控制机械、游戏角色运动
ThreeBSP可以作为three.js的插件,完成几何模型的布尔,各类三维建模软件基本都有布尔的概念


转载本站内容时,请务必注明来自W3xue,违者必究。
 友情链接: NPS