Three.js原始碼閱讀筆記(物件是如何組織的)_基礎知識

這是Three.js原始碼閱讀筆記第三篇。之前兩篇主要是關於核心物件的，這些物件主要圍繞著向量vector3物件和矩陣matrix4物件展開的，關注的是空間中的單一頂點的位置和變化。這篇將主要討論Three.js中的物體是如何組織的：即如何將頂點、表面、材質組合成為一個具體的物件。
Object::Mesh
這個建構子建構了一個空間中的物體。之所以叫「網格」是因為，實際上具有體積的物體基本上都是建模成為「網格」的。

實際上，Mesh類別只有兩個屬性，表示幾何形體的geometry物件和表示材質的material物件。 geometry物件在上一篇文章中已經介紹過，還有部分派生類別會在這篇部落格文章中介紹（透過這些衍生類別的建構過程，能更清楚地了解到Mesh物件的工作原理）；matrial物件及其衍生類別也將在這篇筆記中介紹。 Mesh對象的這兩個屬性相互緊密關聯，geometry對像中的face數組中，每個face對象的materialIndex用來匹配material屬性對象，face對象的vertexUVs數組用以依次匹配每個頂點在數組上的取值。值得注意的是，Mesh只能有一個material物件（不知這樣設計的意圖何在），如果需要用到多個材質，應將材質依照materialIndex順序初始化在geometry本身的materials屬性中。
Geometry::CubeGeometry
這個建構子建立了一個立方體物件。

建構子做的最重要的事在buildPlane。這個函數最重要的事情就是對scope的操作（上面的程式碼區塊中，scope就是this），包括：呼叫scope.vertices.push(vector)將頂點加入geometry物件；呼叫scope.faces.push(face)將表面加入到geometry對象，呼叫scope.faceVertexUvs[i].push(uv)方法將對應於頂點的材質座標加入geometry物件。程式碼的大部分都是關於產生立方體的邏輯，這些邏輯很容易理解，也很容易擴展到其他類型的geometry物件。

建構子的參數包括長、寬、高和三個方向的分段數。所謂分段，就是說如果將widthSeqments等三個參數都設定為2的話，那麼每個面將被表現成2×2=4個面，整個立方體由24個表面組成，正如同網格一樣。


除了一個大部分物件都有clone()方法，CubeGeometry沒有其他的方法，其他的XXXGeometry物件也大抵如此。沒有方法說明該物件負責組織和資料存儲，以及如何利用這些資料產生三維場景和動畫，封裝在另外的物件中定義的。 Geometry::CylinderGeometry

顧名思義，該建構子建立一個圓柱體（或圓台）物件。 代碼如下：

有了CubeGeometry建構函式的基礎，自己也應該能夠實作CylinderGeometry，我們只需要注意一下建構子各參數的意義。 radiusTop和radiusBottom表示頂部和底部的半徑，height表示高度。 radiusSegments定義了將圓週橫斷面多少份（該數字越大，圓柱更圓）， heightSegments定義了需要將整個身高高度縮短多少份，openEnded指定是否產生頂面和底面。

源碼中還有兩點註解的：該模型的本地原點是中關節炎的中點，而不是重心之類的，遇到上圓面的高度（y軸值）是height/ 2，下圓面是-height/2，這一點對圓柱體來說沒有差異，但對於上下半徑不同的圓台體存在差異了；還有該模型的頂面和採用Groundface3 類型表面，而第三種Face4 類型表面。 Geometry::SphereGeometry

這個建構子建立一個球體。 程式碼如下：/* 略*/
}


各參數的意義：radius指定半徑，widthSegments表示「經度」分帶數量，heightSegments “緯度”分帶數目。後面四個參數是任選的，表示經度的初始值和緯度的初始值。熟悉極座標的都了解，通常用希臘文φ(phi)表示緯度圈角度（經度） ），而用θ(theta)表示經圈角度（緯度）。這四個數的預設值分別為0，2π，0，π，藉由改變它們的值，可以創造出殘缺的球面（但是邊緣必須平行） ）。 源碼中，除了北極和南極的極圈內的區域是用face3類型表面，其他位置都是用face4類型表面。本地原點為球心。

幾何::PlaneGeometry 程式碼如下：
各參數意義：依次為寬度>高度、寬度分段數、高度分段數。想必讀者對這種構造「格網」的方式應該很熟悉了吧。
原始碼中得到一些其他資訊：平面被構造在x-y平面上，原點即矩形中心點。
Geometry::ExtrudeGeometry
該物件現在是構造一般幾何形體的方法，但是通常我們是將建模好的物件儲存在某種格式的檔案中，並透過loader加載進來，所以似乎鮮有直接用到該函數的機會。而且這個函數看起來還是半成品，很多設定一股腦地堆在options物件裡，我也沒有仔細研究。
Material::Material
Material物件是所有其他種類Material的原型物件。
this.visible = true;
this.needsUpdate = true;
};

先看一些較為重要的屬性：
屬性opacity為一個0-1區間的值，表示透明度。屬性transparent指定是否使用透明，只有在該值為真的時候，才會將其與混合（透明是渲染像素時，待渲染值與已存在值共同作用計算出渲染後像素值，達到混合的效果） 。

屬性blending，blendSrc，blendDst，blendEquation指定了混合方式和混合源Src和混合像素已有的像元值Dst的權重指定方式。預設（如建構函式中賦的預設值），新的像元值等於：新值×alpha 舊值×(1-alpha)。

我曾經困惑為何Material類別中沒有最重要的對象，表示紋理圖片的屬性。後來我理解了，其實材質和紋理還是有差別的，只能說某種材質有紋理的，但也有材質是沒有紋理的。材質影響的是整個形體的渲染效果，例如：「對一條線渲染為5px寬，兩端點為方塊，不透明的紅色」這段描述就可以認為是材質，而沒有涉及任何紋理。 和眾多Geometry物件一樣，Material物件除了通用的clone(),dellocate()和setValues()方法，沒有其他方法。以下是兩種最基本的材質物件。

Material::LineBasicMaterial };


屬性和linewidth顧名思義，指線的顏色和線的寬度（線沒有寬度，這裡的寬度是用來渲染的）。
屬性linecap和linejoin指定線條端點和連接點的樣式。 屬性fog指定該種材質是否收到霧的影響。
Material::MeshBasicMaterial
程式碼如下:
Texture::Texture

這個建構函式用來建立紋理物件。


後面的物件都是可選的，如果預設會填入預設值，而且往往都是填入預設值。
屬性magFileter和minFileter指定紋理在放大縮小時的過濾方式：最接近點、雙線性內插等。
從url產生一個texture，需要呼叫Three.ImageUtils.loadTexture(paras)，函數傳回一個texture類型物件。在函數內部又呼叫了THREE.ImageLoader.load(paras)函數，這個函數內部又呼叫了THREE.Texture()建構函數，產生紋理。