这一章我来来探究一下 threejs的项目结构.
threejs 的项目结构.
从 github 上把代码 clone 下来 , 会发现工程文件结构如下
| 名称 | 作用 |
|---|---|
| build | 这里是已经打包好的js文件,可以直接引入到页面中. |
| docs | threejs的离线文档,方便离线环境下查看,写的有些简陋,只看文档的话,学习起来很困难 |
| editor | 自带一个场景构建工具. |
| examples | 里面有丰富的demo,每一个功能一般都会有一个例子,除此之外,还有一些帮助类文件,方便我们调试开发 |
| src | 正儿八经的源码文件 |
| test | 测试用例 |
| utils | 提供一些相关工具, 比如3d模型格式转换等等. |
| bower.json | 显然, threejs 是使用 bower 作为打包工具的 |
| rollup.config.js | rollup 可以将最后不需要的js代码,剔除出去. 这样打出的包体积小很多 |
虽然 build 下已经有打包好的现成文件, 但还是要讲一下 他是怎么打包的.
1.首先安装 rollup
推荐-g 安装，方便调用。
npm install rollup -g
2.使用rollup进行打包
cd 到 threejs 工程目录
rollup -c
这时打包好的文件会出现在 build/three.js .
更多关于rollup的使用方法参见这里 https://github.com/rollup/rollup
创建包含threejs的页面
我们来新建一个html文件. learning.html , 保存在 threejs 的工程根目录下.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script src="build/three.js"></script>
</head>
<body>
</body>
</html>这样一个 最基本的 threejs 环境就搭建完成了.
threejs的坐标系
Threejs使用的是右手坐标系,这与opengl一致,原点位于屏幕正中心,x正方向向右,y正方向向上,z正方向垂直屏幕向外.
如下图,你的视线垂直于xy轴形成的平面,方向看向z轴无穷小.
