基于krpano的校園全景VR漫游系統(tǒng)的設(shè)計與實現(xiàn)

杭永沖，洪祎晨

（浙江財經(jīng)大學(xué)東方學(xué)院，嘉興 314408）

基于krpano的校園全景VR漫游系統(tǒng)的設(shè)計與實現(xiàn)

杭永沖，洪祎晨

（浙江財經(jīng)大學(xué)東方學(xué)院，嘉興 314408）

720°全景漫游是當(dāng)今一種相對比較新穎的圖像處理技術(shù)，依靠逼真的臨場感和沉浸效果，一直很受現(xiàn)在人們的追求。我們可以通過全景漫游系統(tǒng)，往來于各個場景之間。利用現(xiàn)在科技的發(fā)展，體現(xiàn)校園的人文風(fēng)景，是一種比較新穎又生動的方式。首先對360°全景技術(shù)及krpano進行適當(dāng)了介紹，而后對校園全景VR漫游系統(tǒng)具體的設(shè)計與實現(xiàn)方式進行詳細的解說，最后制作完成發(fā)布到網(wǎng)站上。

krpano；校園全景；漫游系統(tǒng)

0 引言

在這個科技飛速發(fā)展的時代，科技在發(fā)展，全景技術(shù)以全新的視角，身臨其境的視覺體驗展現(xiàn)了全方位景色本身。用戶可以自己使用鼠標(biāo)上下左右旋轉(zhuǎn)，選擇自己的角度，放大和縮小場景，就好比在現(xiàn)場一樣，可以從俯瞰和仰視的角度任意觀看場景，感覺像在真實環(huán)境中存在相同的場景。它具有逼真的現(xiàn)場效果，你坐在電腦前，或在手機上，就可以走進真實的場景，場景漫游在空間各個地方是任意的，也可以由向?qū)ㄟ^特定的路徑瀏覽地圖，讓你遨游現(xiàn)場的場景，并可以操作控制，互動交流，讓你置身于真實的世界當(dāng)中。就好比任何實物放置在系統(tǒng)中，任意旋轉(zhuǎn)反應(yīng)，從任何角度顯示。因此可以以此來制作一個校園全景漫游系統(tǒng)，以此來展示校園的風(fēng)景人文。

1 360°全景技術(shù)及krpano簡介

1.1 360°全景技術(shù)現(xiàn)在發(fā)展

隨著現(xiàn)代科學(xué)和經(jīng)濟的發(fā)展，傳統(tǒng)的表現(xiàn)方式已不能適應(yīng)發(fā)展的需求了。360°全景技術(shù)已經(jīng)廣泛應(yīng)用于現(xiàn)在各行各業(yè)，為房地產(chǎn)行業(yè)、各級政府部門、裝飾行業(yè)、旅游業(yè)、酒店、專業(yè)會展商及企業(yè)宣傳推廣企業(yè)形象、產(chǎn)品和服務(wù)提供了一種更便捷、更完美、更持久的數(shù)字化展示方案[1]。

1.2 360°全景技術(shù)的行業(yè)應(yīng)用

（1）360°實景 3D 看房系統(tǒng)

運用3D全息技術(shù)，可以完美展示樓盤或者房間的全景地圖，擴大對公司品牌形象和房地產(chǎn)的宣傳力度，以此來吸引更多的人氣和投資，提高宣傳，從而促進銷售的力度。

（2）商業(yè)展示空間的360°全景展示

360°的商業(yè)展示可以使公司產(chǎn)品陳列廳、專賣店、旗艦店等相關(guān)場景展示不再受到時間和地點的限制，使參觀者變得更加方面和快捷。

（3）旅游景點360°全景展示

現(xiàn)在很多旅游景點就是使用360度全息展示景點，給參觀者一種身臨其境的感覺[2]，這樣就可以吸引更多的游客來此地觀光游覽；結(jié)合當(dāng)?shù)鼐包c的特色，來可以做出一系列具有收藏價值的商品，例如光碟，音像，紀念品等。

（4）擬校園三維全景展示

全景技術(shù)還可以運用在學(xué)校宣傳介紹當(dāng)中，利用三維全景虛擬技術(shù)，可以使校內(nèi)校外參觀學(xué)校的隨時隨地都能欣賞到學(xué)校的優(yōu)美景色。由此來展示學(xué)校的實力和人文氣息，吸引更多省內(nèi)省外的生源。同時也可以發(fā)布到網(wǎng)絡(luò)等一些平臺，作為學(xué)校電子產(chǎn)物。

（5）娛樂休閑空間的360°全景展示

健身會所、美容會所、酒吧、咖啡等一些娛樂空間可以借助全新的全景虛擬展示來展示他們所有的優(yōu)勢，借助全景技術(shù)來把有利的信息傳達給顧客，這樣的話顧客就可以清晰地了解當(dāng)?shù)厍闆r。

（6）開發(fā)區(qū)環(huán)境全景展示

