廬陵古村全景漫游系統的設計與實現

譚云蘭 湯鵬杰 康永平 夏潔武

摘要：通過對廬陵古村進行實地調研，使用高清拍攝設備進行數字化采集，應用了 PTGui 拼圖技術，無縫拼接高清全景圖，然后運用KRPanoGUI 漫游發布軟件，應用HTML5 技術將廬陵古村景點介紹、視頻、音頻、動畫以及精美圖片等多媒體素材于一體嵌入到Web 頁面中，構建了三維高清的廬陵古村全景漫游平臺。系統具有全景瀏覽、縮放、旋轉功能外，還具有視頻播放、電子相冊、旅游線路導覽、故事傳說等交互功能。在網上展陳古村三維高清全景，具有較強的交互性、沉浸感，使游客產生身臨其境的感覺，真正實現足不出戶漫游廬陵古村美景及深厚的歷史文化。該系統不僅可以使廬陵古村落原貌永久保存， 還能提升古村的旅游品質，擴大古村的旅游影響力。

關鍵詞：Krpano；廬陵古村；全景漫游系統；設計

中圖分類號：TP391 文獻標識碼：A 文章編號：1009-3044（2018）28-0066-03

Design and Implementation on the Panoramic Roaming System of Luling AncientVillages

TAN Yun-lan1， TANG Peng-jie2， KANG Yong-ping3， XIA Jie-wu1

（1. School of Electronic Information and Engineering，Jinggangshan University， Jian 343009， China； 2. School of Mathematical and Physical Science， Jinggangshan University， Jian 343009， China； 3. Center of Network and Information， Jinggangshan University， Jian 343009， China）

Abstract： In this paper， we used HD shooting equipment to capture the Lulling ancient villages digitally after the field research and used PTGui panorama puzzle technology to seamless high-definition panorama. Then we chose KRPanoGUI roaming publishing software to build a three-dimensional high-definition panoramic roaming platform with a set of village scenic spot introduction， video， audio， animation， beautiful pictures and other multimedia materials. We embed these multimedia materials into web pages with HTML5 technology， which makes tourists feel immersive. This system has the virtual roaming functions of overall panorama browsing， zooming and whirling， also has the interaction functions of video playing， electronic album displaying， historical and cultural precipitation browsing and tourism route guiding. The release of the system makes tourists truly realizes the beauty and deep history and culture of the Luling ancient villages without leaving home. In addition， the system can not only make the origin of the Luling ancient villages permanent preservation， but also expand the influence of the Luling ancient villages culture and tourism quality.

Key words： Krpano； Luling ancient village； panoramicroaming system； design

古村落作為中國農耕文化的集中體現和活化石，以有形的姿態承載著一個時期的歷史。古稱“廬陵”的吉安，自古人杰地靈，素有“江南望郡”“金廬陵”“吉州福地”“文章節義之邦”的美譽[1]。釣源古村的“七星伴月”“歪門斜道”“水向西流”“三門兩鎖”等“天人合一”的特色建筑，渼陂古村的永慕堂、翰林第、敬德書院等古民居建筑中的對聯和家訓格言，古村中的燕尾山墻、馬頭墻、騎瓦風火墻等建筑風格，元寶窗、鏤空雕飾、鎏金彩繪壁畫、枋檁雀替、藻井漏窗等建筑構件和裝飾，無不體現了廬陵古村宗族“崇文重教，商賈興村”的理念[2]。因此，用全景虛擬漫游的方式來展示廬陵古村的美圖、美景及具有深厚文化底蘊的傳說故事，是古村落數字化保護和文化傳承的有效手段。

基于圖像的Web3D全景技術廣泛應用在虛擬校園、虛擬景點、虛擬房產等各個領域[3]。但現有的虛擬校園漫游系統[4-5]、虛擬中醫藥博物館漫游系統[6]、虛擬古建筑文物漫游系統[7]、虛擬度假酒店漫游系統[8]，主要是運用PTGui等軟件進行全景圖像拼接，然后用Krpano或Pano2VR等全景制作軟件進行制作發布，功能相對簡單。本文將廬陵古村中的經典美景、故事傳說、古村視頻等，運用PTGui+KRPanoGUI+HTML5等技術，開發廬陵古村虛擬全景漫游系統發布在網上，使游客產生身臨其境的感覺，具有很好的交互性、沉浸感。

