什么是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>
2225
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
