请选择 进入手机版 | 继续访问电脑版

站长网

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
热搜: 活动 交友 discuz
查看: 2073|回复: 3

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

[复制链接]
发表于 2014-3-18 00:23:21 | 显示全部楼层 |阅读模式
全景图的播放原理是构建三维场 景·在场景中创 建柱体’或者球体'立方体等三维物体。将削作 好的全景照片作为物体材
质贴在虚 拟的三维球体表面'或者将转换过的6张1.1 的-照片贴在三维立方体表面。 将虚拟摄像机放置在球体或立方体的 体
心位置 鼠标拖动时转动虚拟摄像机 或.者 转动三雏体I以 此来实现奎景图的 播放。对于漫游的实现 通过特定位置添加热。最
.蔷击热点后进行切换场 景即切凄是三维球体表萄贴图来 实现:i ¨1 j 。。 。j j
360
项目中 所使用的Krpano viewer是一款基于Flash的全景图播放和漫游软件。 anoviewer的所有功能都是通过对其
l
关联的xnd文件的 解析来实现的誊其所捷供的各种插件也通过配置xH1l文件来调用。


、Krpano功能介绍
Krpano viewer
的主程序所使用的XML文件十分简洁.默认情况下仅可以做到场景的载入。其他所有功能,都以插件的
形式实现.而每个插件.既可以在自己的XML文件进行配置。 然后供主程序XML文件调用.也可以在主程序的XML文件
中直接b[<plugin>标签引入并进行配置。这样做的好处就是功
能明确,结构清晰,便于扩展,利于维护。
Krpano
的所有标签如下:
<inelude>
标签:载人其他的xml文件。
<preview>
标签:在装载全景图片的过程中显示一个小的
全景图。
  
01
  
  
<image>标签:载人图片。
  
  
02
  
  
<view>标签:存储当前视的信息。
  
  
03
  
  
<area>标签:定义全景图中被展示的区域
  
  
04
  
  
<display>标签:定义渲染的质量和性能。
  
  
05
  
  
<control>标签:鼠标键盘的控制设置。
  
  
06
  
  
<cursois>标签:自定义光标的样式。
  
  
07
  
  
<autorotate>标签:当无用户交互时.自动扭曲/移动,缩放。
  
  
08
  
  
<plugin>标签:载人其他flash程序,图片或者按钮,图标
  
  
09
  
  
等。
  
  
10
  
  
<hotspot>标签:设置热点。
  
  
11
  
  
<events>标签:设置事件的响应。
  
  
12
  
  
<aetion>标签:定义行为.需要用脚本语言解释器解释。
  
  
13
  
  
<eontextmenu>标签:自定义鼠标右键菜单。
  
  
14
  
  
<progress>标签:设置装载时过程。
  
  
15
  
  
<network>标签:设置下载或者decode时的图片。
  
  
16
  
  
<memory>标签:设置内存使用情况。
  
  
17
  
  
<security>标签:设置安全性。
  
  
18
  
  
<textstyle>标签:定义样式。
  
  
19
  
  
<lensflareset>标签:定义一个镜头光晕样式。
  
  
20
  
  
<lensflare>标签:定义一个镜头光晕。
  
  
21
  
  
<data>标签:存储一些数据
  
  
22
  
  
<scene>标签:定义场景。
  

Krpano viewer
的功能是十分强大和复杂的.本文只介绍
系统所用到的几个比较重要的标签
=
、校园全景漫游的具体实现
2
.1、将krpano viewer嵌入html网页
Krpa~o Viewer
提供了swfkrpano.is脚本 使用它可以很方
便地将krpanoviewer嵌入html网页.其使用方法如下:
首先引人脚本文件:<script src="swfkrpano.JS></script>
接着编写iavascript脚本:
  
1
  
  
<script type=”text/javaseript”>
  
  
2
  
  
vat swf=ereateswf(”krpano.swf'’,”krpanoSWFObject”,”
  
  
3
  
  
100%”,”100% ”);
  
  
4
  
  
swf.addVariable(”xml”,”scenes-with-imagemap.xml”);
  
  
5
  
  
swf.embed(”krpanoDIV”  :
  
  
6
  
  
swf.addVariable(”xml”,”krpano.xml”);
  
  
7
  
  
</script>
  

此段代码的说明为:Var swf=ereateswf0表示可以创建要
嵌入的对象
swf
.addVariable0表示设置xml文件的路径
swf
.embed(”krpanoDIV”1表示将krpano viewer嵌入到html
元素里。
2
.2、设置初始场景
在配置文件中的根节 <krpano>中添加脚本动作.设置初
始要载人的场景
<kroano version=
”1.0.8”onstart=”loadscene(scene1.null。
MERGE)
;p1aysound(s1,sound/music.mp3,0,o);”>
onstart
为Krpano定义的事件.其后跟随的内容为事件的
响应脚本。Loadscene函数表示载入场景.其第一参数为场景名
称。Playsound函数是音频播放插件所提供。其第二个参数为要
播放的音频文件的路径。
2-3
构建各个场景
本系统所有的场景信息都保存在XML文件中。当需要载
人某个场景时,系统会查找相应的标签,读取配置。在XML配
置文件中.使用<scene>标签构建场景。具体示例如下:
<scene name=
”scenename”onstart=’。action(startscene);”>
<scene>
标签后的name属性是必须的,同时.作为场景的
标识.其值必须是全局唯一的。onstart属性后跟脚本动作代码,
表示在场景刚载入时要做的工作。本例中,onstart属性后为一
个名为startscene的动作这个动作中包含一系列的脚本代码
来完成一些工作,具体如下:
  
1
  
  
<action name=”startscene”>
  
  
2
  
  
set(heading,90);
  
  
3
  
  
showtext([b】要显示的字符 】,infostyle);
  
  
4
  
  
action(activatespot,scene3,190);
  
  
5
  
  
playsound(s1,sound/sound.mp3,0,o);
  
  
6
  
  
</action>
  

每个action的name属性值同<scene>标签的n踟e属性一
样,也是必需并且全局唯一的.其作用类似于C#语言中的方
149

法名.方便脚本编程时进行调用
在startscene这个动作中.首先设置了视角进入时的水平
位置。
在<scene>标签之中,使用<image>标签载人全景图.其代
码如下:
<image type=
”SPHERE”><sphere url=”全景图片路径”/><
/image>
本方案使用的是球面全景图,所以设置tvpe属性为
sphere
。~<sphere>标签中的ud属性中设置要加载的全景图片
的路径
在每个场景中都有若干热点与相邻场景进行互联.点击
热点后可以实现场景跳转。要定义一个热点.需要使用<
hotspot>
标签。与其他标签类似.在<hotspot>标签中,也需要对
各个属性进行设置
2_4
设置地图
在展示性项目中.导航地图可以使用户方便地知道当前
场景的位置,是必不可少的。本项目导航地图的实现.是在
krpano
提供的插件功能和脚本编程语言基础上自行实现的
地图.以及地图上的热点,都是作为插件存在的。它们的动态
特性.是通过脚本编程实现的。设置地图的代码如下:
  
1
  
  
<plugin name=”map”url=”scenes/map.JPg”keep ”true”
  
  
2
  
  
align=”righttop”x=”一480”y=”0”alpha=”0.8”handeursor=”false’’
  
  
3
  
  
sealechildren=”true”width=”480”height=”360”/><span><plugin></span>
  

<plugin>
标签的url属性设置要载入的地图图片的路径。

X.v属性设置地图插件在屏幕上所出现的位置。alpha设置图片的透明度。width与height属性设置地图插件的宽高。当场景跳转时.如果跳转后的场景与前一个场景位于同一地图中.地图不会变化.如果进入到了新的地图场景中.地图会自动更换地图显示,也可以隐藏,可以通过点击导航图按钮实现。
2.5设置地图上的热点
为了标明系统所有场景在地图上的位置和当前场景的位
置.需要使用地图热点。
每个场景在地图上具有对应的热点标出 代表当前场景
的热点,其图标与其他场景不同,以示区别。同时,点击某个热
点。也会跳转到相应的场景中。
这些场景热点也是通过插件方式实现的 每个热点都是
一个插件.通过设置插件属性实现其各种功能.其配置如下:
<plugin name=”插件名”ur1=”插件所用图片的地址”
keep=’’true”parent=’’map’’align=’’left”edge=’’center”x=”162’’
v:”495”z0rder:=”2”onhover="showtext(想要显示的场景信息)I,
onclick=”loadscenefscenel,null,MERGE,BLEND(1));/>
其中naine属性设置插件名.这是一个全局唯一的名称
url设定默认的供热点使用的图片的路径。parent属性设置插
件的父插件名称
2.6设置按钮
按钮的作用.通常是点击后出发事件.进而执行一系列的
动作。在krpano中,附带有预定义的按钮,可以实现系统预定
义的功能。也可以使用krpano强大的插件和脚步编程功能.白
定义按钮
K_~pano预定义的按钮主要包括:全屏,左转,右转,上转,
下转,全屏,鼠标样式转换。其功能的实现也是依靠脚本语句..
这些预定义的功能被单独写在一个配置文件中.krpano的主
配置文件用<include>标签包含这个配置 同时也要注意修改
相关的图片路径。使用方法如下:<include url="butt0n/buttons—
png—include.xml”/>。
在引用预定义的按钮配置时.要注意预定义的配置文件
和配置文件所引用的文件的相对路径.避免出现错误
在本项目中,除了使用预设的按钮外,还需要两个按钮.
一个是声音播放按钮,一个是地图显示按钮 采用krpano的插
件和脚步功能实现。声音播放按钮的代码为:
<plugin name=”sndl”url=”sound/soundonof.png”align=”
leftbottom”x=”10”y=”5”alpha=”0.6”scale=”1.0”keep=”true’’
onover=”tween(alpha,1);”onout=”tween(alpha,0.6);”crop=”0101501
50”onclick=”switch(soundinterface.mute);switch(crop,010150150,
01501501501;”/>
Onclick属性设置了关闭或者打开soundinterface插件 、默
认为播放,当点击后声音停止,并且图标改变为关闭方式,再
次点击,播放声音,图标变为播放方式。Crop属性的四个值:0l
0150150,表示在加载的图片的0,0位置起,宽50高50裁切出一
个图片,供当前使用。也就是说,可以把好几个图标整合在一
张图片上,使用时,调用Crop脚本函数,提供要切割的起始坐
标,要切割图片的宽高。
地图按钮的代码为:
<plugin name=”showmap”keep=”true”url=”daohang.png”
visible=”true”align=”rightbottom”onclickA=”set(state,,A,);tween
(plugin[map].X,0%);”oncliekB=”set(state,"B3;tween(plugin[map].x,
一480);”onclick=”if(state=:,A ,onclickB0,onclickA0);”y=”5”/
>

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

发表于 2014-5-2 20:41:49 | 显示全部楼层
不错~ 学习了
回复 支持 反对

使用道具 举报

发表于 2014-8-9 10:43:54 | 显示全部楼层
krpano必备!
回复 支持 反对

使用道具 举报

发表于 2014-8-10 14:05:11 | 显示全部楼层
每次看都有新收获,多谢
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|站长网

GMT+8, 2020-10-23 05:07 , Processed in 0.182559 second(s), 21 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表