1系統調研及功能規劃

1.1 系統需求調研

以廬陵千年古村渼陂、釣源為示范點，對古村落的物質文化遺產與非物質文化遺產進行實地現狀調研，對調研獲得的圖像、文本、音頻、視頻等數據和資料進行分析歸類；按照高清、精美、輕量化的標準，利用數字化轉換技術，將文本、聲音、照片、視頻等素材進行后期加工處理；將魚眼鏡頭拍攝的全景素材進行無縫拼接，并進行全景圖像增強及美化工作；對系統進行功能規劃，設置全景漫游、視頻播放、電子相冊、位置導覽、故事傳說等交互功能，采用全景漫游發布軟件集成場景及素材，制作廬陵古村漫游系統，提升用戶的沉浸感和交互性。

1.2技術選擇

全景圖的拼接選用PTGui軟件，可以自動讀出圖片的Exif信息，能針對性地校正圖像，處理速度快，變形小，畫面色彩過渡自然，適合多張高像素圖片拼接。全景制作系統選用KRPanoGUI，基于Krpano內核，支持多用戶同時登錄使用，支持發布成Flash和HTML5文件格式，適合Web展示。網站發布格式選用HTML5格式，有利于手機瀏覽器適配。

1.3系統框架

根據1.1-1.2小節的基本思路，廬陵古村漫游系統的系統框架如圖1所示。

2廬陵古村的交互設計

將廬陵古村的美圖美景，以及有深厚歷史文化積淀的故事傳說融入場景中，采用全景圖集成來構成虛擬環境，在古村導覽地圖中添加熱點、透視雷達，將地圖和場景一一對應，實現在多個不同場景中虛擬交互漫游。本漫游系統交互式設計主要采取場景加載及漫游設置、導航地圖設置與標注、交互熱點設置、多媒體應用模塊設置、界面控制模塊等方式來完成。

2.1 場景加載及漫游設置

1）添加場景圖片。新建一個廬陵古村項目，選擇古村場景，進行添加。

2）設置場景漫游。場景漫游是給游客一套古村經典的旅游線路，在場景中通過箭頭的指向為瀏覽者指明前進的方向，按照瀏覽路線連接。

3）設置視區視角。視區視角的設定可以控制瀏覽者在場景中觀察的范圍，左右和上下區域均可調控。

2.2導航地圖設置及標注

1）添加地圖。在添加好廬陵古村的全景場景圖及縮略圖之后，就可以在地圖上設置場景了。先加載一張導覽地圖，在界面中找到相應選項，點擊添加。然后在跳出的頁面中把名稱、標題、身份識別號碼等填寫好，提交即可，在這過程中，地圖的相對位置也可重新設置。

2）標注地圖。以廬陵古村釣源的歐陽氏宗祠為例，當上傳完成地圖后，單擊場景標注，在地圖上找到歐陽氏宗祠，將紅色光標移動到此位置，進行位置獲取，最后保存即可，其他場景類似設置。標注好地圖之后，進入場景漫游，雷達會隨著瀏覽方位的改變而跟隨顯示。

3）放大地圖顯示。釣源、渼陂古村場景眾多，在地圖上顯示區域較小，為方便查看，設置地圖的放大與還原，供瀏覽者按需切換。在“地圖事件”選項卡中設置代碼：onclick{if（plugin[map].scale==1， tween（plugin[map].scale，2.8，0.1）， tween（plugin[map].scale，1，0.1））；}；onhover{showtext（點擊放大/還原）；}。最終實現的效果為：鼠標停留在地圖上時，提示點擊可放大，單擊時，地圖放大兩倍，再次單擊，地圖還原，如圖2所示。

