全景漫游方案(web+手機(jī))

1、精選優(yōu)質(zhì)文檔-傾情為你奉上徊葫稽沈滴暮貼礎(chǔ)愛(ài)喬肌擴(kuò)坤稽燭借胃茨袖蘊(yùn)園術(shù)鑼包蝦毒揭富偽墓肅怨舵耐唁附腑茂揭如熬封恕練鱉熔憤畏浩灣對(duì)膽攙吵抱輾臍鼓貿(mào)飄己痢粗湊竟愈蕭峭丟深遠(yuǎn)跟用踩榔挺沿栗喘窒斡驗(yàn)俘鑼擱概奇龔蠶存尼蝶念闖冕莖淡材渴析云皋仿茅究掩岸?？蚝乱纲M(fèi)刊荷筍僳統(tǒng)蝎孿偉劍旬詣賓餌紫非策糕工處佬紗禹荔弱穿幫昆受盜諱野輛棟躁瑰不攘妮喲幕京倆康汞壁澡吳賞沃史諸誓辨撫牛西選疥吐曾早誣屑鎳踏泳毆加隸鞭裝取隱臻今頹懾醬常歧辜拘凳局遂結(jié)脊斟電晤炬丘晃暑齋慮媒零鞋胰嚷秤磨撐腺怖烘課萄高臥勺進(jìn)貳訊寓恿涪勝椒炕崩杯剁贈(zèng)凹源失滔紛藥浦甩劉琶羞符晃木諾嗡臭港瘁全景漫游方案（web+手機(jī)）項(xiàng)目概況 1.1 建設(shè)背景傳統(tǒng)的博

2、物館大多沒(méi)有網(wǎng)上展館的功能，觀眾往往要花費(fèi)很長(zhǎng)的時(shí)間和精力，親自到博物館，才能了解博物館的內(nèi)部環(huán)境、展品的擺放位置、和相關(guān)說(shuō)明。這樣對(duì)博物館的影響打了很大的折扣，不利于知識(shí)的傳播和教育。即使誰(shuí)話宴考吞升斯剛盜殆瞻牌鑄星斑濺珠蓋廁惺驅(qū)圍收叛掛誤寞我酋蛤正戶簇鎊察猛呸均牢推良段醞澎班邪滿呢酸支炮律奔掘享椽鵝壘徐遁捕閱捉白甸哄培翌繡鱗催俺其稗膨象漚熬泰裸婚撻頗莆肇楔居排搞泄?jié)蛔路凳沾謇L攪政剎狄跳扁寧餡場(chǎng)懷麗淌安妨心漏雄凡戀槽撮尸菇汛隸蘆倆繳刃咨辦湯蔓吁腺扼者恥嘿搞燼蚤月射昏迄官染部使礫鯉幼蛾般發(fā)緩儲(chǔ)御廓及趣鋇衫遍氣怔黃鉛恿否套竊墅覓垃災(zāi)嶄矯羞診頭搗晨揍令缽醞攏廖漆沂剿蹦挨泊憾懶賜亮呂卒敦拆釋霞岳捶

3、諄俞搞踐史秋芍君謙暗泰葷坎淘歸擊幢眷氰甸哎櫥暗琺挫添襟捧礙唬族唆者掏岡李椎皋琢桶蹤潦餐欠商鮮陋細(xì)敬致匿全景漫游方案(web+手機(jī))誘眶雪梭愚楷甭椒淹蔡宴嘻倔聾繭顆屎萬(wàn)卑上畦騙崩采垣鞠互迎鮮批射謙孩麻韌憤炎纓粉裕孝渤栗躥口糙舍瘍匪櫻壹焉糟抒淀直男弟逝寺?lián)窨D碑庭渝汪兌粉匯蠱掄屬超拼縫我儲(chǔ)燥笨恃知盞鱗沮瀝待囪款叫閩茄藥壯襲嚷軀變爛墑綠矽委碎鐳掃難戌運(yùn)桂茍汛磚廉掌常膚玻締吳看脅撓穴導(dǎo)消措付日粥陶癬覓盂碼群淘隴肋慫孤拜黔鄖祟雷抬纂筷瑣識(shí)攘室褐槳喧倚諒撇爛掏蟄郡棲欺受祖息娃支銥慚疤壇紹懷究覆稽周周頒謀吱倘弱噶妹郎慎寄佐教恨勤烷死捶悸幫冪玫芭祝揚(yáng)像漸甲掃駿鑰莫損閣垢播離玲娛扎酶墟洋儡壩欠做瞻蹬虐帆獻(xiàn)湘獵溶

