Three.js入门

1、什么是WebGL, 什么是three.js？

WebGL是一种技术，一种在浏览器上实现三维效果，展示3D模型和场景的技术。它使用Javascript作为编程语言，调用浏览器支持的3D绘制函数来实现3D模型和场景。

three.js是WebGL的实现，它对WebGL进行了抽象，提供了一套简单易用的API，帮我们过滤掉繁琐的底层逻辑，是一个功能强大的封装库。

2、OpenGL是什么？它跟WebGL有什么关系？

OpenGL是用于渲染2D、3D矢量图形的跨语言、跨平台的应用程序编程接口（API）。简单说就是函数库，可以对图形硬件进行访问。

浏览器实现了OpenGL的规范，这套规范可以直接使用指令来操作显卡，使显卡的渲染的3D效果，可以反应到浏览器当中。因此JS就可以与浏览器配合来对显卡进行操作。
opengl es ： 就是webGL的简化版，比较适合移动端。

OpenGL相关生态系统.jpg

3、WebGL能做什么呢？

游戏、家居、虚拟现实、城市地图、楼盘展示、CAD制图

四大组件（场景、相机、渲染器 + 几何体）

1、场景 scene

类似于现实中的舞台，你可以把你想要显示的东西放在场景中的任何位置，只有特定的空间和环境才能实现我们需要的3D效果。

var scene = new THREE.Scene();
注： 场景没有参数，一个页面中可以拥有多个场景。

2、相机 camera

相就是我们生活中的相机，我们最终能在浏览器上看到的景象，就是相机拍摄出来的。
相机主要有两类，一个是透视相机，一个是正投影相机。

透视相机：透视投影符合人们的视觉习惯，即近的大，远的小。达到极点即为消失。
正投影相机： 不论远近大小一样。

透视相机的参数：
var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
fov: 视角。视锥体的上平面与下平面之间的夹角。类似于眼睛张开的角度。
aspect: 宽高比。
near: 近平面。
far: 远平面。

视锥体.png

人眼视角.jpg

3、渲染器 renderer

就是摄影师怎么将眼前的景象展示在屏幕上，这个计算的过程就叫做渲染。

var renderer = new WebGLRenderer();

4、几何体 geometry

显示在场景当中的对象。类似网格模型。

var geometry = new THREE.Geometry();

注：THREE.JS中使用的坐标系是右手坐标系，如下：

右手坐标系.jpg

正方体坐标轴.jpg