02 基础知识

1. ThreeJS - master

（1）目录结构

（2）程序结构

three.js-master
└───build——src目录下各个代码模块打包后的结果
│───three.js——开发的时候.html文件中要引入的threejs引擎库，和引入jquery一样，可以辅助浏览器调试
│───three.min.js——three.js压缩后的结构文件体积更小，可以部署项目的时候在.html中引入。
│
└───docs——Three.js API文档文件
│───index.html——打开该文件可以实现离线查看threejs API文档
│
└───editor——Three.js的可视化编辑器，可以编辑3D场景
│───index.html——打开应用程序
│
└───docs——Three.js API文档文件
│───index.html——打开该文件可以实现离线查看threejs API文档
│
└───examples——里面有大量的threejs案例，平时可以通过代码编辑全局查找某个API、方法或属性来定位到一个案例
│
└───src——Three.js引擎的各个模块，可以通过阅读源码深度理解threejs引擎
│───index.html——打开该文件可以实现离线查看threejs API文档
│
└───utils——一些辅助工具
    │───\utils\exporters\blender——blender导出threejs文件的插件

引自：http://www.webgl3d.cn/Three.js/

1. 场景对象

• 创建场景对象

2. 网格模型

• 创建图像几何体对象
• 创建材质对象
• 将几何对象放入网格模型当中

3. 光源

• 点光源设置
• 环境光设置

4. 相机设置

• 设置宽高、宽高比以及场景显示范围控制系数（系数越大，显示的范围越大）
• 创建相机对象，设置相机位置方向

5. 创建渲染器对象

• 设置渲染区域大小、背景颜色
• body 元素中插入 canvas 对象

2. 周期性渲染（requestAnimationFrame）与动画

（1）周期性渲染：

动画是由一帧一帧组成的，而渲染器对象WebGLRenderer 的渲染方法 .render()