4）添加滑動效果。地圖的顯示將占據畫面一定的空間，為使瀏覽者有更好的體驗，設計地圖的上下滑動達到顯示與隱藏的效果。在“插件事件”選項卡中填寫控制語句：onclick{if（plugin[map].y==0，tween（plugin[map].y，-330，0.1），tween（plugin[map].y，0，0.1））；}；onhover{showtext（隱藏/顯示地圖）；}；onout{skin_buttonglow（null）；}；ondowdn{skin_buttonglow（get（name），1）；}；onup{skin_buttonglow（get（name），0.3）；}。

2.3 交互熱點設置

為了實現對廬陵古村中不同場景實現多地點瀏覽切換，通過創建交互熱點來實現。首先進行場景的選擇，然后在“URL”下拉列表框中選擇需要跳轉的場景，在“標題”欄輸入提示該熱點的提示文字，進行相關設置，最后保存名稱為純英文或數字加英文即可。對古村的某個場景中部分區域進行放大或者彈出，可通過添加區域熱點或者漂浮熱點來實現。

2.4 多媒體應用模塊

1）添加背景音樂。上傳漫游附件，復制聲音文件地址，提交保存。添加插件控制背景音樂的播放與關閉，插件事件如下： if（soundinterface.mute=false，set（soundinterface.mute，true）；set（url，%FIRSTXML%/Plugin/musicclose.png）；set（soundinterface.mute，false）；set（url，%FIRSTXM L%/Plugin/musicopen.png）；）。

2）添加故事傳說網頁文本。以釣源古村的八老爺別墅為例，在此場景中添加故事傳說熱點，在熱點事件中填寫相應的事件代碼：onclick{js（alert（文本內容））；}；onover{set（back_auto， get（autorotate.enabled））；set（autorotate.enbaled，false）；}；onhover{showtext（點擊查看故事）；}；onout{set（autorotate.enabled， get（black_auto））；set（plugin [p_box].visible，false）；}。

3）添加視頻。在要添加視頻的場景中添加熱點，設置類型為“視頻”，上傳視頻，在“視頻熱點”選項卡的videourl中填寫視頻的相對地址。在熱點事件中填寫控制代碼：Onclick{togglepause（）；}；onover{set（back_auto，get（autorotate.enabled））； set（autorotate.enabled，false）；}；onhover{showtext（點擊播放/暫停ppt介紹）；tween （scale，0.4，0.1）；}；onout{tween（scale，0.22，0.1）；}。最終效果為：當鼠標停留在視頻上時，視頻由原來的0.22倍大小變為0.4倍，鼠標離開即還原；當鼠標按下時視頻播放，再次按下，視頻停止。

4）添加Flash動畫。以“釣源古村”毛筆書寫Flash動畫為例，點擊皮膚插件，添加一個控制Flash動畫的插件，將制作好的動畫上傳，在基礎選項卡中填寫信息，在插件事件中填寫代碼：onclick{switch（plugin[文字介紹].visible）；}；onover{tween（alpha，1，0.05）；}；onhover{showtext（點擊隱藏/顯示釣源介紹）；}；onout{tween（alpha，0.8，0.05）；}。最終效果為：當鼠標停留在按鈕上時，提示隱藏文字；單擊按鈕，文字動畫隱藏；再次單擊，文字動畫再現。

2.5 界面控制模塊

在廬陵古村虛擬全景漫游的交互設計中，交互的界面應美觀、簡潔，無論是色彩、文字還是圖像的動態設計，都應給人以舒適感。為了防止交互界面出現雜亂無章的情況，廬陵古村的導覽地圖以及常用的控制按鈕應具有較強的指向性，從而讓用戶能準確使用各個功能。本漫游系統界面的下方設有一排控制按鈕，可實現場景上下左右大小旋轉全屏切換等控制，如圖3所示。

3 廬陵古村漫游功能實現與展示

廬陵古村漫游系統最后以HTML5 格式發布，HTML5具有良好的實用性和可兼容性，可實現跨平臺使用，使得網頁的設計更加集成化，減少了對于各類插件的依賴性。

3.1 廬陵古村全景漫游功能實現