開發(fā)區(qū)投資環(huán)境，可以利用全景技術(shù)做成虛擬導(dǎo)覽展示，然后發(fā)布到網(wǎng)上或做成光盤供給參觀者觀光。讓客商介紹變得一目了然，使之說服力強，可信度變得極高。然后將漫游系統(tǒng)發(fā)布到網(wǎng)上，變成24小時不間斷的在線展示。

（7）公司企業(yè)全景展示宣傳

企業(yè)運用全景技術(shù)可以更好的宣傳企業(yè)，讓潛在客戶和客戶真正看到公司的實力和文化環(huán)境。吸引大量的客戶，來獲得更多的合作機會。

1.3 krpano簡介

krpano是一款基于Flash的三維全景播放器，以體積小巧、靈活和高性能著稱，基于跨平臺的Adobe Flash播放器，是當(dāng)今世界上最流行的互動三維全景播放器，可以用于各種全景圖像和互動虛擬旅游模式，也可用作Flash和HTML5應(yīng)用程序[3]。

除了krpano Viewer之外，還有krpano工具，可幫助自動準(zhǔn)備全景圖像進行查看并使之成為即用型。通過拖放即可實現(xiàn)全景或旅游。

1.4 krpano特點

●krpano是屬于一款高度靈活、性能卓越的輕量化全景漫游軟件。

●可以兼容HTML5和Flash兩種模式，支持在Webgl下的WebVR展示，可以使使用者身臨其境。

●使用獨有的krpano XML風(fēng)格代碼編寫全景漫游系統(tǒng)。

●支持各種類型的全景圖以及全景視頻和環(huán)物全景，最終形成3D全景效果圖。

●支持各種在線投影模式。

●提供了簡單高效的批處理方式，可以在無需代碼的情況下迅速生成一個兼?zhèn)浠竟δ艿娜奥雾椖俊?/p>

2 校園全景VR漫游系統(tǒng)的具體實現(xiàn)

2.1 krpano環(huán)境搭建和軟件下載

先從官網(wǎng)上下載所需要的軟件，下載后解壓后如圖1所示。

圖1 krpano軟件初始文件

如圖所示，鼠標(biāo)雙擊krpano Testing Server.exe打開服務(wù)器，這樣krpano里面一些案例就可以運行在本地服務(wù)器里面了。

2.2 拍攝校園全景圖

krpano需要的環(huán)境已經(jīng)搭建完畢，接下來就是尋找校園優(yōu)美的產(chǎn)品。借助第三方拍攝全景圖的軟件——轉(zhuǎn)轉(zhuǎn)鳥，來拍攝校園全景圖。krpano軟件批處理的全景圖要求是2:1比例的全景圖，如長為400px，寬就為200px，嚴格要求，前后左右必須要連接起來，不然組合不了全景虛擬場景。

一開始拍攝初步選景為8個場景，每個場景拍攝了2張，如圖2所示。

圖2 前期拍攝的照片

后期選景，選取2張中拍攝效果最佳的一張，經(jīng)過PS后期稍微處理全景圖細節(jié)及接縫處的不吻合，最后產(chǎn)生如圖3中的8張圖：

圖3 后期甄選出來的照片

2.3 生成最基礎(chǔ)的全景圖虛擬場景

將已經(jīng)處理好的8張圖片全部選中，拖拽到MAKE VTOUR（MULTIRES）droplet.bat批處理文件上，此時會自動生成一個vtour文件，里面初始文件如圖4所示。

圖4 最基礎(chǔ)的全景圖虛擬系統(tǒng)

2.4 添加背景音樂

添加背景音樂需要做如下三件事情：

（1）首先將項目所需的音頻文件放在對應(yīng)的文件夾中，根目錄vtour也行，或者自己另外建一個sound文件夾也可以。但是前提是需要確保音頻的路徑是正確的。假如你是在項目中vtour文件夾放聲音文件，在tour.xml寫playsound動作，那么就可以直接寫文件名。如果是放在自己新建的sound文件夾，則需要寫成sound/文件名.mp3。

（2）然后將項目中viewer文件夾的plugins文件夾中的soundinterface.js和soundinterface.swf兩個文件拷貝到項目的plugins文件夾中，這樣就可以進行調(diào)用了。

（3）最后在tour.xml或者vtourskin.xml的某個空白位置插入如下代碼即可。

url.flash="%SWFPATH%/plugins/soundinterface.swf"

url.html5="%SWFPATH%/plugins/soundinterface.js"

rootpath=""

preload="true"

keep="true"/>

2.5 為默認皮膚添加補地logo

我們將自己需要補地的logo素材做成png的透明樣式，那樣不會影響整體效果，放在vtour根目錄下。

打開 nadir-logo.xml，tour.xml和 vtourskin.xml，把nadir-logo.xml里面的代碼復(fù)制到vtourskin里去，找到這里放著兩段events代碼，我們將代碼放在tour.xml的scene標(biāo)簽的外面，此時需要將keep屬性改為true狀態(tài)，這樣就可以把所有補地應(yīng)用到所有的scene當(dāng)中。