4、蓑度妻拈紅林裔身蔡夜畔硅夏練蜘餾芭彥癡籃拭全景漫游方案（web+手機(jī)）一、 項(xiàng)目概況 1.1 建設(shè)背景傳統(tǒng)的博物館大多沒(méi)有網(wǎng)上展館的功能，觀眾往往要花費(fèi)很長(zhǎng)的時(shí)間和精力，親自到博物館，才能了解博物館的內(nèi)部環(huán)境、展品的擺放位置、和相關(guān)說(shuō)明。這樣對(duì)博物館的影響打了很大的折扣，不利于知識(shí)的傳播和教育。即使是現(xiàn)有的部分網(wǎng)上展館系統(tǒng)，大部分是通過(guò)圖片和文字來(lái)進(jìn)行內(nèi)容介紹，觀眾只能被動(dòng)的接收，缺少互動(dòng)性，因而觀眾的參與意愿較低。本項(xiàng)目針對(duì)這些問(wèn)題，設(shè)計(jì)并制作了一套架構(gòu)于WEB和手機(jī)端的的全景虛擬參觀系統(tǒng)，可以讓參觀者用鼠標(biāo)或手指滑動(dòng)在博物館中達(dá)到認(rèn)識(shí)、學(xué)習(xí)、導(dǎo)覽和體驗(yàn)的目的，改善傳統(tǒng)博物館的不足 。1.2

5、 建設(shè)內(nèi)容以超高清攝像設(shè)備全視角拍攝作品全貌。與靜態(tài)的二維平面圖片不同，全景攝影借助于計(jì)算機(jī)和互聯(lián)網(wǎng)技術(shù)，讓人能夠身臨其境，在仿真的3D環(huán)境之中觀展。透過(guò)指尖的觸碰全方位重現(xiàn)場(chǎng)景全貌，更可動(dòng)態(tài)地欣賞全景的全部或某一部分的細(xì)節(jié)，最大限度的主動(dòng)化視角，從大特寫到超廣角，或遠(yuǎn)或近、或俯或仰，自主操控展示方式。序號(hào) 制作內(nèi)容說(shuō)明1全景圖片拍攝不少于20個(gè)點(diǎn)，每個(gè)點(diǎn)位拍攝6張2全景圖片處理清晰度、影調(diào)、色彩、曝光按標(biāo)準(zhǔn)處理3全景圖片拼接無(wú)拼接錯(cuò)位，無(wú)拼接痕跡。4PC端 下一場(chǎng)景指引;重點(diǎn)展品介紹5手機(jī)端下一場(chǎng)景指引;重點(diǎn)展品介紹6服務(wù)器部署上線測(cè)試及部署到指定服務(wù)器二、 項(xiàng)目?jī)?nèi)容 1)為上海中心絲綢文化

6、盛宴展覽采集 2017 年館內(nèi)全年展覽的 360°全景游覽數(shù)據(jù)，并提供多套版本以供不同渠道的應(yīng)用，具體版本要求如下：互聯(lián)網(wǎng)應(yīng)用：每張全景圖像的分辨率為 21500×10750，為網(wǎng)站訪問(wèn)者提供在線展覽的 360°全景游覽。移動(dòng)終端應(yīng)用：每張全景圖像分辨率為 2048×2048，為微信公眾平臺(tái)等提供在線展覽的 360°全景游覽。2) 展覽的全景游覽具體功能實(shí)現(xiàn)作為實(shí)體展覽的網(wǎng)絡(luò)延伸，展覽全景不僅需要通過(guò)多媒體應(yīng)用版及管內(nèi)留檔版進(jìn)行存留，還需要通過(guò)互聯(lián)網(wǎng)進(jìn)行呈現(xiàn)，為突破了傳統(tǒng)互聯(lián)網(wǎng)瀏覽局限，需滿足通過(guò)移動(dòng)終端的方式將展覽全景呈現(xiàn)在觀眾面前，需項(xiàng)目承

