庐陵古村全景漫游系统的设计与实现

谭云兰 汤鹏杰 康永平 夏洁武

摘要：通过对庐陵古村进行实地调研，使用高清拍摄设备进行数字化采集，应用了 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.