紅色科技小分隊(duì) 雅堂村扶貧項(xiàng)目
（成果展示： 漁村蘇維埃政府舊址-數(shù)字博物館）
前言
??前幾天（7月16號(hào)-18號(hào)）止邮，我去到了清遠(yuǎn)雅堂村開(kāi)啟我們團(tuán)隊(duì)的扶貧項(xiàng)目，我們的任務(wù)是為當(dāng)?shù)夭┪镳^掃描制作三維的數(shù)字博物館革为，這個(gè)項(xiàng)目隸屬于物聯(lián)網(wǎng)+比賽中，由各個(gè)高校自行主持舉辦舵鳞。清遠(yuǎn)雅堂村是廣東工業(yè)大學(xué)指定的扶貧村震檩，學(xué)校希望我們學(xué)生能夠發(fā)揮特長(zhǎng)，在雅堂村中制作一些別具特色的東西蜓堕。
??這次活動(dòng)每支團(tuán)隊(duì)都有1000元的經(jīng)費(fèi)抛虏，墻繪團(tuán)隊(duì)因?yàn)橛衅渌蝿?wù)，所以他們有6000元的經(jīng)費(fèi)（當(dāng)然顏料就是一筆不少的開(kāi)銷(xiāo)）
??雅堂村并沒(méi)有博物館套才，所以我們分配去了魚(yú)灣的蘇維埃政府舊址博物館迂猴，距離雅堂村大概半小時(shí)的車(chē)程，我們?nèi)斓某宰【驮隰~(yú)灣村的好世界賓館中背伴。（每天每間房90元错忱，我們開(kāi)了兩間房，經(jīng)費(fèi)在燃燒挂据，加上飯錢(qián)各個(gè)開(kāi)銷(xiāo)以清，最后我們只能盡快回來(lái)，否則本來(lái)要住一個(gè)星期的）
坑爹狀況
??在之前我們并沒(méi)有來(lái)過(guò)這個(gè)博物館崎逃，也不清楚會(huì)遇到什么樣的情況掷倔，所以我們?yōu)槿S掃描做了全方位的探索，探索的成果可以關(guān)注我Photogrammetry-學(xué)習(xí)之路系列个绍。
??去到當(dāng)?shù)夭虐l(fā)現(xiàn)勒葱，完完全全坑爹了浪汪。
- 博物館很破舊（這個(gè)其實(shí)是意料之中的）
- 展覽時(shí)間很短（早上9點(diǎn)半到下午4點(diǎn)半）
- 文物全部在玻璃里面不能拿出來(lái)（最坑爹的）
??這些突如其來(lái)的狀況，真的讓我們亂了手腳凛虽，不過(guò)當(dāng)即想到了全景博物館的方案死遭，畢竟之前也看到過(guò)類(lèi)似的效果，再加上之前張家榮制作的threejs全景絲綢之路給了我啟發(fā)凯旋。
??我覺(jué)得全景博物館未必不能做呀潭，只是還需要攻克兩個(gè)難點(diǎn)。
- 如何實(shí)現(xiàn)全景圖的坐標(biāo)定位至非，點(diǎn)擊事件
- 如何完成全景圖的制作
??猛然回頭钠署，我發(fā)現(xiàn)自己都掌握了解決方法的鑰匙
??張家榮的大作業(yè)是解決第一個(gè)問(wèn)題的鑰匙。
??而第二個(gè)難點(diǎn)的鑰匙真的是多虧了以前看高中電腦書(shū)的記憶象荒椭，我記得有軟件可以將攝像機(jī)的照片拼接起來(lái)谐鼎，制作出全景圖。
死馬當(dāng)活馬醫(yī)
??我確定了方案之后趣惠，就立馬開(kāi)始研究了狸棍。
??聰哥還提出全三維的方案，真是想讓我們累到半死不活呀味悄，之前搭建南沙政務(wù)大廳還嫌不夠累嗎草戈？
??首先要解決的是全景照片的問(wèn)題，因?yàn)榍罢邌?wèn)題即使沒(méi)有解決方案也沒(méi)關(guān)系傍菇，至少我可以用最原始的three.js來(lái)完成全景圖觀察，完整度至少還可以接受界赔。
??所以第一步想到的當(dāng)然還是百度一下丢习，畢竟不知道什么軟件比較適合。
??后面再百度的推薦下找到了ptgui軟件
??后面還是多虧了ghostxx.com淮悼，我在上面發(fā)現(xiàn)了更多的全景圖制作軟件咐低，我一個(gè)一個(gè)下載下來(lái)測(cè)試（當(dāng)然我測(cè)試的標(biāo)準(zhǔn)是最新更新版本為主）
??最后我覺(jué)得Kolor Autopano Giga 4.4 這款軟件是最好用的全景圖軟件。
??那個(gè)時(shí)候剛好研究到了接近晚上袜腥，基本把最大的難關(guān)解決了见擦，我讓建模團(tuán)隊(duì)幫忙拍一圈試試全景圖的制作。
??后面在回去賓館之后羹令，成功的制作出完美的全景圖（除了地面和天花板）
??第一個(gè)難點(diǎn)就順利被解決了鲤屡。
??回去賓館只有，下一個(gè)難點(diǎn)接踵而至福侈，我把張家榮的github文件下載下來(lái)酒来，進(jìn)行研究。
??原來(lái)是基于three.js實(shí)現(xiàn)的photo sphere viewer 插件肪凛，因崔思婷堰汉。
??后面去找photo sphere viewer（后面簡(jiǎn)稱(chēng)為PSV）的具體使用方法也別坑了辽社，想不到原制作者的github倉(cāng)庫(kù)已經(jīng)丟棄了，我拿了個(gè)很久很久的版本翘鸭，死活不知道同學(xué)怎么額外加入那么多其他腳本的滴铅。
??后面才發(fā)現(xiàn)，原來(lái)插件是有官網(wǎng)的就乓，而且官網(wǎng)上有API文檔汉匙，真實(shí)新大陸。
??有了方向之后档址，后面的工作就好辦了盹兢，主要就是在家榮的大作業(yè)上面進(jìn)行魔改測(cè)試PSV的用法。
PSV難點(diǎn)
??其實(shí)PSV的難點(diǎn)也還好啦守伸，基于three.js的針對(duì)全景圖的插件绎秒，學(xué)過(guò)three.js的我來(lái)說(shuō)難度不大。
??主要是摸清楚以下幾點(diǎn)
- PSV參數(shù)設(shè)置
- 實(shí)現(xiàn)窗口大小的實(shí)時(shí)更新
- 如何添加自定義標(biāo)記
- 如何實(shí)現(xiàn)全景圖跳轉(zhuǎn)
- 全局地圖顯示
- 如何實(shí)現(xiàn)標(biāo)記點(diǎn)擊出現(xiàn)嵌套html
PSV參數(shù)設(shè)置
- panorama - 全景圖路徑
- container - 嵌套的html標(biāo)簽
- （無(wú)視后兩個(gè)參數(shù)）
- navbar - 下面導(dǎo)航欄的參數(shù)設(shè)置
- size - 設(shè)置大小為瀏覽器窗口大心崮 （three.js偷學(xué)過(guò)來(lái)的）
- transition - 全景圖過(guò)渡用的參數(shù)
- latitude_range - 限制鏡頭移動(dòng)范圍
- lang - 按鈕提示
??很多參數(shù)官方都有給了见芹，API文檔里面也有詳細(xì)的參數(shù)設(shè)置。
??再初始化的階段涉及導(dǎo)航欄的參數(shù)蠢涝，通過(guò)導(dǎo)航欄可以制作出自定義的按鈕玄呛，從而實(shí)現(xiàn)全局地圖的顯示。這個(gè)后面涉及再詳細(xì)講解
實(shí)現(xiàn)窗口大小的實(shí)時(shí)更新
??這里最大的難點(diǎn)是理解resize傳入的參數(shù)CSSsize和二，這個(gè)不是單純傳數(shù)字而是傳入字符串徘铝，對(duì)于動(dòng)態(tài)窗口的字符串設(shè)置也是搞了好久才終于搞懂原理。
??不過(guò)弄好了之后其實(shí)也是令人意外的簡(jiǎn)單惯吕。
如何添加自定義標(biāo)記
??自定義標(biāo)記看了官方文檔之后就知道是addMarker函數(shù)惕它，鑒于每一個(gè)全景圖都需要制作多個(gè)標(biāo)記，我想到了用for循環(huán)遍歷數(shù)組的方式來(lái)生成對(duì)應(yīng)全景圖的標(biāo)記废登。
??這樣我就可以將參數(shù)存儲(chǔ)到對(duì)應(yīng)數(shù)組元素當(dāng)中淹魄。
??傳入的參數(shù)大概是這樣子的，所以數(shù)組中的每一個(gè)對(duì)象也是一個(gè)類(lèi)堡距。
??因?yàn)闃?biāo)記也分為兩種甲锡，一種是跳轉(zhuǎn)全景圖的，另一種是用于點(diǎn)擊顯示嵌套html的
??通過(guò) new 來(lái)聲明對(duì)象的各種相關(guān)的參數(shù)羽戒。
??然后將所有的元素統(tǒng)一放進(jìn)一個(gè)數(shù)組里面缤沦。
??這就是我對(duì)自定義標(biāo)記的數(shù)據(jù)管理。
??在實(shí)現(xiàn)這個(gè)結(jié)構(gòu)的過(guò)程中除了輸入數(shù)據(jù)很繁瑣之外易稠，最痛苦的莫過(guò)與坐標(biāo)的輸入疚俱，一開(kāi)始沒(méi)有弄清楚的坐標(biāo)返回函數(shù)，導(dǎo)致所有的坐標(biāo)都錯(cuò)誤地在控制臺(tái)輸入缩多，弄了一輪才發(fā)現(xiàn)問(wèn)題呆奕。
??后面為了方便輸入养晋，我專(zhuān)門(mén)將這種格式封裝成一個(gè)js字符串輸出到控制臺(tái)，然后復(fù)制粘貼批量制作出我想要的變量字符串梁钾。
如何實(shí)現(xiàn)全景圖跳轉(zhuǎn)
??全景圖跳轉(zhuǎn)官方也有一套模板的绳泉，我本來(lái)沒(méi)有封裝的，但是后面因?yàn)樘D(zhuǎn)的標(biāo)記太多了姆泻，我將它封裝一個(gè)函數(shù)了零酪。
??跳轉(zhuǎn)標(biāo)記最多的區(qū)域有兩個(gè)，所以針對(duì)這兩個(gè)庭院內(nèi)側(cè)和外側(cè)的區(qū)域都針對(duì)做了函數(shù)封裝拇勃。同時(shí)也有往庭院跳（第一張圖）和庭院往外跳（第二張圖）區(qū)別
??主要的核心代碼就是PSV.setPanoram(url,true)
??這里的運(yùn)行邏輯：
- 跳轉(zhuǎn)全景圖
- 清理當(dāng)前的標(biāo)記
- 然后設(shè)置當(dāng)前的全景圖狀態(tài)為False
- 將跳轉(zhuǎn)的全景圖設(shè)置為T(mén)rue
- 添加跳轉(zhuǎn)全景圖的標(biāo)記
- 隨機(jī)將鏡頭移動(dòng)到標(biāo)記中
??這里的去全景圖狀態(tài)是用來(lái)判斷當(dāng)前是哪一個(gè)全景圖在觀察四苇，在后面的地圖制作非常有用。
全局地圖顯示
??全局地圖就是導(dǎo)航欄下面的地圖按鈕
??實(shí)現(xiàn)點(diǎn)擊地圖對(duì)應(yīng)按鈕進(jìn)行跳轉(zhuǎn)
??這里的操作涉及到導(dǎo)航欄的自定義按鈕制作方咆，上面的參數(shù)是官方提供用來(lái)設(shè)置按鈕的基本屬性月腋。
??clickEvent是封裝好的按鈕跳轉(zhuǎn)函數(shù)，跳轉(zhuǎn)邏輯和標(biāo)記的跳轉(zhuǎn)基本一致瓣赂。
??最后一行加多了按鈕圖標(biāo)刷新的函數(shù)榆骚。
??通過(guò)這些方法實(shí)現(xiàn)全局地圖跳轉(zhuǎn)的功能。
??在制作的過(guò)程中我還加入了html5tooltip插件煌集，實(shí)現(xiàn)圖標(biāo)上方的提示標(biāo)簽妓肢，我以前些three.js有封裝過(guò)相應(yīng)的函數(shù)，直接拿來(lái)用了苫纤。
標(biāo)記點(diǎn)擊出現(xiàn)嵌套html
??普通標(biāo)記的嵌套Html我也封裝了函數(shù)
??通過(guò)markerInfo函數(shù)將按鈕的所有信息整合到一起碉钠，其中倒數(shù)第二個(gè)參數(shù)content是實(shí)現(xiàn)嵌套html的關(guān)鍵
??通過(guò)addMarker函數(shù)將content嵌套進(jìn)去，PSV就會(huì)自動(dòng)完成右側(cè)的彈出菜單,簡(jiǎn)單快捷卷拘。
??嵌套的html的內(nèi)容和id需要提前定義好喊废。
全屏按鈕BUG
??上面是已知問(wèn)題的解決方案，然而在測(cè)試的過(guò)程中恭金，我發(fā)現(xiàn)PSV自帶的全屏效果和地圖按鈕的窗口沖突了操禀，只要全屏就看不見(jiàn)地圖褂策。
??經(jīng)過(guò)調(diào)試横腿，我也不知道是哪里的問(wèn)題，最開(kāi)始以為是z-index的問(wèn)題斤寂，但是我調(diào)試的時(shí)候吧PSV的style都設(shè)為透明了耿焊，還是看不見(jiàn)彈出窗口。
??最后我只能重做全屏窗口遍搞。
??重做其實(shí)也并沒(méi)有那么難罗侯，以前寫(xiě)three.js的時(shí)候有寫(xiě)過(guò)相關(guān)的函數(shù)，這里也是直接復(fù)制套用了溪猿。效果也是立竿見(jiàn)影钩杰，很不錯(cuò)纫塌。
??同時(shí)我也想將PSV自帶的全屏圖標(biāo)轉(zhuǎn)換弄到自定義按鈕當(dāng)中，實(shí)現(xiàn)是這樣子的讲弄。
??PSV用的圖標(biāo)是SVG來(lái)的措左，我用Jquery把它加進(jìn)去。
手機(jī)自適應(yīng)問(wèn)題
??在手機(jī)上Chrome瀏覽器會(huì)出現(xiàn)鼠標(biāo)浮動(dòng)的問(wèn)題避除，需要在頭部加入以下代碼<meta name="viewport" content="width=device-width, initial-scale=1">
制作總結(jié)
??以上就是PSV使用過(guò)程中的全部技術(shù)難點(diǎn)怎披，也并沒(méi)有那么復(fù)雜，最難受的是數(shù)據(jù)輸入瓶摆，大量的數(shù)據(jù)等著我凉逛，這個(gè)過(guò)程非常繁瑣，所以后面經(jīng)常是生成代碼群井，復(fù)制粘貼進(jìn)去修改的状飞。
總結(jié)
??這次清遠(yuǎn)之行也還好，雖然突發(fā)狀況讓我們很慌蝌借，最后也還是有個(gè)明確方案解決問(wèn)題昔瞧。比起其他團(tuán)隊(duì)，我們的待遇好很多菩佑，博物館的影音室有空調(diào)自晰，平時(shí)工作都可以嘆空調(diào)，雖然拍全景的時(shí)候在房間里面拍照稍坯，很悶很熱酬荞，不過(guò)還可以回到影音室休息。
??目前所有的數(shù)據(jù)錄入已經(jīng)完成瞧哟，等建模團(tuán)隊(duì)把模型弄好基本就可以完成任務(wù)了混巧。