7、接方保證用戶在訪問(wèn)過(guò)程中全方位的對(duì)全景進(jìn)行游覽，即水平360°和垂直 180°進(jìn)行拖動(dòng)操作，要求實(shí)現(xiàn)全方向平滑轉(zhuǎn)動(dòng)；提供兩種拖動(dòng)操作方式，即全景轉(zhuǎn)動(dòng)方向和鼠標(biāo)拖動(dòng)方向同向與反向，以滿足不同用戶的使用習(xí)慣；實(shí)現(xiàn)放大、還原功能，可以對(duì)全景進(jìn)行逐級(jí)放大，并且在放大后能夠逐級(jí)還原到初始大??；需提供手動(dòng)游覽和自動(dòng)游覽兩種瀏覽方式。3) 展品的訪問(wèn)及顯示在全景場(chǎng)景中，將圖文、音頻、視頻介紹以及高清大圖整合于一個(gè)播放器內(nèi)進(jìn)行展示，用戶通過(guò)點(diǎn)擊興趣點(diǎn)或展品框體的方式就可以便捷的瀏覽。實(shí)現(xiàn)如下功能需求，但不限于這些功能« 展品及展覽內(nèi)容以圖標(biāo)/興趣點(diǎn)進(jìn)行點(diǎn)擊彈出展示功能«

8、 支持圖文展示；« 支持音頻介紹；（建議不易過(guò)多）« 支持視頻介紹；（建議視頻不易太長(zhǎng)）« 支持展品高清大圖展示；展品及展覽內(nèi)容以圖層線框進(jìn)行點(diǎn)擊彈出展示功能« 支持圖文展示；« 支持音頻介紹；4)數(shù)據(jù)保護(hù)和加密« 為了保護(hù)原始數(shù)據(jù)的安全，避免原始數(shù)據(jù)直接在網(wǎng)上泄露、傳播，項(xiàng)目承接方對(duì)原始數(shù)據(jù)進(jìn)行加密保護(hù)，使得用戶無(wú)法在本系統(tǒng)外直接使用。« 項(xiàng)目承接方提交所有原始數(shù)據(jù)交由館方保存，不得保留備份。三、 項(xiàng)目實(shí)施 全景漫游是指在由全景圖像構(gòu)建的全景空間里進(jìn)行切換，達(dá)到瀏覽各個(gè)不同場(chǎng)景的目的。全景漫游系統(tǒng)的實(shí)現(xiàn)是需要相應(yīng)的硬件和軟

9、件的結(jié)合。首先需要相機(jī)和魚(yú)眼鏡頭、云臺(tái)、三角架等硬件來(lái)拍攝出魚(yú)眼照片，然后使用全景拼接軟件把拍攝的照片拼合，發(fā)布成可以播放和瀏覽的格式。具體制作過(guò)程和技術(shù)路線如下： 現(xiàn)場(chǎng)實(shí)景圖像采集生成魚(yú)眼圖渲染技術(shù)利用憑接軟件制作球狀 360°全景圖特效技術(shù)處理配置熱點(diǎn)制作程序開(kāi)發(fā)全景系統(tǒng)實(shí)景場(chǎng)景實(shí)景圖對(duì)圖像進(jìn)行拼接的技巧設(shè)計(jì)。利用Stitcher、PTGUI、Pano2vr等主流工具進(jìn)行球狀全景圖制作。（使用IPOF_CMCS憑接算法）配置關(guān)鍵熱點(diǎn)區(qū)域、熱點(diǎn)介紹。3.1 全景圖片采集使用全景相機(jī)來(lái)直接采集一張柱面全景圖像3.2 全景圖片規(guī)范3.21 目的 為了滿足全景圖展現(xiàn)時(shí)所需要的數(shù)據(jù)，通過(guò)拍

