什么是WEBGL？
WebGL (Web图形库) 是一种JavaScript API，用于在任何兼容的Web浏览器中呈现交互式3D和2D图形，而无需使用插件。WebGL通过引入一个与OpenGL ES 2.0紧密相符合的API，可以在HTML5 元素中使用。（MDN简介）
在我的理解，WebGL给我们提供了一系列的图形接口，能够让我们通过js去使用GPU来进行浏览器图形渲染的工具。
什么是Three.js？
Three.js是一款webGL框架，由于其易用性被广泛应用。Three.js在WebGL的api接口基础上，又进行的一层封装。它是由居住在西班牙巴塞罗那的程序员Ricardo Cabbello Miguel开发的，此人更出名的网名叫做Mr.doob。Three.js以简单、直观的方式封装了3D图形编程中常用的对象。Three.js在开发中使用了很多图形引擎的高级技巧，极大地提高了性能。另外，由于内置了很多常用对象和极易上手的工具，Three.js的功能也非常强大。最后，Three.js还是完全开源的，你可以在GitHub上找到它的源代码，并且有很多人贡献代码，帮助Mr.doob一起维护这个框架。
WEBGL和Three.js的关系
WebGL原生的api是一种非常低级的接口，而且还需要一些数学和图形学的相关技术。对于没有相关基础的人来说，入门真的很难，Three.js将入门的门槛降低了整整的一大截，对WebGL进行封装，简化我们创建三维动画场景的过程。只要你有一定的JavaScript的基础，有一定的前端经验，我坚信，用不了多长时间，三维制作会变得很简单。
用最简单的一句话概括：WebGL和Three.js的关系，相当于JavaScript和Jquery的关系。
功能概述：
Three.js作为WebGL框架中的佼佼者，由于它的易用性和扩展性，使得它能够满足大部分的开发需求，Three.js的具体功能如下：
- Three.js掩盖了3D渲染的细节：Three.js将WebGL原生API的细节抽象化，将3D场景拆解为网格、材质和光源(即它内置了图形编程常用的一些对象种类)。
- 面向对象：开发者可以使用上层的JavaScript对象，而不是仅仅调用JavaScript函数。
- 功能非常丰富：Three.js除了封装了WebGL原始API之外，Three.js还包含了许多实用的内置对象，可以方便地应用于游戏开发、动画制作、幻灯片制作、髙分辨率模型和一些特殊的视觉效果制作。
- 速度很快：Three.js采用了3D图形最佳实践来保证在不失可用性的前提下，保持极高的性能。
- 支持交互：WebGL本身并不提供拾取（picking)功能（即是否知道鼠标正处于某个物体上）。而Three.js则固化了拾取支持，这就使得你可以轻松为你的应用添加交互功能。
- 包含数学库：Three.js拥有一个强大易用的数学库，你可以在其中进行矩阵、投影和矢量运算。
- 内置文件格式支持：你可以使用流行的3D建模软件导出文本格式的文件，然后使用Three.js加载；也可以使用Three.js自己的JSON格式或二进制格式。
- 扩展性很强：为Three.js添加新的特性或进行自定义优化是很容易的事情。如果你需要某个特殊的数据结构，那么只需要封装到Three.js即可。
- 支持HTML5 canvas：Three.js不但支持WebGL，而且还支持使用Canvas2D、Css3D和SVG进行渲染。在未兼容WebGL的环境中可以回退到其它的解决方案。
缺点：
虽然Three.js的优势很大，但是它也有它的不足之处：
- 官网文档非常粗糙，对于新手极度不友好。
- 国内的相关资源匮乏。
- Three.js所有的资料都是以英文格式存在，对国内的朋友来说又提高了门槛。
- Three.js不是游戏引擎，一些游戏相关的功能没有封装在里面，如果需要相关的功能需要进行二次开发。
Three.js与其他库的对比
随着WebGL的迅速发展，相关的WebGL库也丰富起来，接下来列出几个比较火的WebGL库：
与Babylon.js对比
Babylon.JS是最好的JavaScript3D游戏引擎，它能创建专业级三维游戏。主要以游戏开发和易用性为主。与Three.js之间的对比：
1. Three.js比较全面，而Babylon.js专注于游戏方面。
2. Babylon.js提供了对碰撞检测、场景重力、面向游戏的照相机，Three.js本身不自带，需要依靠引入插件实现。
3. 对于WebGL的封装，双方做的各有千秋，Three.js浅一些，好处是易于扩展，易于向更底层学习；Babylon.js深一些，好处是易用扩展难度大一些。
4. Three.js的发展是依靠社区推动，出来的比较早，发展比较成熟，Babylon.js是由微软公司在2013推出，文档和社区都比较健全，国内还不怎么火。
与PlayCanvas对比
PlayCanvas是一个基于WebGL游戏引擎的企业级开源JavaScript框架，它有许多的开发工具能帮你快速创建3D游戏。与Three.js之间的对比：
- PlayCanvas的优势在于它有云端的在线可视化编辑工具。
- PlayCanvas的扩展性不如Three.js。
- 最主要是PlayCanvas不完全开源，还商业付费。
Cesium
Cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎，支持3D,2D,2.5D形式的地图展示，可以自行绘制图形，高亮区域。与Three.js对比：
- Cesium是一个地图引擎，专注于Gis，相关项目推荐使用它，其它项目还是算了。
- 在于库的扩展，其它的配套的插件，以及周边的资源都不及Three.js。
总结
通过以上信息我们发现，Three.js在其库的扩展性，易用性以及功能方面有很好的优势。学习Three.js入门3D开发不但门槛低，而且学习曲线不会太陡，即使以后转向WebGL原生开发，也能通过Three.js学习到很多有用的知识。
现在最火的微信小游戏跳一跳也是在Three.js的基础上开发出来的。所以，Three.js是我们必须要学的WebGL框架。
入门前准备
浏览器兼容
Three.js可以使用WebGL在所有现代浏览器上渲染场景。对于旧版浏览器，尤其是Internet Explorer 10及更低版本，您可能需要回退到其他渲染器（CSS2DRenderer，CSS3DRenderer，SVGRenderer，CanvasRenderer）。
注意：如果您不需要支持这些旧版浏览器，则不推荐使用其他渲染器，因为它们速度较慢并且支持的功能比WebGLRenderer更少。
支持的浏览器版本
Google Chrome 9+，Firefox 4+，Opera 15+，Safari 5.1+，Internet Explorer 11和Microsoft Edge
开发工具
Three.js是一个JavaScript库，所以，我们不需要搭建复杂的开发环境，只需要有一个可以编辑JavaScript的编辑器和支持Three.js的浏览器就可以使用Three.js来创建WebGL应用。在这里推荐两款编辑器，之所以在这里只推荐这两款编辑器，因为这两款服务器自带Web服务，不需要我们再搭建复杂的Web服务进行开发：
WebStorm：WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。
官网：https://www.jetbrains.com/webstorm/HBuilder：HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。它是国产的最好用的编辑器。
它基于Eclipse，所以顺其自然地兼容了Eclipse的插件。
快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css的开发效率。
官网：http://www.dcloud.io/
虽然现在浏览器基本上都已经支持Three.js，但是我还是推荐使用google的Chrome浏览器或者Mozilla的Firefox（火狐浏览器）。当然，性能最好的还是Chrome浏览器，本课程所有代码都使用Chrome浏览器进行测试。
源码获取
Three.js（当前版本为r92）提供了几种源码获取方式，在这里我介绍几种比较简单的方式。
- 第一种，使用 BootCDN 提供的免费 CDN 加速服务（同时支持 http 和 https 协议），直接引入方式为：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>我的第一个Three.js案例</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="https://cdn.bootcss.com/three.js/92/three.js"></script>
<script>
// 在这里书写你的js代码
</script>
</body>
</html>如果需要更新代码，可以去网址http://www.bootcdn.cn/three.js/查找最新版本地址引入即可。
- 第二种，直接前往官网https://threejs.org/页面：
点击下载链接即可下载当前最新版本的代码及相关案例，文件下载解压下来以后是这样的：
其中相关文件夹的内容是：
build - 里面含有Three.js的整合出来的js文件，可以直接引入使用，并有压缩版
docs - Three.js 的官方文档
editor - Three.js的一个网页版的模型编辑器
examples - Three.js的官方案例，如果全都学会，必将成为大神
src - 这里面放置的全是编译Three.js的源文件
test - 一些官方测试代码，我们一般用不到
utils - 一些相关插件
其他 - 开发环境搭建、开发所需要的文件，如果不对Three.js进行二次开发，用不到。- 还有第三种，就是直接去gitHub上面去下载源码，方式和在官网下载的代码一样，gitHub地址为：https://github.com/mrdoob/three.js
helloWorld
前面说了这么多，准备了这么多，最后，放上我们的第一个案例吧。由此来打开学习Three.js 的大门：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>我的第一个Three.js案例</title>
<style>
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%;
display: block;
}
</style>
</head>
<body onload="init()">
<script src="https://cdn.bootcss.com/three.js/92/three.js"></script>
<script>
//声明一些全局变量
var renderer, camera, scene, geometry, material, mesh;
//初始化渲染器
function initRenderer() {
renderer = new THREE.WebGLRenderer(); //实例化渲染器
renderer.setSize(window.innerWidth, window.innerHeight); //设置宽和高
document.body.appendChild(renderer.domElement); //添加到dom
}
//初始化场景
function initScene() {
scene = new THREE.Scene(); //实例化场景
}
//初始化相机
function initCamera() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200); //实例化相机
camera.position.set(0, 0, 15);
}
//创建模型
function initMesh() {
geometry = new THREE.BoxGeometry( 2, 2, 2 ); //创建几何体
material = new THREE.MeshNormalMaterial(); //创建材质
mesh = new THREE.Mesh( geometry, material ); //创建网格
scene.add( mesh ); //将网格添加到场景
}
//运行动画
function animate() {
requestAnimationFrame(animate); //循环调用函数
mesh.rotation.x += 0.01; //每帧网格模型的沿x轴旋转0.01弧度
mesh.rotation.y += 0.02; //每帧网格模型的沿y轴旋转0.02弧度
renderer.render( scene, camera ); //渲染界面
}
//初始化函数，页面加载完成是调用
function init() {
initRenderer();
initScene();
initCamera();
initMesh();
animate();
}
</script>
</body>
</html>请将上面的代码复制的html文件中，然后使用浏览器打开，我们就会发现下面的效果：
下一节我们将仔细的分析案例的实现。