基于Krpano的校园全景漫游系统的实现

摘要：全景图的播放原理是构建三维场景，在场景中创建柱体，或者球体，立方体等三维物体。将制作好的全景照片作为物体材质贴在虚拟的三维球体表面，或者将转换过的6张1：1的照片贴在三维立方体表面。将虚拟摄像机放置在球体或立方体的体心位置。鼠标拖动时转动虚拟摄像机，或者转动三维体，以此来实现全景图的播放。对于漫游的实现，通过特定位置添加热点，点击热点后进行切换场景即切换三维球体表面贴图来实现。

360项目中所使用的KrpanoViewer是一款基于Flash的全景图播放和漫游软件。Krpano Viewer的所有功能都是通过对其关联的xml文件的解析来实现的。其所提供的各种插件也通过配置xml文件来调用。

关键词：三维场景 Krpano 全景漫游 xml配置

一、Krpano功能介绍

Krpano viewer的主程序所使用的XML文件十分简洁，默认情况下仅可以做到场景的载入。其他所有功能，都以插件的形式实现，而每个插件，既可以在自己的XML文件进行配置，然后供主程序XML文件调用，也可以在主程序的XML文件中直接以标签引入并进行配置。这样做的好处就是功能明确，结构清晰，便于扩展，利于维护。

Krpano的所有标签如下：

标签：载入其他的xml文件。

标签：在装载全景图片的过程中显示一个小的全景图。

标签：载入图片。

标签：存储当前视的信息。

标签：定义全景图中被展示的区域。

标签：定义渲染的质量和性能。

标签：鼠标键盘的控制设置。

标签：自定义光标的样式。

标签：当无用户交互时，自动扭曲/移动/缩放。

标签：载入其他flash程序，图片或者按钮，图标等。

标签：设置热点。

标签：设置事件的响应。

标签：定义行为，需要用脚本语言解释器解释。

标签：自定义鼠标右键菜单。

标签：设置装载时过程。

标签：设置下载或者decode时的图片。

标签：设置内存使用情况。

标签：设置安全性。

标签：定义样式。

标签：定义一个镜头光晕样式。

标签：定义一个镜头光晕。

标签：存储一些数据。

标签：定义场景。

Krpano viewer的功能是十分强大和复杂的，本文只介绍系统所用到的几个比较重要的标签。

二、校园全景漫游的具体实现

2.1、将krpano viewer嵌入html网页

Krpano Viewer提供了swfkrpano.js脚本。使用它可以很方便地将krpano viewer嵌入html网页,其使用方法如下：

首先引入脚本文件：

接着编写javascript脚本：

var swf = createswf("krpano.swf", "krpanoSWFObject", "100%", "100%");

swf.addVariable("xml", "scenes-with-imagemap.xml");

swf.embed("krpanoDIV");

swf.addVariable("xml", "krpano.xml");

此段代码的说明为：var swf = createswf()表示可以创建要嵌入的对象。

swf.addVariable()表示设置xml文件的路径。

swf.embed("krpanoDIV")表示将krpano viewer嵌入到html元素里。

2.2、设置初始场景

在配置文件中的根节点中添加脚本动作，设置初始要载入的场景。

onstart为Krpano定义的事件，其后跟随的内容为事件的响应脚本。Loadscene函数表示载入场景，其第一参数为场景名称。Playsound函数是音频播放插件所提供。其第二个参数为要播放的音频文件的路径。

2.3构建各个场景

本系统所有的场景信息都保存在XML文件中。当需要载入某个场景时，系统会查找相应的标签，读取配置。在XML配置文件中，使用标签构建场景。具体示例如下：

标签后的name属性是必须的，同时，作为场景的标识，其值必须是全局唯一的。onstart属性后跟脚本动作代码，表示在场景刚载入时要做的工作。本例中，onstart属性后为一个名为startscene的动作。这个动作中包含一系列的脚本代码来完成一些工作，具体如下：

