《WebGL入門指南》——第2章，第2.1節Three.js——一個JavaScript 3D引擎

本節書摘來自異步社群《webgl入門指南》一書中的第2章，第2.1節three.js——一個javascript 3d引擎，作者 【美】tony parisi，更多章節内容可以通路雲栖社群“異步社群”公衆号檢視

2.1　three.js——一個javascript 3d引擎

webgl入門指南

在本書中我們使用的webgl架構叫做three.js，它是由居住在西班牙巴塞羅那的程式員ricardo cabello miguel開發的，此人更出名的網名叫做mr.doob。three.js以簡單、直覺的方式封裝了3d圖形程式設計中常用的對象。three.js在開發中使用了很多圖形引擎的進階技巧，極大地提高了性能。另外，由于内置了很多常用對象和極易上手的工具，three.js的功能也非常強大。最後，three.js還是完全開源的，你可以在github上找到它的源代碼，并且有很多人貢獻代碼，幫助mr.doob一起維護這個架構。

我選擇three.js來編寫示例代碼有兩個原因。第一，我目前在我自己的項目中也在使用它，并且我很喜歡它。第二，在衆多引擎中它更受歡迎，已經成為其中的佼佼者。不過沒有關系，你也可以選擇其他你喜歡的架構，也許其他架構會更适合你的項目，更滿足你項目的需求。一個引擎肯定不能适用于所有情況。我提及的其他引擎也都非常不錯。如果可以的話，你甚至也可以編寫自己的3d引擎。但在這之前，我們還是來看看既存的webgl架構吧！

事實上，像three.js這種工具集的出現和存在很大程度上是因為在最近幾年中浏覽器中的javascript虛拟機的迅猛發展。在一些年之前，虛拟機的性能還不足以支援這種庫的存在，甚至連webgl都不可能投入實際應用。得益于虛拟機的技術進步，才讓webgl和像three.js這種工具集走進數以百萬計的web開發者的視線。

随着本書的逐漸深入，你會了解到three.js的更多細節。現在，我們先簡要地列出three.js的功能概述。

three.js掩蓋了3d渲染的細節

three.js将webgl原生api的細節抽象化，将3d場景拆解為網格、材質和光源（即它内置了圖形程式設計常用的一些對象種類）。

three.js是面向對象的

開發者可以使用上層的javascript對象，而不是僅僅調用javascript函數。

three.js功能非常豐富

除了封裝了webgl原始api之外，three.js還包含了許多實用的内置對象，可以友善地應用于遊戲開發、動畫制作、幻燈片制作、高分辨率模型和一些特殊的視覺效果制作。

three.js速度很快

three.js采用了3d圖形最佳實踐來保證在不失可用性的前提下，保持極高的性能。

three.js支援互動

webgl本身并不提供拾取（picking）功能（即是否知道滑鼠正處于某個物體上）。而three.js則固化了拾取支援，這就使得你可以輕松為你的應用添加互動功能。

three.js包含數學庫

three.js擁有一個強大易用的數學庫，你可以在其中進行矩陣、投影和矢量運算。

three.js内置檔案格式支援

你可以使用流行的3d模組化軟體導出文本格式的檔案，然後使用three.js加載；也可以使用three.js自己的json格式或二進制格式。

three.js擴充性很強

為three.js添加新的特性或進行自定義優化是很容易的事情。如果你需要某個特殊的資料結構，那麼隻需要封裝到three.js即可。

three.js同時支援html5 2dcanvas

盡管webgl日益流行，但是仍然有一些環境尚未支援。three.js可以同時在2d畫布中渲染大部分的3d内容，尤其是在那些無法成功擷取3d上下文的地方，可以讓你的代碼平滑的復原到其他解決方案。

另外很重要的一點就是了解有哪些事情是three.js無法做到的。three.js不是一個遊戲引擎，也不是一個虛拟現實平台。它缺少了一些在這些系統中常用的特性，比如公告闆（billboard）、頭像（avatar）和實體引擎。另外，如果你打算開發一個多人線上遊戲，那麼很可惜，three.js并沒有内置任何的網絡支援。如果你确實需要這些功能子產品，那你必須在three.js上層再進行二次封裝。盡管如此，three.js的簡潔和強大仍然使其成為開始學習webgl的最佳選擇之一。

好了，如果沒有其他問題，那麼就讓我們繼續，并開始寫一些代碼吧！