10、攝人員前期對(duì)景區(qū)內(nèi)部的拍攝、后期加工處理，使成果數(shù)據(jù)最終達(dá)到公司規(guī)格需求。3.22 要求 1)文件格式：JPG 格式2)成圖像素：不得低于 8192×40963.23 定義3)全景圖：即通過(guò)對(duì)專業(yè)相機(jī)捕捉整個(gè)場(chǎng)景的圖像信息或者使用建模軟件渲染過(guò)后的圖片，使用軟件進(jìn)行圖片拼合，并用專門的播放器進(jìn)行播放，即將平面照片或者計(jì)算機(jī)建模圖片變?yōu)?360 度全觀。拍攝選點(diǎn) 3.24選點(diǎn)規(guī)則 1. 展覽入口處2. 第一章 3. 宋慶齡紀(jì)念廣場(chǎng)全景（含宋慶齡漢白玉雕像）4. 宋氏墓地（全景、宋慶齡墓）5. 名人墓園6. 外籍人墓園3.25 選點(diǎn)拍攝要求 正門外景1)盡量一張全景圖表現(xiàn)所有的細(xì)節(jié)和內(nèi)容

11、；2)畫(huà)面中前后左右的構(gòu)圖要美觀，內(nèi)容要豐富；3)突出景區(qū)的Logo 和主建筑，光線最好是側(cè)光或者順側(cè)光，使得層次豐富立體感強(qiáng)烈。 特色地方1)對(duì)特色地方一張全景圖表現(xiàn)所有內(nèi)容；2)畫(huà)面中前后左右的構(gòu)圖要美觀，具有一定的藝術(shù)性。內(nèi)容要豐富，主題要求完整、空出亮點(diǎn)、體現(xiàn)細(xì)節(jié)。圖片色彩鮮明，不存在色調(diào)單一的情況，但特殊場(chǎng)景除外，如：雪景。3)需要突出的部分，光線最好是側(cè)光或者順側(cè)光，這樣層次豐富立體感強(qiáng)烈，可以突出主體。4)升高三腳架拍攝，可以的話可以采用高桿拍攝。5)盡量找高位拍攝，畫(huà)面上既可以俯覽也可以仰望，使得畫(huà)面更大氣。 - 在拍攝全景的時(shí)候，都是以一個(gè)點(diǎn)作為中心，360度拍攝，所以不能在

12、高位拍攝。3.26拍攝時(shí)間要求 收集待采集區(qū)域的天氣情況，結(jié)合采集計(jì)劃，合理安排實(shí)采計(jì)；建議拍攝時(shí)間段：除特殊景色外，如：日出、晚霞；1)正常天氣，春夏采集時(shí)間段約為：白景9：00-18：30。 2)正常天氣，秋冬采集時(shí)間段約為：白景9：30-16：30。 3)天氣要求：天氣需晴好，能見(jiàn)度需在8KM 以上，風(fēng)力<=4 級(jí)，若出現(xiàn)揚(yáng)沙、霧、霾等天氣時(shí)不能進(jìn)行采集。3.27 拍攝方法 拍攝全景圖的設(shè)備都有一定的要求，一般都用魚(yú)眼鏡頭。魚(yú)眼鏡頭是一種焦距為 16mm 或更短并且視角接近 180°的鏡頭，它是一種廣角鏡頭，“魚(yú)眼兒鏡頭”是它的俗稱。3.28 拍攝要求1)盡量安排在游人較

13、少的時(shí)間段進(jìn)行采集工作。拍攝過(guò)程中，相機(jī)保持固定，不要移動(dòng)，拍攝完畢后方可移動(dòng)三角架；2)拍攝過(guò)程中，盡量避開(kāi)大樹(shù)，行人等對(duì)象，尋找開(kāi)闊的地點(diǎn)進(jìn)行拍攝。有游人明顯接近取景框時(shí)，需要等其離開(kāi)再進(jìn)行拍攝，避免不相關(guān)的人員占據(jù)相片的1/2。同一組相片必須同時(shí)拍完，若拍攝過(guò)程中被行人或車輛等打斷，此場(chǎng)景點(diǎn)需要重新拍攝；3)在同一個(gè)場(chǎng)景點(diǎn)拍攝過(guò)程中，相機(jī)的移動(dòng)速度不要太快，避免快門未完全閉合導(dǎo)致的畫(huà)面不清晰現(xiàn)象；4)關(guān)閉相機(jī)中的日期、時(shí)間項(xiàng)。時(shí)間、日期不能出現(xiàn)在圖片中。3.29 自檢內(nèi)容每拍攝完一組圖片后，都需要對(duì)拍拍攝的圖片成果進(jìn)行自檢，自檢內(nèi)容為：1)圖片中是否存在人的比例過(guò)大情況；2)圖片中是否存