set(heading,90);

showtext([b]要显示的字符[/b], infostyle);

action(activatespot,scene3,190);

playsound(s1,sound/sound.mp3, 0,0);

每个action的name属性值同标签的name属性一样，也是必需并且全局唯一的，其作用类似于C#语言中的方法名，方便脚本编程时进行调用。

在startscene这个动作中，首先设置了视角进入时的水平位置。

在标签之中，使用标签载入全景图，其代码如下：

本方案使用的是球面全景图，所以设置type属性为sphere。在标签中的url属性中设置要加载的全景图片的路径。

在每个场景中都有若干热点与相邻场景进行互联，点击热点后可以实现场景跳转。要定义一个热点，需要使用标签。与其他标签类似，在标签中,也需要对各个属性进行设置。

2.4设置地图

在展示性项目中，导航地图可以使用户方便地知道当前场景的位置，是必不可少的。本项目导航地图的实现，是在krpano提供的插件功能和脚本编程语言基础上自行实现的。地图，以及地图上的热点，都是作为插件存在的。它们的动态特性，是通过脚本编程实现的。设置地图的代码如下：

标签的url属性设置要载入的地图图片的路径。X，y属性设置地图插件在屏幕上所出现的位置。alpha设置图片的透明度。width与height属性设置地图插件的宽高。当场景跳转时，如果跳转后的场景与前一个场景位于同一地图中，地图不会变化，如果进入到了新的地图场景中，地图会自动更换。地图显示，也可以隐藏，可以通过点击导航图按钮实现。

2.5设置地图上的热点

为了标明系统所有场景在地图上的位置和当前场景的位置，需要使用地图热点。

每个场景在地图上具有对应的热点标出。代表当前场景的热点，其图标与其他场景不同，以示区别。同时，点击某个热点，也会跳转到相应的场景中。

这些场景热点也是通过插件方式实现的。每个热点都是一个插件，通过设置插件属性实现其各种功能，其配置如下：

其中name属性设置插件名，这是一个全局唯一的名称。url设定默认的供热点使用的图片的路径。parent属性设置插件的父插件名称。

2.6设置按钮

按钮的作用，通常是点击后出发事件，进而执行一系列的动作。在krpano中，附带有预定义的按钮，可以实现系统预定义的功能。也可以使用krpano强大的插件和脚步编程功能，自定义按钮。

Krpano预定义的按钮主要包括：全屏，左转，右转，上转，下转，全屏，鼠标样式转换。其功能的实现也是依靠脚本语句。这些预定义的功能被单独写在一个配置文件中，krpano的主配置文件用标签包含这个配置。同时也要注意修改相关的图片路径。使用方法如下：。

在引用预定义的按钮配置时，要注意预定义的配置文件和配置文件所引用的文件的相对路径，避免出现错误。

在本项目中，除了使用预设的按钮外，还需要两个按钮，一个是声音播放按钮，一个是地图显示按钮。采用krpano的插件和脚步功能实现。声音播放按钮的代码为：

Onclick属性设置了关闭或者打开soundinterface插件。默认为播放，当点击后声音停止，并且图标改变为关闭方式，再次点击，播放声音，图标变为播放方式。Crop属性的四个值：0|0|50|50,表示在加载的图片的0,0位置起，宽50高50裁切出一个图片，供当前使用。也就是说，可以把好几个图标整合在一张图片上，使用时，调用crop脚本函数，提供要切割的起始坐标，要切割图片的宽高。

地图按钮的代码为：

参考文献：

[1] 赵庆展，赵欣，常静. 虚拟校园全景漫游系统的实现[J].石河子大学学报，2006,(1)

[2] 邬厚民.利用鱼眼技术构建全景漫游系统的方法探索[J].电脑知识与术, 2009（18）

[3] 杨琳，赵建民，朱信忠，徐慧英，郑国强.虚拟校园三维全景漫游技术研究[J].计算机工程与科学,2007,(10)