基于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