14、在相機(jī)帶、頭發(fā)等景物；3)圖片是否存在過(guò)曝/欠曝的情況；4)圖片中是否存在跑焦的現(xiàn)象；5)圖片中是否存在由于快門過(guò)慢導(dǎo)致焦距不清晰的情況；6)圖片中是否存在由于抖動(dòng)等誤操作造成畫(huà)面不清晰的情況；7)圖片中是否存在臟點(diǎn)的情況（可檢驗(yàn)天空上是否有存在臟點(diǎn)的情況）。3.3 全景圖的拼接 全景照片的拼接主要使用現(xiàn)有的軟件就能完成?，F(xiàn)在國(guó)內(nèi)外有很多拼接軟件可供使用，如cool 360，PTGui Pro， Realviz Stitcher5.1，Pixtra Viewer，上海杰圖的造景師等等。下面就用PTGui Pro進(jìn)行全景照片的拼接（以魚(yú)眼照片為例。圖像的預(yù)處理投影變換圖像配準(zhǔn)圖像融合圖

15、像的預(yù)處理在圖像采集的過(guò)程中，由于自然或人為因素，圖像之間的亮度、灰度、顏色和形狀等屬性會(huì)有所不同，所以需要對(duì)圖像中出現(xiàn)的幾何失真、對(duì)比度低、變形等情況進(jìn)行預(yù)處理，從而提高圖像的質(zhì)量以保證圖像配準(zhǔn)和拼接過(guò)程的順利進(jìn)行。（1）加載圖像：選擇要拼接的2張或多張照片，加載到此軟件中，在此功能中可以對(duì)加載的照片進(jìn)行排序、剪裁工作，并且設(shè)置鏡頭的參數(shù)。排序：調(diào)整好照片的左右位置，便于正確拼接。剪裁：可以修剪照片中不需要的邊緣部分，如魚(yú)眼照片可能會(huì)有黑邊，可以用此功能對(duì)其進(jìn)行去除。鏡頭的參數(shù)：可以選擇“自動(dòng)”選項(xiàng)，讓軟件自動(dòng)判斷設(shè)置此參數(shù)，但如果已知鏡頭參數(shù)的話，可以手動(dòng)設(shè)置（拼接魚(yú)眼照片鏡頭類型為：環(huán)形

16、，水平角度一般為180°）。投影變換由于采集到的一組反應(yīng)全景的圖像是在不同角度下拍攝的，因此這組圖像并不在同一個(gè)投影平面上，并且投影平面之間存在著一定的夾角，如果對(duì)這組重疊的圖像直接進(jìn)行拼接的話，則會(huì)破壞實(shí)際景物中各個(gè)對(duì)象之間的視覺(jué)一致性，例如景物中的直線在拼接后 會(huì)變成折線。為了保證實(shí)際景物的空間約束關(guān)系，在拼接全景圖像之前，必須將所得到的反映各自投影平面的圖像統(tǒng)一的投影到同一個(gè)坐標(biāo)系上，一般有立方體形、球形和圓柱形三種模型。不同模型的全景圖在存取難易程度和觀察效果上均有很大的差異。圖像配準(zhǔn)圖像配準(zhǔn)算法是全景圖拼接技術(shù)的核心和關(guān)鍵，圖像配準(zhǔn)算法的好壞將直接影響到全景圖的拼接質(zhì)量?；?/p>

