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

1、法向量問(wèn)題

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

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

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

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

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

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

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

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

 

2、光源與面塊顏色

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

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

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

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

　　

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

　　

3、POI標(biāo)注

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