然后onviewchange這個事件后面的if語句對ro?tatewithview的判斷為真時，能讓logo的rotate屬性，即自身的旋轉(zhuǎn)與視角坐標(biāo)hlookat保持一致?？梢詫⑷缦麓a放到tour.xml某個空位置中，放在scene標(biāo)簽的外面。

url="krpano-roundlogo.png"

keep="true"

ath="0"

atv="90"

distorted="true"

scale="1.0"

rotate="0.0"

rotatewithview="false"

onclick="switch（rotatewithview）;invalidatescreen（）;"/>

最終補地logo效果圖如圖5所示。

圖5 補地logo效果圖

2.6 添加熱點

給虛擬全景地圖添加熱點，可以鏈接到其他場景。首先打開項目工程中tour_editor.html文件，點擊左上角菜單中的add hotspot按鈕，給場景中加入熱點，做好相關(guān)連接。效果圖如圖6所示。

圖6 添加場景熱點

2.7 純圖片啟動畫面

為了增加效果的展示，給項目添加開始時的啟動畫面，同時也是為了給場景緩沖出來，做出準(zhǔn)備，添加如下代碼即可。

if（%1==0.35,set（alphavalue,1）,set（alphavalue,0.35））;tween（layer[skin_title_logo3].alpha,%1,1,default,tweenintrobut?tonalpha（get（alphavalue）））;

添加啟動畫面后，啟動畫面就是如圖7所示的畫面。

2.8 為場景增加krpano雨雪特效

（1）在krpano安裝包中，找到snow.swf以及snow.js兩個文件，將文件拷貝到vtour文件夾的plugins文件夾中去。

圖7 啟動畫面效果圖

（2）然后在想要的scene里的onstar中后面添加onstart=”snowballs（）;”這樣就是給項目選擇了雪球特效。最后在該scene里面增加一行，寫上[4]，如下代碼所示：

效果圖如圖8所示。

圖8 雨雪特效效果圖

2.9 添加自定義地圖

為了增加場景的真實性，在左上角做了自定義地圖，并用坐標(biāo)標(biāo)注了像素位置的點，用弧長半徑表示已經(jīng)在看的90度角。激活地圖點是綠色，未激活的是藍色。參考了相關(guān)krpano二次開發(fā)的技術(shù)文檔，這里代碼較多，感興趣的可以上網(wǎng)搜查一些資料。最終效果圖如圖9所示。

圖9 自定義地圖效果圖

3 結(jié)語

虛擬現(xiàn)實技術(shù)的發(fā)展，在某種意義上說它改變?nèi)藗兊乃季S方式，甚至改變了一些對世界和空間的一種想象，它是一項發(fā)展中的、具有深遠的潛在應(yīng)用方向的新技術(shù)[5]?，F(xiàn)在越來越來的企業(yè)、學(xué)校、政府以及樓盤已經(jīng)開始制作屬于自己的全景VR漫游系統(tǒng)，利用全景漫游，給自己的組織加入了一種新的宣傳方式，在自身品牌營銷和形象塑造上，取得了顯著的成效。

最終漫游系統(tǒng)實現(xiàn)成功，在本文附錄中有鏈接，并配有相應(yīng)的圖來展示校園全景VR漫游系統(tǒng)。

[1]國搜百科.720全景展示[OL].2015,12.http://m.chinaso.com/baike/baikedetail?from=baikec.

[2]吳躍生.淺談360度全景攝影技術(shù)在數(shù)字化虛擬博物館中的應(yīng)用[J].中國電子商務(wù)，2014.

[3]王延朝.基于Krpano的三維全景系統(tǒng)的開發(fā)和應(yīng)用[D].（碩士學(xué)位論文）.授學(xué)位地:華東師范大學(xué)，2012.

[4]krpano教程.為場景添加krpano雨雪特效[OL].2016,7.http://www.krpano360.com/shijiaoxiangguan-weichang.

[5]百度百科.360°全景漫游[OL].2016,1.http://baike.baidu.com/link?url=MA_3FMqdfLpRfLnBMN

[6]盧鏗.科技改變生活[J].商周刊，2011

Abstract：720 degree panoramic roaming is a relatively new image processing technology,which relies on realistic telepresence and immersion effect.It has been very popular with the people.We can travel from one scene to another through a panoramic roaming system.It is a new and viv?id way to make use of the development of science and technology to reflect the cultural scene of the campus.Introduces the 360 degree pan?oramic technology and krpano,and then explains the design and implementation of the campus panoramic VR roaming system in detail,and finally completes the publication to the website.

Keywords：Krpano;Campus Panorama;Walkthrough System

Design and Implementation of Campus Panoramic VR Walkthrough System Based on Krpano

HANG Yong-chong,HONG Yi-chen
（Dongfang College,Zhejiang University of Finance and Economics,Jiaxing 314408）

1007-1423（2017）25-0057-05

10.3969/j.issn.1007-1423.2017.25.015

杭永沖（1996-）.男，江蘇南通人，本科，研究方向為計算機科學(xué)與技術(shù)

洪祎晨（1995-），女，浙江桐廬人，本科，研究方向為應(yīng)用統(tǒng)計學(xué)

2017-06-13

2017-08-30