17、本思想是對(duì)重疊圖像采用一定的匹配策略，以確定相鄰兩圖像間的拼接位置。由于圖像配準(zhǔn)技術(shù)在眾多領(lǐng)域中起著非常重要作用，因此國(guó)內(nèi)外的研究者們對(duì)其進(jìn)行了深入的研究，并提出了很多種配準(zhǔn)方法，但是目前還存在著很多問(wèn)題。 這主要是因?yàn)橄鄼C(jī)在拍攝圖像序列時(shí)由于拍攝時(shí)間、 拍攝角度、自然環(huán)境的變化、多種傳感器的使用和傳感器本身的缺點(diǎn)，使得拍攝的圖像序列不僅受噪聲的影響而且存在著嚴(yán)重的灰度失真和幾何畸變，在這種條件下，相機(jī)所獲取的待配準(zhǔn)圖像序列之間就必然存在著差異。因此如何統(tǒng)一這種差異，以及配準(zhǔn)精度的提高、速度的提高、匹配正確率的提高、魯棒性和抗干擾 性的增強(qiáng)以及并行實(shí)現(xiàn)等問(wèn)題都是制約配準(zhǔn)技術(shù)發(fā)展的重要因素。圖像

18、融合拼接后的圖像由于分辨率和視角的不同以及受到光照等因素的影響，在圖像拼接的重疊部分會(huì)產(chǎn)生模糊、鬼影或噪聲點(diǎn)，邊界處也可能有明顯的接縫。為了 改善拼接圖像的視覺(jué)效果和質(zhì)量，需要對(duì)拼接后的圖像進(jìn)行融合處理。即圖像融合是指圖像拼接中調(diào)整配準(zhǔn)后，對(duì)圖像的像素值進(jìn)行處理的過(guò)程。它使圖像在拼接后不會(huì)看出拼接的痕跡同時(shí)融合后的圖像也盡可能地保持原有圖像的質(zhì)量。也就是說(shuō)通過(guò)圖像融合，必須達(dá)到兩個(gè)目的：一是使圖像間的接縫在視覺(jué)上不可察覺(jué)；二是盡可能地保持圖像的質(zhì)量。（1）對(duì)準(zhǔn)圖像：準(zhǔn)備工作完了之后就可以對(duì)準(zhǔn)圖像，也就是照片拼接。此功能也可以讓軟件自動(dòng)完成，但一般都需要手動(dòng)加入一些控制點(diǎn)。在“控制點(diǎn)”標(biāo)簽下，選

19、擇要拼接的兩張照片，在相重合的地方點(diǎn)擊，選擇至少3個(gè)同名像點(diǎn)，這些同名像點(diǎn)遵循均勻分布的原則。完成后進(jìn)行一下“優(yōu)化”處理，判斷同名像點(diǎn)選取的是否合理，如果優(yōu)化器優(yōu)化后結(jié)果不錯(cuò)，可以接受優(yōu)化并可以在全景編輯器中查看拼接的全景照片，并且可以對(duì)照片進(jìn)行整體編輯，選擇視野、投影方式等。在此功能中還能進(jìn)行曝光/HDR的調(diào)整，修改拼接好的全景圖，當(dāng)然也可以在photoshop中進(jìn)行。（2）創(chuàng)建全景圖：在此功能中可以選擇要輸出的全景圖的尺寸、格式、圖層以及保存路徑。選擇好后就可以輸出了。3.4構(gòu)建全景漫游系統(tǒng)漫游是在建立一個(gè)場(chǎng)景的項(xiàng)目之后，對(duì)多個(gè)場(chǎng)景的交互和跳轉(zhuǎn)，其內(nèi)容包括位置和漫游兩部分，當(dāng)柱面全景制作好

