基于Pano2VR的VR校園漫游交互系統(tǒng)研究及實現(xiàn)

摘" 要：該文主要介紹借助VR全景相機、Pano2VR研究VR校園漫游交互系統(tǒng)，以搭建全景漫游環(huán)境和設(shè)計導航菜單2模塊為核心搭建VR漫游交互系統(tǒng)平臺，助力校園數(shù)字化智能建設(shè)，以更為直觀的方式給予用戶多維度深層次的交互式體驗。相比于傳統(tǒng)的3D建模集成虛擬環(huán)境，VR校園漫游交互系統(tǒng)具有更強的真實感。該文將搭建成功的系統(tǒng)平臺項目文件部署在服務(wù)器中，展示在Web網(wǎng)頁上，VR校園交互漫游平臺可在PC端與手機端的任意瀏覽器中使用，具有極大的系統(tǒng)兼容性。

關(guān)鍵詞：虛擬現(xiàn)實；Pano2VR；校園漫游；交互技術(shù)；Web網(wǎng)頁

中圖分類號：TP391.9" " " 文獻標志碼：A" " " " " 文章編號：2095-2945（2023）10-00３５-0４

Abstract： This paper mainly introduces the research on VR campus roaming interactive system with the help of VR panoramic camera and Pano2VR. The VR roaming interactive system platform is built with the two modules of building panoramic roaming environment and designing navigation menu as the core， which helps the construction of campus digital intelligence and gives users multi-dimensional and deep interactive experience in a more intuitive way. Compared with the traditional 3D modeling integrated virtual environment， the VR campus roaming interactive system has stronger sense of reality. In this paper， the project files of the successfully built system platform are deployed in the server and displayed on the Web page. The VR campus interactive roaming platform can be used in any browser on the PC and mobile terminals， which has great system compatibility.

Keywords： virtual reality; Pano2VR; campus roaming; interactive technology; Web page

VR校園漫游[1]交互系統(tǒng)作為數(shù)字化校園的一部分，在校園信息化建設(shè)中起著不可替代的作用，在新型冠狀病毒感染疫情期間也可作為校園宣傳的重要部分。VR校園無疑以更為直觀的方式給予訪客多維沉浸式的體驗，讓訪客足不出戶就能體驗到校園的獨特風光[2]。

隨著VR相機的普及，拍攝全景圖的技術(shù)問題大幅降低。傳統(tǒng)VR全景圖的制作需要用單反相機等設(shè)備，在同一個角度拍多張照片，再借助PS等軟件進行裁剪、拼接及合成，步驟繁多，工程量大。如今可借助VR全景相機，其攜帶的2～6個攝像頭可搭建720°超廣角全方面拍攝環(huán)境，可高效率和高精準一鍵拍攝多張環(huán)境圖，再使用得圖等軟件可簡便生成環(huán)境全景圖，這解決了過往拼接全景圖帶來的多補丁、低匹配和連接融合效果差[3]等問題。

利用高質(zhì)量拼接得到的全景圖，搭配現(xiàn)市場上較為流行的Pano2VR軟件，可搭建極具沉浸式的HTMLVR校園漫游交互系統(tǒng)，為家長學生提供一個移動體驗感的多維虛擬校園參觀平臺。VR校園漫游交互系統(tǒng)在疫情時期也能讓家長、學生在家即可沉浸式游覽高校校園，也方便即將畢業(yè)的高三學子能夠提前體驗理想院校的大學生活。

1" VR校園漫游交互系統(tǒng)的實現(xiàn)基礎(chǔ)

1.1" 全景漫游技術(shù)

全景漫游技術(shù)以虛擬現(xiàn)實為基礎(chǔ)，借助計算機搭建逼真的人工交互環(huán)境，使用戶以鼠標、鍵盤等方式與虛擬環(huán)境中的對象交互，產(chǎn)生近似真實環(huán)境的交互體驗。與傳統(tǒng)3D建模相比，全景漫游技術(shù)制作簡單、體量小、真實感更強。

1.2" VR全景交互功能技術(shù)

VR全景交互功能[4]以計算機為核心，借助各種輸入輸出裝備應(yīng)用軟件以及動作捕捉、觸覺反饋、眼球追蹤、肌電模擬、手勢跟蹤、方向追蹤和語音交互等技術(shù)與虛擬全景環(huán)境實現(xiàn)沉浸式交互。

1.3" WebVR平臺制作

WebVR是網(wǎng)頁圖形的前沿技術(shù)，與VR技術(shù)相比，WebVR技術(shù)無需下載任何應(yīng)用程序、任何插件就讓用戶沉浸于虛擬全景環(huán)境中。WebVR平臺借助WebVR技術(shù)改變VR技術(shù)復(fù)雜的操作方式，將VR技術(shù)應(yīng)用于網(wǎng)頁[5]。

1.4" DetuF4全景攝像機和Pano2VR軟件

