近年来web得到了快速的发展。随着HTML5的普及，网页的表现能力越来越强大。网页上已经可以做出很多复杂的动画，精美的效果。
但是，人总是贪的。那么，在此之上还能做什么呢？其中一种就是通过WebGL在网页中绘制高性能的3D图形。
OpenGL,WebGL到Three.js
OpenGL大概许多人都有所耳闻，它是最常用的跨平台图形库。
WebGL是基于OpenGL设计的面向web的图形标准，提供了一系列JavaScript API，通过这些API进行图形渲染将得以利用图形硬件从而获得较高性能。
而Three.js是通过对WebGL接口的封装与简化而形成的一个易用的图形库。
简单点的说法：WebGL可以看成是浏览器给我们提供的接口，在javascript中可以直接用这些API进行3D图形的绘制；而Three.js就是在这些接口上又帮我们封装得更好用一些。
WebGL与Three.js对比
既然有了WebGL，我们为什么还需要Three.js？
这是因为WebGL门槛相对较高，需要相对较多的数学知识。虽然WebGL提供的是面向前端的API，但本质上WebGL跟前端开发完全是两个不同的方向，知识的重叠很少。相关性只是他们都在web平台上，都是用javascript而已。一个前端程序员或许还熟悉解析几何，但是还熟悉线性代数的应该寥寥无几了（比如求个逆转置矩阵试试？），更何况使用中强调矩阵运算中的物理意义，这在教学中也是比较缺失的。
因此，前端工程师想要短时间上手WebGL还是挺有难度的。
于是，Three.js对WebGL提供的接口进行了非常好的封装，简化了很多细节，大大降低了学习成本。并且，几乎没有损失WebGL的灵活性。
因此，从Three.js入手是值得推荐的，这可以让你在较短的学习后就能面对大部分需求场景。
Three.js的学习问题
Three.js的入门是相对简单的，但是当我们真的去学的时候，会发现一个很尴尬的问题：相关的学习资料很少。
通常这种流行的库都有很完善的文档，很多时候跟着官方的文档或官方的入门教程学习就是最好的路线。但Three不是的，它的文档对初学者来说太过简明扼要。
不过官方提供了非常丰富的examples，几乎所有你需要的用法都在某个example中有所体现。但这些example不太适合用来入门，倒是适合入门之后的进一步学习。
这里推荐一些相对较好的教程：
Three.js入门指南
这是一份很好的Three.js 轻量级入门教程，作者文笔很好，基础知识讲解得简明易懂。
Learning Three.js- Second Edition
Learning Three.js:The JavaScript 3D Library for WebGL是现在不多的也是最好的Three.js入门书，比较全面地讲解了Three.js的各种功能。
如果有能力的话，建议阅读英文版第二版，出版于2015年，与现在的Three.js区别很小。
中文版翻译自出版于2012年的原书第一版，大部分概念是适用的，但很多细节已经有所改变。
Three.js入门教程
这是对国外一份教程的翻译，一共六篇文章。讲解不多，更多的是展示各个基本功能怎么用。更适合有一些图形基础的同学。
当然，实际的学习过程中这些资料肯定是不太够的，遇到问题还是要自己去查资料。不过这里要提醒一下，Three.js的更新是相当频繁的，现在是r80版本，自2010年4月发布r1以来，这已经是第72个版本了(中间有的版本号跳过了)。因此，在网上找到的资料有些可能是不适合当前版本的，需要注意甄别(前面推荐的资料也都或多或少存在这样的问题)。
Three.js中的一些概念
要在屏幕上展示3D图形，思路大体上都是这样的：
构建一个三维空间
Three中称之为场景(Scene)选择一个观察点，并确定观察方向/角度等
Three中称之为相机(Camera)在场景中添加供观察的物体
Three中的物体有很多种，包括Mesh,Line,Points等，它们都继承自Object3D类将观察到的场景渲染到屏幕上的指定区域
Three中使用Renderer完成这一工作
下面来具体看一看Three中的这些概念。
Scene
场景是所有物体的容器，也对应着我们创建的三维世界。
Camera 坐标系
Camera是三维世界中的观察者，为了观察这个世界，首先我们要描述空间中的位置。
Three中使用采用常见的右手坐标系定位。
三维投影
Three中的相机有两种，分别是正投影相机THREE.OrthographicCamera和透视投影相机THREE.PerspectiveCamera。