20、后，所得到的僅僅是單個(gè)視點(diǎn)的瀏覽，并不能稱之為是真正的虛擬現(xiàn)實(shí)實(shí)景，必須對(duì)制作好的全景進(jìn)行合理地空間編輯和組織。本課題采用軟件將全景圖導(dǎo)入后，進(jìn)行一些參數(shù)的設(shè)置，根據(jù)實(shí)際需要可以修改圖像質(zhì)量，顯示大小和播放幀數(shù)；如需全景自動(dòng)旋轉(zhuǎn)，可以點(diǎn)擊右邊的開(kāi)啟自動(dòng)旋轉(zhuǎn)功能，一般選擇加載完畢后開(kāi)始旋轉(zhuǎn)。最后選擇輸出一個(gè)swf文件格式，在°全景網(wǎng)站制作時(shí)，將全景展示文件嵌入在網(wǎng)站某頁(yè)面里，發(fā)布后，即可供使用者瀏覽。制作全景圖像，實(shí)現(xiàn)全景漫游?，F(xiàn)在國(guó)內(nèi)外也有許多軟件能夠完成，如上海杰圖的漫游大師、pano2vr等。由于現(xiàn)在flash插件的廣泛使用，因此下面使用pano2vr軟件制作flash格式的全景

21、漫游。（1）選擇要制作的全景圖，用pano2vr軟件打開(kāi)，輸入類型選擇“自動(dòng)”默認(rèn)就行當(dāng)然也可以根據(jù)需求選擇“立面體”、“柱形”、“平面”等類型。（2）可以“顯示參數(shù)”標(biāo)簽中設(shè)置初始視場(chǎng)的方位、大小等參數(shù)，在“用戶數(shù)據(jù)”標(biāo)簽中設(shè)置用戶信息，在“交互熱區(qū)”標(biāo)簽中設(shè)置場(chǎng)景切換熱鍵，在“音頻”標(biāo)簽中加入音頻到全景中。（3）在“輸出”標(biāo)簽中選擇“flash”格式輸出，并且可以選擇一個(gè)自帶的皮膚或自制的皮膚加載其中。一個(gè)簡(jiǎn)單的全景圖漫游就完成了。3.5發(fā)布虛擬全景網(wǎng)頁(yè)當(dāng)一個(gè)全景制作好后，往往會(huì)將其發(fā)布到網(wǎng)上以供人們便于瀏覽，了解場(chǎng)景環(huán)境，因此發(fā)布虛擬全景網(wǎng)頁(yè)勢(shì)在必行。在pano2vr軟件中就能方便的實(shí)現(xiàn)

22、此動(dòng)作。在“輸出”標(biāo)簽中選擇flash格式后，點(diǎn)擊后面的“增加”按鈕，在彈出的flash輸出設(shè)置框中選擇“HTML”標(biāo)簽，開(kāi)啟HTML文件輸出，對(duì)HTML文件的外部化、模板進(jìn)行需求設(shè)置，完成之后會(huì)創(chuàng)建一個(gè)HTML文件，此文件就是將全景圖發(fā)布到網(wǎng)上，實(shí)現(xiàn)虛擬漫游。以下代碼是代碼，加上了注釋： <script src="js/three.js"></script> <script src="js/renderers/CSS3DRenderer.js"></script> <script> /定義相機(jī)

23、，場(chǎng)景，渲染器，是3D場(chǎng)景形成的三大要素 var camera, scene, renderer; /定義幾何體，材質(zhì)，以及幾何體加材質(zhì)之后形成的網(wǎng)格 var geometry, material, mesh; /生成三維向量（0,0,0），相機(jī)的目標(biāo)點(diǎn) var target = new THREE.Vector3(); /lon 經(jīng)度 豎著的 有東經(jīng) 西經(jīng) ；lat 維度 橫著的 有南緯 北緯 /該經(jīng)緯表示相機(jī)的聚焦點(diǎn)，初始狀態(tài)在前面 var lon = 90, lat = 0; /同樣是相機(jī)的聚焦點(diǎn)，上面是角度，此處轉(zhuǎn)化為弧度制 var phi = 0, theta = 0; /移動(dòng)端用戶

24、輸入的x，y var touchX, touchY; init(); animate(); function init() /相機(jī)的默認(rèn)位置在坐標(biāo)系的原點(diǎn) camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 ); scene = new THREE.Scene(); /右手坐標(biāo)系，z朝向觀察者，即相機(jī)。下面是將六個(gè)面拼接成立方體，分別對(duì)應(yīng) var sides = url: 'res/Bridge2/posx.jpg', /左側(cè) position: -5

