前段時間連續(xù)上了一個月班，加班加點(diǎn)完成了一個3D攻堅項(xiàng)目。也算是由傳統(tǒng)web轉(zhuǎn)型到webgl圖形學(xué)開發(fā)中，坑不少，做了一下總結(jié)分享。

1、法向量問題

　　法線是垂直于我們想要照亮的物體表面的向量。法線代表表面的方向因此他們?yōu)楣庠春臀矬w的交互建模中具有決定性作用。每一個頂點(diǎn)都有一個關(guān)聯(lián)的法向量。

photoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)

　　如果一個頂點(diǎn)被多個三角形共享，共享頂點(diǎn)的法向量等于共享頂點(diǎn)在不同的三角形中的法向量的和。N=N1+N2；

photoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)

　　所以如果不做任何處理，直接將3維物體的點(diǎn)傳遞給BufferGeometry，那么由于法向量被合成，經(jīng)過片元著色器插值后，就會得到這個黑不溜秋的效果

　　photoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)

　　我的處理方式使頂點(diǎn)的法向量保持唯一，那么就需要在共享頂點(diǎn)處，拷貝一份頂點(diǎn)，并重新計算索引，是的每個被多個面共享的頂點(diǎn)都有多份，每一份有一個單獨(dú)的法向量，這樣就可以使得每個面都有一個相同的顏色

　　photoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)

 

2、光源與面塊顏色

　　開發(fā)過程中設(shè)計給了一套配色，然而一旦有光源，面塊的最終顏色就會與光源混合，顏色自然與最終設(shè)計的顏色大相徑庭。下面是Lambert光照模型的混合算法。

photoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)

　　而且產(chǎn)品的要求是頂面保持設(shè)計的顏色，側(cè)面需要加入光源變化效果，當(dāng)對地圖做操作時，側(cè)面顏色需要根據(jù)視角發(fā)生變化。那么我的處理方式是將頂面與側(cè)面分別繪制（創(chuàng)建兩個Mesh），頂面使用MeshLambertMaterial的emssive屬性設(shè)置自發(fā)光顏色與設(shè)計顏色保持一致，也就不會有光照效果，側(cè)面綜合使用Emssive與color來應(yīng)用光源效果。

　　photoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)

　　

photoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計培訓(xùn),網(wǎng)站建設(shè)培訓(xùn) View Code

　　

3、POI標(biāo)注

　　Three中創(chuàng)建始終朝向相機(jī)的POI可以使用Sprite類，同時可以將文字和圖片繪制在canvas上，將canvas作為紋理貼圖放到Sprite上。但這里的一個問題是canvas