DetuF4全景攝像機以高品質(zhì)四鏡頭全視角鏡頭組，借助內(nèi)部封裝的多個傳感器實現(xiàn)大范圍無死角全景攝像，可一次性拍攝4張同一視角不同角度的相片，后面可以再借助搭配平臺將所拍攝全景圖進行智能拼接，得到高清高質(zhì)量的VR全景圖。Pano2VR擁有把全景圖像轉(zhuǎn)化成QuickTime、Flash和HTML5格式的強大功能，也可在Pano2VR中設(shè)置指定熱點和多變熱點，最后可將結(jié)果展示在Web網(wǎng)頁上供用戶使用體驗，極其便利與高效。

2" VR校園漫游交互系統(tǒng)的設(shè)計開發(fā)架構(gòu)

本文應(yīng)用Pano2VR和DetuF4來進行開發(fā)設(shè)計VR校園漫游交互系統(tǒng)。借助DetuF4拍攝合成全景圖，再以Pano2VR為核心來搭建全景漫游環(huán)境與設(shè)計導航菜單，然后將其項目工程文件部署至服務(wù)器中，最后將VR漫游交互平臺展示于線上Web平臺，以供用戶于手機端和PC端雙線共享交互漫游VR校園。VR校園漫游交互系統(tǒng)設(shè)計開發(fā)總體架構(gòu)如圖1所示。

3" VR校園漫游交互系統(tǒng)的實現(xiàn)

3.1" 全景圖拍攝與拼接

VR全景圖的制作，首先需要分析校園建筑平面圖和校園建筑模型構(gòu)造，再選擇合適的拍攝地點（通常在于路口處）。選擇好拍攝地點后，為避免惡劣天氣影響找尋合適的時間[6]，利用VR全景相機進行全景圖的拍攝。我們是以DetuF4全景攝像機進行拍攝，可使用DetuF4自帶全景圖合成系統(tǒng)將DetuF4全景攝像機內(nèi)存卡中環(huán)境圖片導出并制作合成720°全景圖。DetuF4軟件使用界面和合成全景圖如圖2、圖3所示。

3.2" 全景漫游環(huán)境基礎(chǔ)搭建

1）導入圖片。選擇輸入圖像的類型，以自動為例，打開目標文件夾，選擇目標圖片導入。

2）打補丁。在選項卡處點擊“元素”，選擇“補丁”進入補丁界面，在全景圖頂部和底部雙擊打上補丁（頂部或底部因拍攝設(shè)備三腳架原因會有部分場景無法拍攝），通過拖動鼠標或調(diào)整屬性內(nèi)參數(shù)調(diào)整補丁位置與方向。

3）設(shè)置水平視角和調(diào)試鏡頭光暈。在屬性處調(diào)整水平測量中音調(diào)與攝影機轉(zhuǎn)動參數(shù)設(shè)置視圖經(jīng)緯度與海拔高度，于選項卡處點擊“元素”打開鏡頭光暈，雙擊建立鏡頭光暈，在屬性處選擇默認鏡頭樣式即可。

4）設(shè)置背景音樂。在屬性面板背景聲音處，打開目標文件夾添加目標MP3文件，設(shè)置聲音級別為1.00，修改循環(huán)參數(shù)為-1，使背景音樂不在啟動時開始。

5）預(yù)覽查看。初步搭建基礎(chǔ)全景環(huán)境后，可點擊“預(yù)覽”進行發(fā)布前查看。

3.3" 構(gòu)建VR校園交互熱點

VR校園漫游交互系統(tǒng)最關(guān)鍵的一步就是交互熱點的搭建。全景交互熱點以JsonData數(shù)據(jù)文件作為載體，借助不同代碼邏輯生成多類型熱點，如文字熱點、圖片熱點、視頻熱點和自定義熱點等，熱點代碼都放置在pano2vr_player.js文件中集中管理。熱點在VR漫游系統(tǒng)中以入棧出棧的形式進行信息傳輸，在index.html文件中用代碼lt;scripttype=\"text/javascript\"src=\"pano2vr_player.js\"gt;將有關(guān)交互熱點腳本導入，最終可將熱點信息展示在Web網(wǎng)頁上。本文研究設(shè)計的全景熱點交互邏輯如圖4所示。

具體搭建VR校園交互熱點的步驟如下。選擇合適熱點樣式（有導覽點、圖片、網(wǎng)址等類型），預(yù)建立熱點位置雙擊建立熱點。以導覽點作為熱點為例，在目標點設(shè)置熱點位置，類型處選擇導覽節(jié)點，選擇性調(diào)試導覽節(jié)點參數(shù)（標題處注釋前進場景信息等），目標選擇前進，即可形成2個不同環(huán)境間的跨區(qū)域交互。其他熱點樣式如圖片、視頻、網(wǎng)址和信息等步驟相似。VR校園交互熱點設(shè)計與展示如圖5、圖6所示。

3.4" 設(shè)計VR校園導航菜單

