簡單的說,Three.js 是一套基於 WebGL 開發出的 Javascript 函式庫,它提供了比 WebGL 更簡單的 Javascript API,讓開發者能夠輕易在瀏覽器做 3D 繪圖。
而此時你可能會充滿疑惑,那什麼是 WebGL?常聽到人家說的 OpenGL 又是什麼?他們與 Three.js 又是什麼關係?
由於 WebGL 對於初學者而言仍需要了解它的底層細節、複雜的著色語言(GLSL),所以想要短時間上手 WebGL 是相對困難的,在幾年前的鐵人賽中 Kalan 大大曾寫過關於 WebGL 的介紹,想體驗一下的朋友可以參考他的系列文。
而 Three.js 最大的優點就是它對 WebGL 進行了良好的封裝,大大的降低了前端工程師們的學習成本,可以說 Three.js 蠻像 3D 網頁中的 jQuery。
另外一點就是 Three.js 具備輕量函式庫的特性,相當適合拿來在 Web 做中小型專案,像是小遊戲或品牌網頁等。
要在螢幕上顯示 3D 圖形,在 Three.js 中需要以下的基本元素:
場景(Scene):供其他元素設置的空間。
相機(Camera):在場景中建立觀察點,並確定觀察方向、角度。
物體(Objects):在場景中添加被觀察的物體。
光源(Light):在場景中用來照亮物體的光。
渲染器(Renderer):將所要呈現的場景渲染到畫面上。