1）古村漫游。瀏覽者進入系統界面以后，可用鼠標進行360度觀看場景，還可以在場景中推進拉遠。通過地圖和底部縮略圖可以選擇切換到感興趣的場景進行瀏覽，操作簡單，立體感強。

2）背景音樂。瀏覽者進入界面，不僅可以看到場景，還可以欣賞到和場景一樣古色古香的音樂。音樂的加入，不僅渲染了古村濃郁的氛圍，也能緩解瀏覽者視覺的疲勞，使瀏覽者徜徉其中而不知真實身處之地。

3）亮點圖像。在釣源古村中有大量對文物、人物、建筑的詳細介紹，還有眾多的書畫展覽，在這些位置，可能瀏覽者就會駐足，本系統將這些有亮點的區域進行了設置，只要單擊這些區域，即可彈出到它的大圖，這使得瀏覽者對廬陵古村文化的魅力有更深的體味。

4）影像介紹。在界面中放置了PPT介紹、紀錄片介紹、電子相冊展示，不僅豐富了整個平臺的搭建，更主要的目的就是為使瀏覽者更加全面的認識釣源古村，對古村文化宣傳有一定的積極意義。

5）故事傳說。古村具有漫長的歷史，也就有許多動人的傳說，這些傳說不僅可以吸引瀏覽者的觀賞，也同樣是古村文化的延續。

3.2 廬陵古村漫游系統界面展示

本文分別對釣源和渼陂古村進行全景制作，發布了獨立的漫游系統，然后將兩者集成在一個HTML5主頁中（如圖4所示），以廬陵古色古香的風景照為背景圖，運用了典雅復古的顏色搭配，凸顯廬陵古村古樸韻味。

為使整個畫面簡潔，更有利于瀏覽者觀看，對渼陂、釣源兩個古村的整個界面中的導覽條和區域進行了劃分和布置。界面導航和縮略圖都是可以隱藏的，且在動態箭頭的指引下，瀏覽者可以清楚地知道自己前進的方向，使整個瀏覽過程是有清晰路線的，避免漫無目的地瀏覽。

4 結論

本文運用PTGui+KRPanoGUI+HTML5技術，搭建起集廬陵千年古村——釣源、渼陂古村的景點介紹、傳說故事展示、視頻觀看、音頻播放以及美圖美景相冊展示于一體的三維高清全景漫游平臺，為廬陵古村旅游景區帶來了全新的展示手法，為旅游者提供了身臨其境的旅行機會。對于沒有條件親身到廬陵古村來旅行的人來說，采取網上旅行是一種綠色環保的旅行方式，有利于保護當地生態環境，改善古村的人居生存環境；另一方面能提升廬陵古村的旅游品質，擴大古村的旅游影響力，可實現古村旅游經濟的健康可持續性發展。

參考文獻：

[1] 羅楊，李夢星. 中國古村落叢書-渼陂村[M]. 北京：中國文史出版社，2013.

[2] 丁功誼，李夢星. 釣源古村的建筑文化特征[J]. 井岡山大學學報：社會科學版，2014（5）：123-128.

[3] 呂杰英. 三維全景在實訓基地漫游系統中的應用研究[J]. 中國教育信息化，2016（18）：78-80.

[4] 喬國臻，張茹涵，趙國梁. 基于 HTML5 的虛擬校園三維漫游系統研究[J]. 測繪技術裝備，2018，20（1）：33-36.

[5] 高曉晶，馮麗露. 360°全景漫游在校園虛擬展示設計中的應用研究[J]. 中國教育信息化，2018（6）：85-88.

[6] 彭春. 一種基于全景圖的中醫藥博物館虛擬漫游系統[J]. 福建電腦，2017，33（2）：56-56.

[7] 王佩雯，張紫桂，楊成，等. 基于PTGui與Pano2VR的交互式古建筑文物三維全景漫游設計[J]. 新媒體研究，2018（4）：42-44.

[8] 肖楠，田豐. 溫泉度假酒店的360度全景虛擬漫游系統的設計與開發研究[J]. 遼寧大學學報：自然科學版，2017，44（3）：223-228.