基于krpano的校園全景VR漫游系統的設計與實現

杭永沖，洪祎晨

（浙江財經大學東方學院，嘉興 314408）

基于krpano的校園全景VR漫游系統的設計與實現

杭永沖，洪祎晨

（浙江財經大學東方學院，嘉興 314408）

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

krpano；校園全景；漫游系統

0 引言

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

1 360°全景技術及krpano簡介

1.1 360°全景技術現在發展

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

1.2 360°全景技術的行業應用

（1）360°實景 3D 看房系統

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

（2）商業展示空間的360°全景展示

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

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

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

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

全景技術還可以運用在學校宣傳介紹當中，利用三維全景虛擬技術，可以使校內校外參觀學校的隨時隨地都能欣賞到學校的優美景色。由此來展示學校的實力和人文氣息，吸引更多省內省外的生源。同時也可以發布到網絡等一些平臺，作為學校電子產物。

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

健身會所、美容會所、酒吧、咖啡等一些娛樂空間可以借助全新的全景虛擬展示來展示他們所有的優勢，借助全景技術來把有利的信息傳達給顧客，這樣的話顧客就可以清晰地了解當地情況。

（6）開發區環境全景展示

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

（7）公司企業全景展示宣傳

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

1.3 krpano簡介

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

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

1.4 krpano特點

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

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

●使用獨有的krpano XML風格代碼編寫全景漫游系統。

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

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

●提供了簡單高效的批處理方式，可以在無需代碼的情況下迅速生成一個兼備基本功能的全景漫游項目。

2 校園全景VR漫游系統的具體實現

2.1 krpano環境搭建和軟件下載

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

圖1 krpano軟件初始文件

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

2.2 拍攝校園全景圖

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

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

圖2 前期拍攝的照片

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

圖3 后期甄選出來的照片

2.3 生成最基礎的全景圖虛擬場景

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

圖4 最基礎的全景圖虛擬系統

2.4 添加背景音樂

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

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

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

（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里面的代碼復制到vtourskin里去，找到這里放著兩段events代碼，我們將代碼放在tour.xml的scene標簽的外面，此時需要將keep屬性改為true狀態，這樣就可以把所有補地應用到所有的scene當中。

然后onviewchange這個事件后面的if語句對ro?tatewithview的判斷為真時，能讓logo的rotate屬性，即自身的旋轉與視角坐標hlookat保持一致。可以將如下代碼放到tour.xml某個空位置中，放在scene標簽的外面。

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按鈕，給場景中加入熱點，做好相關連接。效果圖如圖6所示。

圖6 添加場景熱點

2.7 純圖片啟動畫面

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

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 添加自定義地圖

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

圖9 自定義地圖效果圖

3 結語

虛擬現實技術的發展，在某種意義上說它改變人們的思維方式，甚至改變了一些對世界和空間的一種想象，它是一項發展中的、具有深遠的潛在應用方向的新技術[5]。現在越來越來的企業、學校、政府以及樓盤已經開始制作屬于自己的全景VR漫游系統，利用全景漫游，給自己的組織加入了一種新的宣傳方式，在自身品牌營銷和形象塑造上，取得了顯著的成效。

最終漫游系統實現成功，在本文附錄中有鏈接，并配有相應的圖來展示校園全景VR漫游系統。

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

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

[3]王延朝.基于Krpano的三維全景系統的開發和應用[D].（碩士學位論文）.授學位地:華東師范大學，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-）.男，江蘇南通人，本科，研究方向為計算機科學與技術

洪祎晨（1995-），女，浙江桐廬人，本科，研究方向為應用統計學

2017-06-13

2017-08-30