Threes.js入門篇之4 - World View Projection

 在三維世界，一個模型要想最終呈現到一個照片上，需要經過三次矩陣變換，這三個矩陣分別是：

       模型矩陣（World） - 檢視矩陣（View）- 投影矩陣（Projection）

一. 模型矩陣

       將 區域性座標系 下的模型座標（相對於自身原點的座標） 轉化到 世界座標系 下，通常稱為World Matrix。

       可以理解為把多個不同座標系下的子模型統一到一個世界座標空間。

       區域性座標系（模型座標）       -->    世界座標系

             World_Matrix *  [x,y,z]   -->    [x',y',z']

                               M *  P[5,0,5]   -->    P[20,8,4]   對應下圖中P點在世界座標系下的座標值。

二. 檢視矩陣

       將模型統一到一個座標度量之後，需要將座標變換到 觀察者的視野範圍內，也就是觀測視角。

       世界座標系      -->    檢視座標系（觀察者） 

             View_Matrix *  [x',y',z']   -->    [x'',y'',z'']

        通過 檢視矩陣 將場景中所有模型的 世界座標 轉化到 檢視座標系（如上圖 RGB座標軸）。

三. 投影矩陣

       將 使用者檢視（Viewer） 下的座標，經過透視投影進行成像，將三維空間變換到影象空間。

       可以理解為 透視投影的成像，即從三維空間變換到影象空間。

       檢視座標系      -->    影象座標系（UV空間） 

            Projection_Matrix *  [x'',y'',z'']   -->    [U,V,1]

       注：該影象來自於網上（不確定版權，如有侵權，還請告知！）

       因此，整個成像的過程可以用公式描述為：

                 [u,v,1] = Matrix_Projection * Matrix_View * Matrix_World * [x,y,z]