前言

創(chuàng)新互聯(lián)建站：自2013年起為各行業(yè)開拓出企業(yè)自己的“網(wǎng)站建設(shè)”服務(wù)，為成百上千家公司企業(yè)提供了專業(yè)的成都做網(wǎng)站、網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計和網(wǎng)站推廣服務(wù)， 按需求定制設(shè)計由設(shè)計師親自精心設(shè)計，設(shè)計的效果完全按照客戶的要求，并適當(dāng)?shù)奶岢龊侠淼慕ㄗh，擁有的視覺效果，策劃師分析客戶的同行競爭對手，根據(jù)客戶的實際情況給出合理的網(wǎng)站構(gòu)架，制作客戶同行業(yè)具有領(lǐng)先地位的。

本文主要介紹Three.js的開發(fā)基礎(chǔ)和基本原理，以及如何實現(xiàn)3D全景圖。想在web端實現(xiàn)3D全景圖的效果，除了全景圖片、WebGL外，還需要處理很多細(xì)節(jié)。據(jù)我所知，目前國外3D全景圖比較好的是KrPano，國內(nèi)很多3D全景服務(wù)是在使用krpano的工具。

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

Three.js

基于簡化WebGL開發(fā)復(fù)雜度和降低入門難度的目的，mrdoob)在WebGL標(biāo)準(zhǔn)基礎(chǔ)上封裝了一個輕量級的JS 3D庫—— Three.js。

在我看來，Three.js具有以下特點：

• 完備 具備3D開發(fā)所需完整功能，基本上使用WebGL能實現(xiàn)的效果，用Three.js都能更簡單地實現(xiàn)
• 易用 架構(gòu)設(shè)計比較清晰和合理，易于理解，擴(kuò)展性較好，且開發(fā)效率高于WebGL
• 開源 項目開源，且有一批活躍的貢獻(xiàn)者， 持續(xù)維護(hù)升級中

Three.js使WebGL更加好用，可以實現(xiàn)很棒的3D效果，比如：

• 游戲 hellorun
• 數(shù)據(jù)可視化 armsglobe

1、法向量問題

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

　　

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

　　

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

　　　　

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

2、光源與面塊顏色　　

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

　　

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

　　

var material1 = new __WEBPACK_IMPORTED_MODULE_0_three__["MeshLambertMaterial"]({
 emissive: new __WEBPACK_IMPORTED_MODULE_0_three__["Color"](style.fillStyle[0], style.fillStyle[1], style.fillStyle[2]),
 side: __WEBPACK_IMPORTED_MODULE_0_three__["DoubleSide"],
 shading: __WEBPACK_IMPORTED_MODULE_0_three__["FlatShading"],
 vertexColors: __WEBPACK_IMPORTED_MODULE_0_three__["VertexColors"]
 });

 var material2 = new __WEBPACK_IMPORTED_MODULE_0_three__["MeshLambertMaterial"]({
 color: new __WEBPACK_IMPORTED_MODULE_0_three__["Color"](style.fillStyle[0] * 0.1, style.fillStyle[1] * 0.1, style.fillStyle[2] * 0.1),
 emissive: new __WEBPACK_IMPORTED_MODULE_0_three__["Color"](style.fillStyle[0] * 0.9, style.fillStyle[1] * 0.9, style.fillStyle[2] * 0.9),
 side: __WEBPACK_IMPORTED_MODULE_0_three__["DoubleSide"],
 shading: __WEBPACK_IMPORTED_MODULE_0_three__["FlatShading"],
 vertexColors: __WEBPACK_IMPORTED_MODULE_0_three__["VertexColors"]
 });

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享名稱：Three.js開發(fā)實現(xiàn)3D地圖的實踐過程總結(jié)-創(chuàng)新互聯(lián)
網(wǎng)站網(wǎng)址：http://weahome.cn/article/ijspd.html