導航菜單不僅是VR漫游交互平臺的指引路標，也是用戶實際漫游VR校園必需外層媒介。借助Pano2VR的良好生態(tài)來設(shè)計以“可視、可用和可交互”為主題的導航菜單，具體步驟如下。首先利用Pano2VR的可視化皮膚編輯設(shè)計添加自定義中的UI皮膚，在皮膚設(shè)計頁面添加自定義的路標前后左右轉(zhuǎn)向鍵、視角伸縮按鈕、場景詳細信息功能按鈕和自動旋轉(zhuǎn)瀏覽功能等。同時為了適應(yīng)大學校園大面積、多路標和多區(qū)域等特點，在皮膚編輯器中構(gòu)建一個容器，再在容器中添加若干節(jié)點并進行“動作設(shè)計”以實現(xiàn)場景跳轉(zhuǎn)功能。通過場景的ID來智能選擇不同設(shè)計的皮膚，這樣即可設(shè)計出內(nèi)容豐富，功能齊全的VR校園導航菜單[7]。設(shè)計好的VR校園導航菜單如圖7所示。

3.5" 實現(xiàn)WebVR網(wǎng)頁VR校園交互漫游

用WebVR網(wǎng)頁作為VR校園交互漫游的體驗平臺，借助Pano2VR搭建輕簡高質(zhì)量的WebVR展示框架來裝載已設(shè)計搭建好的全景漫游平臺和導航菜單，同時由于現(xiàn)在Flash兼容性的不足導致Web網(wǎng)頁的穩(wěn)定性較差[8]現(xiàn)象頻頻發(fā)生，故在Pano2VR中選擇以HTML5為導出格式生成項目工程文件。然后將VR校園漫游交互系統(tǒng)項目工程文件部署至服務(wù)器中，分配地址端口，開放共享權(quán)限，再將VR校園交互漫游平臺展示在Web網(wǎng)頁上，即可實現(xiàn)WebVR校園漫游系統(tǒng)的應(yīng)用。用戶可在WebVR網(wǎng)頁根據(jù)分配的網(wǎng)頁地址訪問VR校園交互漫游平臺進行線上校園虛擬游覽，同時根據(jù)個人需求也可前往不同地點體驗多類型VR漫游交互功能。

4" 結(jié)論

本文基于Pano2VR借助DetuF4全景攝像機和Pano2VR等軟件研究與制作出VR校園漫游交互系統(tǒng)，為校園的數(shù)字化建設(shè)添磚加瓦。與傳統(tǒng)的平面圖瀏覽相比，VR校園漫游交互系統(tǒng)憑借其強烈的立體感[9]，與VR環(huán)境和物體模型的交互體驗感、沉浸感使用戶在線上虛擬平臺體驗現(xiàn)實環(huán)境。該系統(tǒng)架起虛擬與現(xiàn)實之間的橋梁，同時在VR全景環(huán)境中加入多種交互體驗?zāi)Ｊ剑兄诖龠M高校校園的科技創(chuàng)新進步和高校個性化文化宣傳，同時搭建的VR校園交互漫游平臺可在PC端與手機端的任意瀏覽器中使用[10]，具有極大的系統(tǒng)兼容性。

參考文獻：

[1] 梁智杰，李眾立.VR-Platform校園漫游系統(tǒng)研究與實現(xiàn)[J].計算機系統(tǒng)應(yīng)用，2010，19（9）：124-127.

[2] 馮建平，吳麗華.基于全景圖像的三維全景漫游系統(tǒng)的構(gòu)建[J].計算機與數(shù)字工程，2013，41（1）：115-117.

[3] 葉風.VR全景交互媒介特性與內(nèi)容設(shè)計方法[J].科技導報，2018，36（9）：61-65.

[4] 陳偉娜，陳銳浩.WebVR技術(shù)在短期商業(yè)會展中的應(yīng)用研究[J].現(xiàn)代計算機（專業(yè)版），2017（21）：59-64.

[5] 蘇龍生，古天馳，李曉東.VR全景圖拼接關(guān)鍵技術(shù)研究[J].科技創(chuàng)新與應(yīng)用，2022，12（10）：145-147.

[6] 古天馳，蘇龍生，劉子昂，等.基于WebVR的產(chǎn)品展示技術(shù)與實現(xiàn)[J].信息與電腦（理論版），2021，33（22）：10-13.

[7] 許梅，裴必明.基于文化體驗式的VR技術(shù)景點漫游再現(xiàn)與展示——以合肥三國遺址公園為例[J].科技風，2020（34）：81-82.

[8] 李樹鵬，高建清，潘宇浚，等.基于Pano2VR的貨幣博物館全景漫游與互動系統(tǒng)設(shè)計[J].電腦編程技巧與維護，2022（6）：151-153.

[9] 高學芹.基于VR的虛擬校園漫游系統(tǒng)研究與建設(shè)[J].電子技術(shù)與軟件工程，2020（10）：32-33.

[10] 張曉琪，唐天國，李欣，等.基于VR技術(shù)的虛擬校園漫游系統(tǒng)設(shè)計與關(guān)鍵技術(shù)研究[J].電腦知識與技術(shù)，2020，16（8）：227-230.