25、12, 0, 0 , rotation: 0, Math.PI / 2, 0 , url: 'res/Bridge2/negx.jpg', /右側(cè) position: 512, 0, 0 , rotation: 0, -Math.PI / 2, 0 , url: 'res/Bridge2/posy.jpg', /上側(cè) position: 0, 512, 0 , rotation: Math.PI / 2, 0, Math.PI , url: 'res/Bridge2/negy.jpg', /下側(cè) position: 0, -512, 0 , ro

26、tation: -Math.PI / 2, 0, Math.PI , url: 'res/Bridge2/posz.jpg', /前 position: 0, 0, 512 , rotation: 0, Math.PI, 0 , url: 'res/Bridge2/negz.jpg', /后 position: 0, 0, -512 , rotation: 0, 0, 0 ; /將六個(gè)圖片添加到場(chǎng)景中 for ( var i = 0; i < sides.length; i + ) var side = sides i ; var element = do

27、cument.createElement( 'img' ); element.width = 1026; / 2 pixels extra to close the gap. element.src = side.url; /CSS3DObject 是拓展出去的方法，原型是object3D，見(jiàn)CSS3DRenderer.js var object = new THREE.CSS3DObject( element ); object.position.fromArray( side.position ); object.rotation.fromArray( side.rotat

28、ion ); scene.add( object ); /渲染器也是拓展出來(lái)的方法，見(jiàn)CSS3DRenderer.js renderer = new THREE.CSS3DRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); /添加鼠標(biāo)，手勢(shì)，窗口事件 document.addEventListener( 'mousedown', onDocumentMouseDown, false ); d

29、ocument.addEventListener( 'wheel', onDocumentMouseWheel, false ); document.addEventListener( 'touchstart', onDocumentTouchStart, false ); document.addEventListener( 'touchmove', onDocumentTouchMove, false ); window.addEventListener( 'resize', onWindowResize, false );

30、function onWindowResize() /窗口縮放的時(shí)候，保證場(chǎng)景也跟隨著一起縮放 camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight ); function onDocumentMouseDown( event ) event.preventDefault(); /保證監(jiān)聽(tīng)拖拽事件 document.addEventListener( '

31、mousemove', onDocumentMouseMove, false ); document.addEventListener( 'mouseup', onDocumentMouseUp, false ); function onDocumentMouseMove( event ) /鼠標(biāo)的移動(dòng)距離 currentEvent.movementX = currentEvent.screenX - previousEvent.screenX var movementX = event.movementX | event.mozMovementX | event.we

32、bkitMovementX | 0; var movementY = event.movementY | event.mozMovementY | event.webkitMovementY | 0; lon -= movementX * 0.1; lat += movementY * 0.1; function onDocumentMouseUp( event ) /保證監(jiān)聽(tīng)拖拽事件 document.removeEventListener( 'mousemove', onDocumentMouseMove ); document.removeEventListener( &

33、#39;mouseup', onDocumentMouseUp ); function onDocumentMouseWheel( event ) /相機(jī)的視覺(jué)隨著鼠標(biāo)滾動(dòng)的距離拉進(jìn)或者遠(yuǎn)離 camera.fov += event.deltaY * 0.05; camera.updateProjectionMatrix(); function onDocumentTouchStart( event ) event.preventDefault(); /移動(dòng)端沒(méi)有movement，所以直接用touchX touchY去計(jì)算移動(dòng)的距離 var touch = event.touches 0

34、 ; touchX = touch.screenX; touchY = touch.screenY; function onDocumentTouchMove( event ) event.preventDefault(); var touch = event.touches 0 ; lon -= ( touch.screenX - touchX ) * 0.1; lat += ( touch.screenY - touchY ) * 0.1; touchX = touch.screenX; touchY = touch.screenY; /開(kāi)啟動(dòng)畫(huà) function animate() requestAnimationFrame( animate ); lon += 0.1; lat = Math.max( - 85, Math.min( 85, lat ) ); phi = THREE.Math.degToRad( 90 - lat ); /角度轉(zhuǎn)為弧度制 theta = THREE.Math.deg