一、OpenGL,WebGL
OpenGL大概許多人都有所耳聞，它是最常用的跨平台圖形庫。
WebGL是基於OpenGL設計的面向web的圖形標准，提供了一系列JavaScript API，通過這些API進行圖形渲染將得以利用圖形硬件從而獲得較高性能。
而Three.js是通過對WebGL接口的封裝與簡化而形成的一個易用的圖形庫。
簡單點的說法：WebGL可以看成是瀏覽器給我們提供的接口，在javascript中可以直接用這些API進行3D圖形的繪制；而Three.js就是在這些接口上又幫我們封裝得更好用一些。
logo-compassion.jpg
WebGL與Three.js對比
既然有了WebGL，我們為什么還需要Three.js？
這是因為WebGL門檻相對較高，需要相對較多的數學知識。雖然WebGL提供的是面向前端的API，但本質上WebGL跟前端開發完全是兩個不同的方向，知識的重疊很少。相關性只是他們都在web平台上，都是用javascript而已。一個前端程序員或許還熟悉解析幾何，但是還熟悉線性代數的應該寥寥無幾了（比如求個逆轉置矩陣試試？），更何況使用中強調矩陣運算中的物理意義，這在教學中也是比較缺失的。
因此，前端工程師想要短時間上手WebGL還是挺有難度的。
於是，Three.js對WebGL提供的接口進行了非常好的封裝，簡化了很多細節，大大降低了學習成本。並且，幾乎沒有損失WebGL的靈活性。 因此，從Three.js入手是值得推薦的，這可以讓你在較短的學習后就能面對大部分需求場景。以下是 Three.js 制作 3D 的五要素：
1. 渲染器（render）
我們可以把渲染器想想成為一個畫布，我們需要在這個畫布上去畫出我們需要展示的東西。
2. 場景（scene）
相當於一個空間，我們需要將展示的東西放在這個空間里，然后再在畫布上繪制出來。
3. 照相機（camera）
相當於眼睛，我們想要看到物體，就需要眼睛去看。
4. 光源（light）
物體需要光照才能看見，不然就是漆黑一片（但是在某些情況下展示物體不需要光源）。
5. 物體（object）
我們想要表現的內容，會有形狀和材質屬性。
Canvas 、WebGL 、SVG和Three.js