基于krpano 的全景漫游系统的实现
基于krpano的校园全景VR漫游系统的设计与实现
伞 景技术 还 ｌ ｆ 以运川 学 校直传 介 ｉ 利 Ｉ ｉ 维 伞景 Ｊ ； ￣ ， ｄ ｔ ２ 技术， Ｉ Ｊ ‘ 以他 校 内校 外 参观学校 的随时 随地部能 欣赏到学 校的优 炎景包 …此ห้องสมุดไป่ตู้米腱永 、 ： 校 的
现代 计算 机 ２ ０ １ ７ ． ０ ９上
＼ ＼ ＼
统， 以此 水Ｊ 陡爪饺 Ｉ ￣ ｇ Ｊ ｘ １ ． 景人 艾
１ ３ ６ ０ 。 全景技术及 ｋ ｒ ｐ ａ ｎ ｏ 简 介
１ ． １ ３ ６ ０ ｏ 全 景技 术 现 在 发 展
随 行脱 代科学 干 仃 经 济的 发 Ｊ ． ｆ 统 的表 现 式 已
小 能通 心发』 ｎ 需求 ｒ ３ ６ ０ ￣ 伞 ｌ ， ａ ｊ － 术已 广泛Ｊ 、 川
肜象、 产 ： 品千 ¨ 服 务捉 ｆ Ｊ ｒ ・ 种 更便 、
的数宁化展｜ Ｊ ： 方案…
火、 十 ０ 久
１ ． ２ ３ ６ ０ ￣ 全 景技 术 的行 业 应 用
（ １ ） ３ ６ ０ 。 实景 ３ １ ） 行 系统
运用 ３ Ｄ伞息技 术． ｆ Ｉ ｊ ’ 以完美展示偻 龠 ： 或 扦Ｌ Ｕ － ｌ ｉ ｉ Ｊ 的 个景地图 ， 扩大 埘公 ｒ ｆ ｔ 的 力度 ． （ ２ ） 商， ｉ ｋ 展 。 ｆ ｊ 『 Ｉ ， Ｊ ３ ６ ０ 。 个求 聪爪 ３ ６ ０ 。 自 ， Ｊ 商、 ｌ Ｊ 陡， Ｊ ， Ｊ － 以他公 刮产 ： 川 Ｖ Ｉ 』 坊 ： 列厅 、 史肛 、 啦 Ｊ 占等相 火场景 腱 ， Ｊ 他参观 者变得蜓肌方 Ｉ 受 刮Ｈ 、 ｆ 捷 地点 的 制 ， 肜象和膀￣ Ｉ ！ ｉ Ｚ ｉ ： 的 、 传 Ｊ Ｊ 蔓，
场 泄游 。 Ｉ ］ 符 个地 ‘ 任 意的 ， 可以 Ｉ ｌ Ｉ Ｉ ， ｌ Ｊ 导迎 过特 １ ２ ｔ ， Ｌ ＇ ｔ 的路 浏 览地 ， ｉ ｆ ： 你邀 游观场 的场 景 ， ¨ Ｊ ‘ 以 操ｆ １ 制， 动 交流 ． ｉ Ｉ ： 你 ｒ 的世界 当巾
基于VR技术的实景漫游系统设计与实现
基于VR技术的实景漫游系统设计与实现摘要随着VR技术的不断发展和普及，利用VR技术进行实景漫游已经成为一种新的体验模式。
本文基于VR技术设计并实现了一种实景漫游系统，该系统可以为用户提供一个沉浸式的虚拟环境，用户可以通过VR设备进行实景漫游。
本文主要介绍了VR技术的基本概念，并对实景漫游系统的设计与实现进行了详细的介绍，包括系统的架构设计、场景构建、用户交互等方面。
最后通过实验验证了系统的可行性和有效性。
关键词：VR技术；实景漫游；系统设计；系统实现；用户交互AbstractWith the continuous development and popularization of VR technology, using VR technology for real-scene roaming has become a new experience mode. Based on VR technology, this paper designs and implements a real-scene roaming system, which can provide users with an immersive virtual environment. Users can perform real-scene roaming through VR devices. This paper mainly introduces the basic concepts of VR technology, and provides a detailed introduction to the design and implementation of the real-scene roaming system, including system architecture design, scene construction, user interaction, and other aspects. Finally,the feasibility and effectiveness of the system were verified through experiments.Keywords: VR technology; Real-scene roaming; System design; System implementation; User interaction1. 引言随着VR技术的不断发展和普及，虚拟现实技术已经成为了当前最热门的技术之一。
三维全景技术下的虚拟校园漫游系统设计方案
三维全景技术下的虚拟校园漫游系统设计方案1. 引言1.1 背景介绍背景介绍：随着科技的不断发展，虚拟现实技术在教育领域的应用日益广泛。
传统的校园宣传方式已经不能满足人们对校园环境的好奇和需求，而虚拟校园漫游系统则可以通过三维全景技术为用户提供更为真实、沉浸式的校园体验。
通过这一技术，用户可以在不出门的情况下就可以全方位地了解学校的各个角落，包括校园建筑、教学楼、图书馆、体育场等。
这种虚拟体验不仅可以帮助学生更加直观地选择自己心仪的学校，也可以为校园宣传和招生工作提供更加生动和有吸引力的方式。
设计一个符合用户需求的虚拟校园漫游系统具有重要的意义和价值。
本文将探讨如何利用三维全景技术下的虚拟校园漫游系统来提升用户体验，同时将系统的安全性考虑在内，为校园文化传播和学校形象塑造做出贡献。
1.2 研究意义虚拟校园漫游系统是基于三维全景技术的新型校园信息化应用系统，具有很高的实用价值和推广意义。
虚拟校园漫游系统可以有效提高学生对校园环境的熟悉度和融入感，帮助新生更快地适应校园生活。
通过虚拟校园漫游系统，学生可以方便地了解校园内各类资源的位置和属性，节省了在校园导览和查询信息的时间和精力。
虚拟校园漫游系统还可以为校园教学、管理和服务提供更加便捷、高效的工具和支持，提升学校的整体管理水平和服务质量。
虚拟校园漫游系统的研究和应用不仅对提升学生体验、提高学校管理效率具有积极的意义，同时也有着广阔的商业化前景和社会效益。
【字数：215】1.3 研究目的研究目的旨在通过设计与实现三维全景技术下的虚拟校园漫游系统，为用户提供一个更加直观、真实的校园体验。
通过该系统，用户可以在虚拟环境中自由漫游，了解校园的实际情况和各项设施的布局，从而方便他们在现实生活中更好地适应校园生活。
本研究还旨在探索如何利用三维全景技术来提升用户体验，让用户可以更加方便、快捷地获取所需信息，并且为用户提供更多的交互功能，增强用户参与感和互动体验。
通过系统功能设计和系统安全设计，还可以确保系统的稳定性和安全性，保障用户在虚拟环境中的正常使用。
pano2vr全景图课程
pano2v r 全景漫游制作一、单个全景制作1.1.运行【pano2v r】，进入主界面；1.2.点击【选择输入】，选择全景图片；1.3.【输入】-【类型】默认为【自动】，点击全景图【打开】，选定图片后，点【确定】返回主界面；1.4.【打补丁】可将LOGO放入全景；1.5.可加入多个补丁，点击【增加】添加一个补丁，按下图进行设置；1.6.【显示参数】可调整全景的水平和垂直角度以及正北方向；1.7.【显示参数/限制】用于指定全景初始的视角，【平摇】为水平方位，【俯仰】为垂直方位，【FoV】为可视角度，【正北】可调整全景的方位；1.8.【用户数据】用于填写作品相关的信息和全景的经纬坐标；1.9.点击【纬度】后的坐标按钮，设置全景的经纬度信息；通过【设定正北标记】和【选择地标】可方便的设置正北方位；1.10.【交互热点】可在全景实现人机交互的功能；1.11.在图片中的任何位置双击加入一个点型热区；1.12.向左移动至大门，再添加一个多边型热区；1.13.[媒体]中可加入背景音乐、图片和视频等；1.14.点击右侧的[打开]文件名，可选择背景音乐；1.15.在左侧图片的相应位置双击，可添加图片和视频；1.16.在电视位置双击，可添加视频；1.17.在主界面的[输出]中选择输出格式后，点击[增加]；1.18.选择系统自带的皮肤；1.19.设置[FLASH输出]的视觉效果；1.20.设置[FLASH输出]的视觉效果；1.21.点击[确定]生成SWF格式文件，即完成；1.22.在主界面的[输出]中选择输出格式[HTML5]后，点击[增加]1.23.点击[确定]生成HTML5格式文件，即完成；二、多个全景漫游制作2.1.完成单个全景的基础上，在主界面右侧的【漫游浏览器】中，鼠标右键选【Add Panora ma】添加新的全景；2.2.参照【一】的步骤依次加入全景2和3；2.3.接下来需要对所有全景设置交互热点，依次选择全景，设置【交互热点】-【修改】注：1.填写【ID】时，需要与【URL】中的编号一致，便于后期导航图和缩略图的皮肤制作；2.【皮肤ID】也是与皮肤中的热点名称一致，这里暂且定义为’hs1’；2.4.完成三个全景的热点交互之后，右侧漫游浏览器中每个全景的‘感叹号’就消失了！2.5.多个全景漫游的制作到此就OK了！点击【全部】看看效果吧！三、脚本编辑在【主界面】-【输出】中点击【参数】按钮；参照下图，点击【编辑】按钮，进入皮肤脚本编辑界面；参照下图设置皮肤的大小后，就可以准备皮肤脚本的制作！3.1.工具栏制作3.1.1.参照下图添加一个【绘制矩形】3.1.2.双击已绘制的【矩形】，设置【尺寸】、【背景】和【边框】等参数注：尺寸-高的数值按照按钮图片的高并预留上下部分的空白，本例中按钮图片为40*40；3.1.3.参照下图添加一个图片作为按钮，然后点击新增的图片，修改【ID】为‘tool_l eft’3.1.4.依次加入所有的按钮图片并拖到相应的位置，并将【矩形】拖到皮肤的左下角（或你喜欢的位置），记住要设置【锚点】接下来就要对每个按钮设置功能，双击【tool_l eft】弹出【图片属性】，选择【动作/修改器】3.1.5.参照下图设置动作，并依次右上下和放大、缩小（下文不再详细说明）第7个和第8个按钮如下3.1.6.再添加两个【矩形】，分别是缩略图（sltbar）和导航图(dhtbar)，并分别放至左上角和右上角注：为方便演示，皮肤大小调整为640*380，全部完成后可以再进行调整；3.1.7.参照下图设置第9个和第10个按钮的动作最基本的皮肤制作到此已完成，保存皮肤并返回主界面，生成输出看看效果吧！还有一个小小的美化的处理，三个bar的透明处理，再次进入皮肤编辑界面，双击【toolba r】，参照下图设置透明度和动作，别忘了另外两个bar保存皮肤并返回主界面，生成输出看看效果吧！是不是美了！？3.2.缩略图制作3.2.1.双击【sltbar】矩形，修改尺寸3.2.2.现在开始【sltbar】的制作，参照【3.1.3】的方法在缩略图矩形中加入左右两个方向箭头3.2.3.在中部加入【容器】，修改【ID】并设置大小和位置3.2.4.双击‘slt_ce nter’【容器】，勾选【蒙版】3.2.5.再添加一个【矩形】，【ID】为‘slt_ce nter_items’，并设置【矩形属性】3.2.6.在‘slt_ce nter_items’【矩形】中依次加入缩略图【图片】3.2.7.依次为每个缩略图设置[交互热点替身],双击第一个缩略图，填写[交互热点替身I D]为‘Point0101’3.2.8.点击[动作/修改器]选项卡，设置[动作]，其中‘dt0101’和‘yellow dot’是导航图中的对象名称3.2.9.第二、三个缩略图如下3.2.10.在右侧的【树】中，将‘slt_ce nter_items’【矩形】拖入‘slt_ce nter’【容器】中3.2.11.修改‘slt_ce nter_items’【矩形】的位置，与‘slt_ce nter’【容器】的位置一致3.2.12.在右侧的【树】中双击‘slt_le ft’,进入【动作/修改器】3.2.13.在右侧的【树】中双击‘slt_ri ght’,进入【动作/修改器】现在可以告诉你一个好消息，缩略图的皮肤已经完成了，保存脚本-生成输出看看效果吧！3.3.导航（雷达）图制作3.3.1.参照下图添加一个【绘制矩形】3.3.2.双击已绘制的【矩形】，设置【尺寸】、【背景】和【边框】等参数注：尺寸-高的数值按照按钮图片的高并预留上下部分的空白，本例中按钮图片为300*300；3.3.3.参照下图添加导航图，然后点击新增的图片，修改【ID】为‘dht_t01’热点替身I D]，必须填写与之前设定的热点ID（详见2.3章节内容）保持一致，如‘Point0101’3.3.5.依次添加另两个导航点3.3.6.参照下图添加当前导航点图片3.3.7.参照下图添加雷达图片3.3.8.双击‘yellow_dot1’，设置[图片属性]3.3.9.双击[树]中的‘dt0101’，设置[图片属性]3.3.10.依次设置‘dt0102’和‘dt0103’的[图片属性] dt0102dt0103现在又可以告诉你一个好消息，导航（雷达）图的皮肤已经完成了，保存脚本-生成输出看看效果吧！3.4.Google（百度）地图制作Google地图比较方便，因为PANO2VR里集成了谷歌地图，具体设置如下：1．参照下图添加一个矩形2．在矩形‘mapbar’中添加一个[文本区]3．双击刚添加的[文本区]填写[文字]，注意脚本中的w idth和heig ht需要与尺寸相符4．关闭[皮肤编辑器]，在[HTML5输出]的[HTML]选项卡中勾选‘Includ e Google Maps’选项Baidu地图比较方便，原因很简单，P ANO2V R里没有集成了百度地图，具体设置可参照Goog le地图，但第4节中则不需要勾选‘Includ e Google Maps’选项，但在生成好的H TML文件中需要在B ody的底部加入百度地图的脚本，如下：<script type="text/javasc ript" src="http://api.map.baidu.com/api?key=&v=1.1&servic es=true"></script><script type="text/javasc ript">//创建和初始化地图函数：functi on baidu_initM ap(){baidu_creat eMap();//创建地图baidu_setMa pEven t();//设置地图事件baidu_addMa pCont rol();//向地图添加控件baidu_addMa rker();//向地图中添加m arke r}//创建地图函数：functi on baidu_creat eMap(){var baidu_map = new BMap.Map("mapdiv");//在百度地图容器中创建一个地图var baidu_point = new BMap.Point(114.337663,30.564641);//定义一个中心点坐标baidu_map.center AndZo om(baidu_point,13);//设定地图的中心点和坐标并将地图显示在地图容器中window.map = baidu_map;//将map变量存储在全局}//地图事件设置函数：functi on baidu_setMa pEven t(){map.enable Dragg ing();//启用地图拖拽事件，默认启用(可不写)map.enable Scrol lWhee lZoom();//启用地图滚轮放大缩小map.enable Doubl eClic kZoom();//启用鼠标双击放大，默认启用(可不写)map.enable Keybo ard();//启用键盘上下左右键移动地图}//地图控件添加函数：functi on baidu_addMa pCont rol(){//向地图中添加缩放控件var ctrl_n av = new BMap.Naviga tionC ontro l({anchor:BMAP_A NCHOR_TOP_LEFT,type:BMAP_N AVIGA TION_CONTR OL_SM ALL});map.addCon trol(ctrl_n av);//向地图中添加缩略图控件var ctrl_o ve = new BMap.Overvi ewMap Contr ol({anchor:BMAP_A NCHOR_BOTT OM_RI GHT,isOpen:0});map.addCon trol(ctrl_o ve);//向地图中添加比例尺控件var ctrl_s ca = new BMap.ScaleC ontro l({anchor:BMAP_A NCHOR_BOTT OM_LE FT});map.addCon trol(ctrl_s ca);}//标注点数组var marker Arr = [{title:"全景漫游",conten t:"全景漫游",point:"114.341256|30.564392",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}];//创建mark erfuncti on baidu_addMa rker(){for(var i=0;i<marker Arr.length;i++){var json = marker Arr[i];var p0 = json.point.split("|")[0];var p1 = json.point.split("|")[1];var point= new BMap.Point(p0,p1);var iconIm g = baidu_creat eIcon(json.icon);var marker = new BMap.Marker(point,{icon:iconIm g});var iw = baidu_creat eInfo Windo w(i);var label= new bel(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});marker.setLab el(label);map.addOve rlay(marker);label.setSty le({border Color:"#808080",color:"#333",cursor:"pointe r"});(functi on(){var index= i;var _iw = baidu_creat eInfo Windo w(i);var _marke r = marker;_marke r.addEve ntLis tener("click",functi on(){this.openIn foWin dow(_iw);});_iw.addEve ntLis tener("open",functi on(){_marke r.getLab el().hide();})_iw.addEve ntLis tener("close",functi on(){_marke r.getLab el().show();})label.addEve ntLis tener("click",functi on(){_marke r.openIn foWin dow(_iw);})if(!!json.isOpen){label.hide();_marke r.openIn foWin dow(_iw);}})()}}//创建Info Windo wfuncti on baidu_creat eInfo Windo w(i){var json = marker Arr[i];var baidu_iw = new Wi ndow("<b class='iw_poi_titl e' title='" + j son.title+ "'>" +json.title+ "</b><div class='iw_poi_cont ent'>"+json.conten t+"</div>");return baidu_iw;}//创建一个Ic onfuncti on baidu_creat eIcon(json){var baidu_icon= new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w,json.h),{imageO ffset: new BMap.Size(-json.l,-json.t),infoWi ndowO ffset:new BMap.Size (json.lb+5,1),offset:new BMap.Size(json.x,json.h)})return baidu_icon;}baidu_initM ap();//创建和初始化地图</script>3.5.热区精图展示3.5.1.进入主界面，点击‘交互热点’[修改]3.5.2.选择多边形的‘交互热点类型’，在需要的区域双击开始，通过单击逐个描点，最后再通过双击结束，ID设置为‘j pg01’3.5.3.点击[确定]返回，再进入[皮肤编辑器]，参照地图拉一个矩形，但必须去除[可见]选项3.5.4.加入一个[关闭]的图片，ID为‘jpgclo se’3.5.5.加入需要放大的图片,ID为‘jpgbar01’3.5.6.双击‘jpgbar01’图片，设置[交互热点替身I D]为‘jpg01’3.5.7.设置[动作/修改器]3.5.8.双击‘jpgclo se’图片，设置[动作/修改器]接下来的工作就是不停的点击[确定]按钮，生成一个看看效果咯！3.6.热区360物件展示可通过OBJ ECT2V R生成HT ML5格式，再通过交互热点的方法进行链接咯！。
基于全景摄影的校园漫游系统制作---以广外南国商学院为例
设计制作数码世界 P .118基于全景摄影的校园漫游系统制作---以广外南国商学院为例彭湘衡 广东外语外贸大学南国商学院摘要：随着计算机技术及互联网特别是马上到来的5G 网络的发展，全景摄影以其无死角全方位的视野，较新颖的互动形式，配合VR设备，实现理想的沉浸式体验的特点，在各行业的应用将越来越普及。
如地图导航、景区宣传、房地产营销、VR 电影、赛事直播、科考探险、等场景均有应用，特别时我们熟悉的百度地图中的全景街景，为我们的生活带来极大的便利，本文以广东外语外贸大学南国商学院为例，解析校园全景漫游系统的制作。
关键词：全景摄影 全景漫游 图像拼接1 什么是全景摄影随着数码相机，计算机图形处理技术的进步，实现了水平，垂直视角均为360度的球形画面捕捉、拼接—这类球形全景画面的实现，被称为全景摄影，英文为panorama。
广义的全景摄影也包括超宽幅的摄影画面，本文主要讨论前者。
2 校园漫游系统制作的流程在制作广东外语外贸大学南国商学院校园全景漫游系统过程中，主要分为拍摄准备、场景选择、图像拼接、图像后期处理、平台发布等步骤。
2.1 全景拍摄的准备在正式全景摄影前首先要准备好所需的硬件设备，全景摄影主要设备包括：单反，全景相机，鱼眼镜头，全景云台，三脚架等，使用全景相机拍摄相对简单，能省去拼接的步骤，但因其与单反比较成像质量稍差，在大批量制作全景图像且对成像质量要求不高时可采用。
本例中采用两种方案来拍摄，第一种，拍摄地面场景时使用全画幅单反及全景云台；第二种，航拍全景时使用大疆精灵系列无人机。
准备好摄影器材后，需校对好全景云台的节点，保证相机在旋转拍摄时节点和旋转点在垂直方向上为同一垂直线上，调节节点在全景摄影中非常重要，它的准确程度直接影响图片拼接的质量。
2.2选择全景拍摄场景在校园漫游系统中需合理选择拍摄场景，把校园中突出和最具代表性的场景一定要进行拍摄，场景做到尽可能全面，以广外南国商学院为例，校园风景优美具有清新优雅的园林风格，所以我们在选择拍摄场景时，除了把标志性的建筑进行了拍摄还拍摄了校园中较多的亭台楼阁，具体有校门、教学楼、南园、节园、实验楼、日月廊桥、文化广场、图书馆、食堂、运动场等20多个场景（图1）。
krpano-chs介绍
Krpano-chs 说明文档该软件为单机版全景漫游设计软件，以CS可视化操作模式为主导，涵盖了一下主要功能：一、创建项目该软件创建及管理是以项目为单位来处理，将每个项目处理为单独的一个文件夹形式，只需简单的两次点击操作就可完成，创建完成后可将项目文件拷贝到任何一台电脑或服务器上。
支持内嵌功能的HTML和SWF两种格式嵌入，具有灵活可扩展功能。
二、场景生成1、场景生成方式分为两种：单个场景的生成和批量场景的生成2、场景图片类型分为：全景图片、环拍图片和矩阵图片三种类型3、生成场景时可选择相应的分类。
三、场景分类通过KRPANO-CHS软件进行对项目中各个场景进行分类管理，创建项目时，系统自动创建一个默认分类。
通过“场景分类”可以添加、删除、修改分类，前台可以通过分类进行缩略图的显示，平面图的展示（如不同楼层的平面图）。
四、场景漫游创建场景漫游主要有两种：热点或热区1、热点：以图片或动画等标志性的文件作为场景之间的连接。
可通过该软件调整热点的位置，显示角度，透明度等操作。
并且带有热点的鼠标事件，如鼠标点击、鼠标经过，鼠标离开等所要发生的动作命令。
2、热区：在场景中可以通过该软件勾勒出场景区域，作为场景之间的链接，可以实时修改热区的大小，形状，颜色，透明度等属性。
3、如果场景类型为矩阵图，可以将一张地图作为一个场景，从而实现地图的标点、划区域功能。
也可以联系作者，定制专门的地图引擎，实现复杂的地图操作（包含GOOGLE地图、自定义区域地图）QQ：1340320068五、场景插件主要功能在场景中插入图片或FLASH动作，如LOGO图标或其他的标志性标示。
该软件包含两个部分：公共插件和场景插件，公共场景在整个项目中显示，场景插件在单独插件中显示。
通过软件可以动态的修改插件的大小，显示位置，以及插件的鼠标事件。
六、场景光晕（眩光）主要用于增加场景的亮度。
效果如：七、场景视频在场景添加视频功能，实现无缝贴合，效果图：八、场景音频插入场景中视频文件，播放模式：点击播放或加载播放。
基于Krpano的三维全景技术的应用
和互联网结合 ，可以在多种终端使用 ， 浏览 随心 。随着三维全景 的发展
普及 ，能够实现 消费者在家 中，在室内就能够直观立体的进行订房 、购 票 、查看感 兴趣 的场馆等等 ，三维全景技术的应用能够为商 家注入新 的 活力 ， 促进市场繁荣。
一
、
基于 Ｋ ｒ ｐ ａ ｎ ｏ的 三 维场景空 间的所有图像信息 ，全方位死角 ， 三维全景播放经过特殊透
视处理 ， 立体感 、沉浸感强烈 。观赏者想看哪里点哪里 ， 还可 以给场景 中的一些物品加上热点特写， 用户点击时 ， 弹出窗 口 显示该物品的 ３ Ｄ影 像等详细信息。可以用于网站展示 、 触摸屏一体机、投影 仪、 手机 、 Ｉ ｐ ａ ｄ 等各种终端推广 ，也可以制作光盘纪念品，吸引商家前来参展设点 ，吸 引更多的顾客前来参观购物 。
更加形象直观。三维全景可 以真实再现相关地点的全方位立体场景 ，给
使用者身临其境的感觉 ， 较之二维画面更加 细腻真实 ，且三维全景能够
游网站 中都是各大酒店 、 旅 行社 的旅游线路介 绍，却对游客最关心 的景
区资料不够丰富详细 ，不能满足游客需求 。三维全景 的应用 ， 让此类 问 题迎刃而解 ！三维全景技术为景区带来 了全新的展示手法 ，给景点提供 了实景展示的机会 。三维全景把真实场景搬到网络上 ，游客轻点 鼠标就 可以近距 离浏览景区风光 ，同时还可 以把酒 店住宿环境 、 设 施也真实 的 搬到观众面前 ，充分展现景区魅力 。清晰度高、画面拍摄精美、展示窗 口大 、 超强的交互性结合语音解说将无形的旅游电子商务来说 ， 变得 “ 有 形”起来 ，起到最佳的信息传递效果 ，充分激发游客兴趣 ， 产生亲身一 探 “ 庐山真面 目”的旅游冲动和热情 。 ５ 、商场展馆三维全景展示 三维全景图像源 自 对真实场景的拍摄捕捉 ，真实感强烈 。可观看整
基于Pano2VR全景漫游系统的动态交互热点功能实现——以动态“直升机”交互热点制作为例
总 711 期第十三期 2020 年 5 月
河南科技 Henan Science and Technology
信息技术
基于 Pano2VR 全景漫游系统的动态交互热点功能实现
——以动态“直升机”交互热点制作为例
吕 梁1 魏 娟2
（1. 山东传媒职业学院，山东 济南 250000；2. 淄博市电视台，山东 淄博 255000）
（1. Shandong Communication & Media College，Jinan Shandong 250000；2.Zibo City TV Station，Zibo Shandong 255000）
Abstract: In the panoramic roaming project, the interaction between various scenes needs to be realized by the hot⁃ spot function. According to the static state of hotspots, it can be divided into static interactive hotspots and dynamic interactive hotspots. In comparison, dynamic interaction hotspots can attract more public attention than static interac⁃ tion hotspots, and are more in line with public aesthetic needs. This paper used Pano2VR software as a tool to realize the dynamic interactive hotspot function in the panoramic roaming project. Keywords: Pano2VR；dynamic interactive hotspot；dynamic "helicopter" interactive Hotspot
基于Krpano的校园全景漫游系统的实现
摘要： 全景图 的播放原理是构建三维场 在场景中创 景・ 建柱体’ 或者球体＇ 立方体等 三维物体。 将削作 好的全景照 作为物体材 片 质 贴在虚 拟的三维球体表面＇ 将转换过的６张 １ １ 照片贴在三维立方 或者 ． 的－ 体表面。将虚拟摄像机放置在球体或立方体的 体 心 位置 鼠标拖动时转动虚拟摄像机 者 或． 转动三雏体Ｉ 以此来实现奎景图的播放。 对于漫游的实现 通过特定位置添加热。 最
等。 ＜ ｏ ｐｔ标 签 ： 置 热 点 。 ｈ ｔ ｏ＞ ｓ 设 ＜ ｖｎｓ 标签 ： 置事件 的响应 。 ｅｅ ｔ ＞ 设
响应脚本 。 ｏｄｃ ｎ Ｌ ａ ｓｅｅ函数 表示载入 场景 ． 其第 一参 数为 场景名
称 。 ｌ ｓｕ ｄ函数是 音频播 放插 件所提供 。 第二 个参数 为要 Ｐａ ｏ ｎ ｙ 其 播 放 的音 频文 件的路径 。
＜ ｒｖｅ ＞ 签 ：在 装 载 全 景 图 片 的 过 程 中 显 示 一 个 小 的 嵌 入 的对象 ｐｅｉｗ 标 全景 图 。 ｓ ｆ ｄ Ｖ ｒ ｂｅ 表示设 置 ｘ 文件 的路径 ｗ ． ｄ ａ ａｌ０ ａ ｉ ｍｌ ＜ｍ ｇ ＞ 签 ： 人 图 片 。 ｉａｅ标 载
ｓ ｆ ｍｂ ｄ”ｒａｏ Ｉ ”表 示 将 ｋｐ ｎ ｉ ｅ 嵌 入 到 ｈｍｌ ｗ． ｅ （ ｐ ｎＤ Ｖ １ ｅ ｋ ｒａ ｏｖｅ ｒ ｗ ｔ 元 素里 。 ２２ 设 置初始 场景 ．、 在配 置文 件 中的根节 ＜ ｒａ ｏ 中添加 脚本 动作 ． 置初 ｋｐ ｎ ＞ 设 始 要载人 的场 景
＜ ｒａ ｏ ｖｒｉ ｋｏｎ ｅｓ ｎ＝” ．．” ｏ ｓ ｒ＝”ｏｄｃｎ （ ｅ ｅ ． ｌ ｏ １ ８ ｎｔ ｔ ｌａｓｅ ｅｓ ｎ １ ｕｌ ０ ａ ｃ ｎ 。 ＜ ｕｏｏ ｔ＞ 签 ： ａｔ ｔｅ标 ｒａ 当无 用 户 交 互 时 ． 自动 扭 曲／ 动， 放 。 移 缩 ＭＥ Ｇ ） １ ｓｕ ｄ １ ｏ ｎ／ ｓ ． ３ ， ； Ｒ Ｅ ； ａ ｏｎ （ ， ｕ ｄｍｕｉ ｍｐ ， ｏ ” ｐｙ ｓｓ ｃ ０ ）＞ ＜ ｌｇｎ 标 签 ： ｐｕ ｉ＞ 载人 其 他 ｆ ｓ 序 ， 片或 者 按 钮 ， 标 ｌ ｈ程 ａ 图 图 ｏ ｓ ｒ 为 Ｋ ｐ ｎ 定 义 的事件 ．其后 跟 随的 内容为 事件 的 ｎｔ ｔ ａ ｒａ ｏ
虚拟现实场景漫游系统设计与实现说明书
3rd International Workshop on Materials Engineering and Computer Sciences (IWMECS 2018) Design and Implementation of Scene Roaming System Based on VRSaihua Xu a, Yin Xiaohong, Xie FangsenNanchang Institute of Science and Technology, Nanchang 330108, Chinaa ****************Keywords: VR; scene roaming system; computer graphics; information technology; panoramaAbstract: The biggest characteristic of VR virtual roaming is that the object being roamed exists objectively, but the form of roaming is virtual in a different place. At the same time, the making of roaming object is the real data based on object. Virtual reality technology is appeared at the end of twentieth Century a new comprehensive information technology, which combines digital image processing, computer graphics, multimedia technology, sensor technology and other information technology branch, which greatly promoted the development of the computer technology. The paper presents design and implementation of scene roaming system based on VR.1.IntroductionVR panorama has broad applications, such as tourist attractions, hotels, construction and real estate; decoration exhibition. In architectural design, real estate or decoration can be accomplished by panoramic panorama technology. Not only make up for the shortcomings of a single point of view renderings, and three-dimensional animation to the economical and practical, the best choice as a designer.The human in the pursuit of rapid economic growth, also requires a higher quality of life, the technology is playing a central role. Virtual simulation (VR) refers to a special environment generated by computer, people can through their "projection" to the environment. Use the special device and operation control of the environment, to achieve a specific purpose, which is to dominate this environment [1]. It has its immersive interactive (immersion), (interaction) and ideas (imagination), which can make people immersed, beyond its natural form, and, with the interactive performance of multidimensional the environment of information. Rapidly penetrated into all sectors of society, and has been used in computer aided design, engineering and scientific data visualization, 3D Geographic Information System (GIS), has been widely used in medical, gaming and entertainment.In recent years, China's Internet penetration rate increased year by year, the Internet is going into the life and work NIC< report "people's investigation showed that at home and units in the proportion of Internet users in 2009 has been significantly improved, 83.2% of Internet users choose the Internet at home, while 30.2% of people choose in units of the Internet network, the Internet as a tool for everyday the value is rising. Unlimited business opportunities in all walks of life came into being. With its sharp eyes have begun to explore their business opportunities on the Internet.Virtual reality technology (Virtual Reality, referred to as VR) as a new media technology, its application areas including real estate planning, architecture and landscape design, Home Furnishing art design, experience education, medical simulation, military simulation, security monitoring, network simulation, traffic planning, cultural relics and ancient complex, virtual tourism, games and entertainment, and will gradually be involved to all walks of life, the full depth of the public daily life learning, become an integral part of the future digital life technology pillar.Virtual reality, multimedia and network information technology for the protection of historical relics, provides new means and methods of restoration and research at home and abroad have been paid attention to. In early 1990s, the British Museum, the Metropolitan Museum and other large museum has realized the virtual roaming. In recent years, China with great development in digitalcultural relics related areas, the Ministry of education established the "University Digital Museum Construction Engineering, Dunhuang Research Institute and Northwestern University jointly launched the" digital Dunhuang murals cooperative research ", the Imperial Palace Museum and Toppan Printing Company has developed a virtual the Imperial Palace in Beijing. The bid for the 2008 Olympic Games also put forward the" Virtual Olympic Museum "creative, has aroused great interest and concern of the International Olympic Committee, which host provides great help to get China Help.The research on virtual reality technology in the collection shows the application of practical task, the use of virtualization, virtual exhibition cultural digital technology, improve the display rate and the display effect of cultural relics and cultural relics protection entities, and further extended to break the constraints of time, the museum's collection, collection, exhibition and cultural dissemination function.2. Interactive roaming system based on VRAccording to the connotation and essential characteristics of virtual reality technology, it can be seen that its research and development is a relatively high technical requirements, it needs a corresponding software and hardware system environment to be matched. In addition to the perfect virtual reality software development platform and three-dimensional image processing system, according to the technical characteristics of virtual reality [2]. The system also requires a highly lifelike three-dimensional immersion, which is mainly realized by three-dimensional hearing, three-dimensional tactile or force sense and visual environment with high immersion. Stereo hearing is usually realized by three-dimensional surround stereo sound system, while highly immersive visual environment is usually realized by large screen stereoscopic projection display system.In addition, according to the technical characteristics of virtual reality, real-time interaction is the soul of virtual reality technology, which is different from other traditional media technology in essence. In virtual reality system, this kind of interaction is usually realized by virtual reality interactive device, and finally a complete virtual reality realization system is formed.This article from the modeling and rendering of 3D MAX baking technology to 3D campus roaming system using mature VRP-BUILDER virtual reality editor module to build a two development.The development of 3D and the method of 3D simulation roaming system based on VRP technology, Wuzhou University (North) to build the virtual scene, automatic roaming, manual roaming Campus navigation path, view the scenery of the campus, the campus information query, climate effect, dynamic effect of various entities, and do a detailed route according to the collision detection. At the same time according to the characteristics of 3D simulation roaming, roaming in the automatic and manual roaming process, based on the existing scene as the foundation, through the video, pictures, music. To the virtual reality system; provide convenience for the need to understand the Wuzhou University campus geographic information users [3].()1,,1,0,mod )()(10,−=−≡∑−=N k N l k x h k w j L l i l j j (1) The modeling method of Polygon+NURBS advanced modeling, each model using simplified model to the three-dimensional virtual campus architecture; using Bitmap bitmap +UVW Mapping mapping, VRAY real scene rendering method for reduction of the campus; using Max-for-VRP derived plug-in model into VRP-BUILDER virtual reality editor module, adding collision detection algorithm, VRP realize man-machine command line scripts the interactive function, to ensure the practicality of the system; the use of walking camera, dynamic roaming increase real 3D performance, multi angle view school environment; running from virtual reality editor module is derived for the EXE portable can run the executable file system.According to the real terrain data is used for terrain generation of a class of the most, at presentmost of the digital terrain model (Digital Terrain Model, DTM) to generate DTM data, by the sampling elevation in the grid map the value composition corresponding to the remote sensing image data captured texture plane or satellite.The texture image is mapped to the corresponding part in the reconstruction of terrain surface. Terrain rendering algorithm is simple, the DTM cell transformation of 4 adjacent grid points defined into 2 dimensional space of the triangle, then the optic internal area of pyramidal all such triangles sent to the graphics pipeline drawing.This algorithm can also be the image texture data to the highest resolution mapped to the corresponding polygon, but this is a very inefficient, because in general, triangle and remote sensing images The number of physical pixels is very large, and each individual triangle projection to the image space is very small, and a lot of texture pixels may be compressed to a pixel in the image, so that the effect is negligible [4]. Therefore, if directly generated by DTM terrain, even in high performance graphics hardware platform on real-time rendering, it is almost impossible, usually needs to be simplified to DTM. Data simplification methods will be discussed in detail in the next chapter.The biggest characteristic of this kind of virtual roaming is that the object being roamed is already objective and real, but the form of roaming is only fictitious in different places and at the same time. Roaming object making is real data based on object. It creates a virtual information environment in multidimensional information space, which can make users feel immersive and have perfect interaction ability with environment. And it helps to enlighten the idea that VR has not only been focused on computer graphics, it has been involved in a wider range of fields, such as videoconferencing, network technology and distributed computing technology. Virtual reality technology has become an important means of new product design and development.3.Design of 3D VR scene roaming systemThe virtual scene simulation technology is regarded as an important branch of virtual scene technology. Computer technology, image processing and graphics generation technology, multimedia technology, information synthesis technology, the integrated use of display technology and other high technology, its components include simulation modeling technology, animation technology and real-time visual technology at present domestic virtual scene technology market has not yet substantial development, but also has begun to take shape [5].The United States is in the leading position in the field, the basic research mainly focuses on perception, user interface, the four aspects of software and hardware. NASA (NASA) research focused on real time simulation of space station operation, they used a lot for the cockpit flight simulation technology [6]. The University of North Carolina (UNC) the computer department developed a help users in complex visual parallel processing system for real-time dynamic display of building landscape.Figure1. vehicle real-time 3D visual simulation and virtual environment Massachusetts Institute of Technology (Mrr) in 1985 to set up a media lab, a man named BOLIOtest environment for different graphic simulation experiment. University of Washington Washington Technology Center (HIT Lab) Interface Technology Laboratory of feeling, perception, cognition and motion control ability of.DaveSimS et al developed a virtual reality model to see how the system operates retreat in Illinois.The State University developed in vehicle design, system realization, distributed virtual remote collaboration support in different countries; different regions of the engineers can design through real-time collaboration computer network. George Mason University developed in a dynamic virtual environment in real-time fluid simulation system [7]. The California Graduate School of Naval Research Laboratory of NPS visualization the work in the virtual environment navigation and simulation.In order to achieve IEEE in distributed interactive simulation (Dls) network protocol under the support of the vehicle real-time 3D visual simulation and virtual environment. The Wright Patterson Air Force Base "3D image and Computer Graphics Lab" is S on GI4D/400 workstation built space satellite the virtual environment to simulate near space and describe the 3D graphical model of satellite earth's orbit and the running state of the simulation The information of the simulation object is more fully [8].Virtual reality (Virtual Reality VR) technology is appeared at the end of twentieth Century a new comprehensive information technology, which combines digital image processing, computer graphics, multimedia technology, sensor technology and other information technology branch, which greatly promoted the development of computer technology.The virtual technology of virtual reality technology (King) (such as virtual tour entity and Virtual Museum) virtual environment (landscape) technology (such as the restoration of generation Epang palace, Old Summer Palace has lost the building, construction has not yet been discovered Mausoleum of the First Qin Emperor) two categories. Application of virtual reality technology and cross field is very extensive. At present the successful use of the field of battlefield virtual reality technology the virtual reality simulation environment, combat command, aircraft, ship, vehicle virtual reality driving training, aircraft, missiles, ships and cars (virtual manufacturing virtual design system, including virtual reality construction) Display and visit of buildings, virtual reality surgery training, virtual reality game, virtual reality, film and television art, etc. so we can see that VR technology has strong market demand and technology drive [9].The construction of the integrated innovation of virtual reality system to realize the reconstruction of the product can be applied research and innovation training platform based on the overall goal is through the use of scientific, reasonable configuration, virtual laboratory system, the establishment of a virtual laboratory environment with the participants feel personally on the scene and real-time interactive capabilities, which will enhance the level of scientific research and teaching environment to a with the level of technological innovation platform. After the completion of the "integrated innovation based on reconfigurable product system virtual reality application of innovative research and training platform" should be a set of teaching, scientific research and demonstration functions, with immersive display and real-time interaction as the main function of the virtual reality laboratory environment and a new generation of digital media technology innovation platform.4.Design and implementation of scene roaming system based on VRThe mathematical model of distribution of Brown motion to generate realistic scenes from random fractal, many nonlinear phenomena he can express effectively in nature, is so far the best to describe the real terrain. Then he is a generalization of the Brown movement. The algorithm is: random fractal terrain generation technology of fractal geometry and FMB based on the method, used a Poisson step method (poissonfaulting), Fu Liye filter (fourierfiltersng), the midpoint displacement method (midpointdisplaeement), successive random additions (Suc.essiverandomadditions) and band limited noise accumulation method (summingbandlimit.dnoises) and other five categories. Among them, the random midpoint displacement method is the most simple and classic that is a direct application of FBM.A one-dimensional random midpoint displacement method for his own thought is: the known vertex elevation (or attribute) line, the midpoint of the elevation ( For the ends of attributes) or height (or attribute) the average value plus a random displacement, displacement of the two segment of the midpoint subdivision and recursive displacement, know that meet the resolution needed so far. The extension to the two-dimensional surface, according to the different pattern of the simulation can be divided into triangle grid simulation method, rectangular (square) grid simulation method, diamond square grid simulation method, parameter block grid simulation method, the thought and the one-dimensional similar. The square grid as an example the realization process of two-dimensional random midpoint displacement method.Good computer games, not only can achieve the purpose of work alternately, eliminate fatigue, and cultivate intelligence sentiment and inspire imagination. Computer game show is mainly virtual editing script under artificial scene behavior changes. So the application and effect of the virtual building scene roaming technology in the field of play a decisive role.The original delta game using a large number of indoor and outdoor architectural scenes, such as barracks, bunkers, tunnels, tower, armory, tower. Later the popular Quake, VR and other special police use the subway, train and ship building internal scene real-time strategy game has been more common. When this network game against the CS scene it is from 3D indoor and outdoor buildings. Even the sports games such as need for speed, FIFA, the stadium, bridge, tunnel and other buildings scene is also indispensable.Battlefield virtual simulation and command simulation training have all kinds of virtues of virtual simulation technology, such as safety, repeatability, economy, difficulty of battlefield environment adjustability, convenient against simulation, easy to achieve various tactical settings and so on.The virtual reality technology and multimedia technology, network technology is the application of computer technology in twenty-first Century three with the greatest development potential. Although the virtual reality technical difficulties still exist many unsolved theoretical problems have not yet overcome the impact on human life and work but also very little. However, it is foreseeable that in the near future, have a significant impact on the virtual reality technology is bound to human life and production.5.SummaryThe paper presents design and implementation of scene roaming system based on VR. Although all the countries have successfully developed some typical applications of virtual reality, but the application of high technology compared with other, is still in the initial stage of application development. Although it may not be able to clearly imagine, in the new century and new forms of popular virtual reality, but people can through the application of medium shape change the principle and extension of the field of medium main propagation characteristics, a reasonable conception of future scenarios.References[1] Wang Rui, the design and implementation of the money Xuelei.OpenSceneGraph 3D rendering engine. Beijing: Tsinghua University press, 2012.11.[2] Zhu Danchen, song Guiling. The realization of computer and modernization of virtual museum system based on Unreal3 and 2013, 34:48-52.[3] Duan Xinyu. The foundation of virtual reality and VRML programming. Beijing: Higher Education Press, 2014.3.[4] Xiao Peng, Liu Gengdai, Xu Mingliang.OpenSceneGraph 3D rendering engine programming guide. Beijing: Tsinghua University press, 2012.[5] Feng Yufen. Design and implementation of virtual cell roaming system based on Virtools.Computer simulation, 2015, 26 (6): 285-287.[6] Jiang Xuezhi, Li Zhonghua. Research status of virtual reality technology at home and abroad.Journal of Liaoning University of Technology, 2016.[7] Deng Zheng detailed translation of.OpenGL programming guide. Fourth edition. Beijing: people post and Telecommunications Press, 2015.[8] Yuan Haibo, Liu Houquan, and so on. 3D interactive. Microcomputer information based on scene semantics in virtual museums, 2012, 25 (9-3): 175-177.[9] Li Zhiwen, Han Xiaoling. Research status and future development of virtual reality technology and future development. Information technology and information technology (Human-ComputerInteraction Edition) 2015 (3): 94 - 96.。
场景漫游系统实验报告(3篇)
第1篇一、实验目的1. 了解场景漫游系统的基本原理和实现方法。
2. 掌握使用OpenGL进行场景漫游系统开发的基本步骤。
3. 通过实验，提高实际应用OpenGL进行三维图形编程的能力。
二、实验环境1. 操作系统：Windows XP2. 开发工具：Microsoft Visual Studio 2008, Visual C++3. OpenGL图形函数库：安装OpenGL图形函数库三、实验内容1. 场景漫游系统概述场景漫游系统是一种利用计算机图形学技术实现三维场景交互式浏览的软件系统。
它允许用户在虚拟环境中自由漫游，观察、探索三维场景，提高用户在虚拟环境中的沉浸感。
2. 实验步骤（1）初始化OpenGL环境首先，我们需要创建一个OpenGL窗口，并初始化OpenGL环境。
这包括设置视口大小、深度缓冲区、颜色缓冲区等。
（2）创建场景创建一个三维场景，包括地形、建筑物、植物、人物等元素。
可以使用OpenGL的几何建模函数，如GL_polygon、GL_triangle_strip等。
（3）设置视点设置用户在场景中的观察点，包括位置、朝向和上下视角。
可以使用OpenGL的gluLookAt函数实现。
（4）实现漫游功能实现漫游功能，包括前进、后退、左转、右转、上下移动等。
可以通过键盘输入或鼠标操作来实现。
（5）添加交互功能添加交互功能，如放大、缩小、旋转场景等。
可以使用OpenGL的gluPerspective、gluScale、gluRotate等函数实现。
（6）渲染场景渲染场景，将三维场景显示在窗口中。
使用OpenGL的渲染函数，如glClear、glBegin、glEnd等。
3. 实验截图（此处插入实验截图）4. 核心代码实现```cpp// 初始化OpenGL环境void initOpenGL() {// 设置视口大小glViewport(0, 0, width, height);// 设置投影模式glMatrixMode(GL_PROJECTION);glLoadIdentity();gluPerspective(45.0f, (float)width / (float)height, 0.1f, 100.0f);// 设置模型视图模式glMatrixMode(GL_MODELVIEW);glLoadIdentity();}// 设置视点void setViewpoint() {gluLookAt(0.0f, 5.0f, 10.0f, 0.0f, 0.0f, 0.0f, 0.0f, 1.0f, 0.0f); }// 漫游函数void walk(float step) {glTranslatef(0.0f, 0.0f, step);}// 主函数int main() {// 创建OpenGL窗口glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB | GLUT_DEPTH);glutInitWindowSize(width, height);glutCreateWindow("场景漫游系统");// 初始化OpenGL环境initOpenGL();// 设置视点setViewpoint();// 显示函数glutDisplayFunc(display);// 交互函数glutKeyboardFunc(keyboard);glutMainLoop();return 0;}```四、实验总结通过本次实验，我们掌握了使用OpenGL进行场景漫游系统开发的基本步骤。
全景漫游方案(web+手机)
全景漫游案（web+手机）项目概况1.1建设背景传统的博物馆大多没有网上展馆的功能，观众往往要花费很长的时间和精力，亲自到博物馆，才能了解博物馆的部环境、展品的摆放位置、和相关说明。
这样对博物馆的影响打了很大的折扣，不利于知识的传播和教育。
即使是现有的部分网上展馆系统，大部分是通过图片和文字来进行容介绍，观众只能被动的接收，缺少互动性，因而观众的参与意愿较低。
本项目针对这些问题，设计并制作了一套架构于WEB和手机端的的全景虚拟参观系统，可以让参观者用鼠标或手指滑动在博物馆中达到认识、学习、导览和体验的目的，改善传统博物馆的不足。
1.2建设容以超高清摄像设备全视角拍摄作品全貌。
与静态的二维平面图片不同，全景摄影借助于计算机和互联网技术，让人能够身临其境，在仿真的3D环境之中观展。
透过指尖的触碰全位重现场景全貌，更可动态地欣赏全景的全部或某一部分的细节，最大限度的主动化视角，从大特写到超广角，或远或近、或俯或仰，自主操控展示式。
1全景图片拍摄不少于20个点，每个点位拍摄62全景图片处理清晰度、影调、色彩、曝光按标准处理3全景图片拼接无拼接错位，无拼接痕迹。
4PC端下一场景指引；重点展品介绍5手机端下一场景指引；重点展品介绍6服务器部署上线测试及部署到指定服务器项目容1）为上海中心丝绸文化盛宴展览采集2017年馆全年展览的360。
全景游览数据，并提供多套版本以供不同渠道的应用，具体版本要求如下：互联网应用：每全景图像的分辨率为21500 X 10750，为访问者提供在线展览的360。
全景游览。
移动终端应用：每全景图像分辨率为2048 X 2048 ,为微信公众平台等提供在线展览的360。
全景游览。
2）展览的全景游览具体功能实现作为实体展览的网络延伸，展览全景不仅需要通过多媒体应用版及管留档版进行存留，还需要通过互联网进行呈现，为突破了传统互联网浏览局限，需满足通过移动终端的式将展览全景呈现在观众面前，需项目承接保证用户在访问过程中全位的对全景进行游览，即水平360。
基于Krpano的全景校园漫游的设计与实现
收稿日期:2020-03-31 修回日期:2020-07-31基金项目:天津市级大学生创新创业训练计划项目(201913663017)作者简介:蒋金彤(1999-),男,研究方向为物联网;通讯作者:孙雅芃(1992-),女,硕士,助教,研究方向为物联网㊂基于Krpano 的全景校园漫游的设计与实现蒋金彤,孙雅芃*(南开大学滨海学院,天津300000)摘 要:在数字校园建设和发展中,以虚拟全景校园漫游为基础的校园信息化平台能够为师生提供全新的沉浸式浏览体验,并提供更集中的信息交互功能㊂虚拟现实技术能够真实地再现现实环境,通过交互式操作,用户可以获得与真实环境相似的感受和体验,其中全景漫游是虚拟现实技术的一种典型应用㊂该文以南开大学滨海学院为实践区域,基于Krpano 平台,利用Google Maps 地图服务,采用全景图制作技术㊁SQL 数据库技术和计算机网络技术搭建了一个虚拟全景校园漫游系统,并可跨系统㊁跨设备使用㊂系统实现了2D 校园全景和谷歌地图信息服务功能,并提供了搭载陀螺仪传感器的可穿戴式VR 设备使用的WebVR 全景显示,满足了数字校园分布式㊁便于使用的需求㊂实践证明了基于Krpano 框架设计能深度定制虚拟全景校园漫游系统的相关功能,能有效开发并拓展系统,并具有重要的实践意义㊂关键词:Krpano 框架;虚拟全景校园漫游;Google Maps 地图服务;SQL 数据库;WebVR 中图分类号:TP39 文献标识码:A 文章编号:1673-629X (2021)02-0216-05doi:10.3969/j.issn.1673-629X.2021.02.039Design and Implementation of Panoramic Campus RoamBased on KrpanoJIANG Jin -tong ,SUN Ya -peng *(Nankai University Binhai College ,Tianjin 300000,China )Abstract :In the construction and development of digital campus ,the campus information platform based on virtual panoramic campus roam can provide teachers and students with a brand new immersive browsing experience and more centralized information interaction de⁃mand.The real environment can be reproduced truly by virtual reality technology.Through interactive operation ,users can get the feeling and experience similar to the real environment.Panoramic roaming is a typical application of virtual reality technology.Taking Nankai University Binhai College as the practice area ,based on Krpano platform ,using Google Maps service ,panorama production technology ,SQL database technology and computer network technology ,we construct a virtual panoramic campus roaming system ,which can be used across systems and devices.A 2D campus panorama and Google Map service is realized ,as well as the WebVR panorama display for wearable VR devices equipped with gyroscope sensors ,which meets the distributed and easy -to -use need of digital campus.Therefore ,the system based on Krpano has important value of practical significance ,which can deeply customize the relevant functions of the virtual panoramic roam ,as well as expand the system effectively.Key words :Krpano ;virtual campus panorama roam ;Google Maps service ;SQL database ;WebVR0 引 言近年来,伴随着虚拟现实技术的不断进步与发展,以及5G 技术的成熟应用,使得数字校园的发展进入新的领域㊂目前,有关高校数字化校园的相关研究,已经进入到虚拟校园阶段,并成为世界各国高等教育研究者的重点研究课题之一[1-8]㊂虚拟校园主要通过两种方式构建:一是借助3DMax 和VRP 平台实现虚拟校园漫游系统[9];二是利用全景图和HTML 5交互性优势搭建虚拟全景校园漫游系统㊂基于图像的虚拟系统因其不需要复杂的建模与编程的特点,特别适合于基于真实自然场景的仿真研究[10]㊂此外,借助Krpano 平台使用Krpano XML 编程语言设计功能,能够大大降低开发难度,提升开发效率,便于系统的维护与功能拓展㊂该文以南开大学滨海学院为研究区域,通过应用Krpano 框架㊁Krpano XML 编程㊁PTGui 可视化编辑环境㊁Google Maps 地图服务控件以及SQL 数据库技术,创建了一个集2D 校园全景漫游㊁WebVR 全景显示㊁第31卷 第2期2021年2月 计算机技术与发展COMPUTER TECHNOLOGY AND DEVELOPMENT Vol.31 No.2Feb. 2021谷歌地图信息服务㊁交互式漫游㊁真实感交互为一体的虚拟全景校园漫游系统㊂1 虚拟全景校园漫游系统关键技术1.1 Krpano框架Krpano是目前最流行的全景引擎㊂它基于Flash 的内核,同时提供了HTML5的解决方案[11]㊂其渲染效果采用Action Script语言实现,场景内容的配置则由XML标记语言负责[12]㊂XML指可扩展标记语言(extensible markup language),其设计宗旨是传输和存储数据㊂因其良好的可拓展性,XML常用于为全景场景配置个性化㊁定制化的功能供外部系统使用㊂Krpano框架能够提供Actions/Scripting动态脚本,内置如屏幕信息/设定相关的fullscreen㊁bgcolor变量;与自适应设备信息有关的device变量;核心Krpano Action相关的编程逻辑控制控制和数学运算函数等;以及外部Javascript接口函数,用于解析Javascript代码并访问所有Krpano结构与功能㊂Krpano框架如图1所示,其在逻辑结构中提供4个主要的核心对象:全景网页解析对象Tour.html,负责加载和解析脚本文件(Tour.js);全景脚本对象Tour.js中包含两部分:Krpano嵌入脚本(Krpano.js)和Krpano HTML5查看器,Krpano.js将对JavaScript 自动检查,并将全景引擎嵌入加载进HTML5中;全景显示对象Tour.swf,负责管理Flash引擎,用于读取传输XML元素内容;全景配置对象Tour.xml,将内置的26个XML元素将映射到Krpano内部数据结构中,并为Krpano查看器传输数据㊂图1 Krpano框架 框架中自带了用于Web端显示的HTML5/Flash 引擎,在无需配置外部工具及修改框架代码的情况下可完成网页配置㊂Krpano XML元素本身只是一种传输格式,并且所有的XML元素可以再次定义和引用,可为系统开发丰富的功能㊂1.2 Krpano XML语法结构Krpano XML采用XML语法结构,分为静态代码部分和动态代码部分㊂Krpano元素为Krpano XML的根元素,所有的静态代码都需要在Krpano元素内定义㊂静态代码即内置的24个元素,每类元素实现不同的功能,它相当于一个具有特定功能的积木,通过叠加不同的元素实现特定的功能,并且不同元素之间的先后关系并不重要㊂image元素控制全景图设置,包括全景图类型㊁渐进分辨率切片显示等㊂Krpano viewer支持的全景图像类型:立方体(cube)全景㊁球形(sphere)全景㊁等矩形(equirectangular)全景㊁圆柱(cylinder)全景㊁1~170度平面(flat)全景㊁鱼眼(fisheye)全景等,以及它提供为全景图添加3D深度的深度图,实现VR观看,3D转换,甚至在3D空间中四处走动(需外部VR 设备支持)㊂view元素用于存储当前视图设置的信息,包括视图水平/垂直视线坐标㊁最大/最小全景图缩放系数㊁默认视区等信息㊂control元素负责外部鼠标和键盘控制设置,使用control.mouse和control.touch变量设置鼠标的控制模式和传递信息㊂layer元素和plugin元素用于包含图像㊁图标㊁交互按钮或动态插件㊂layer和plugin元素适用于子父层级关系,能够互相声明子xml元素㊂现在layer元素与plugin元素在Krpano内部是完全相同的元素,layer 元素能够更好地描述元素㊂scene元素可以在xml文档中自定义多个场景,只有使用loadscene函数才会被解析㊂scene元素上可以存储任何自定义元素,同时每个scene元素内可包含不同的操作,当loadscene函数加载新的外部scene元素时,上一个scene元素的内容就会被移除㊂action元素可以定义Krpano动作,它的本质是动态代码,与其他脚本和程序语言函数相似,可以通过Krpano Javascrip接口从事件㊁动作或外部插件在任意位置调用动作㊂并通过args属性完成参数到变量的映射,将局部变量添加到action元素中㊂Krpano XML结构如下[13]:<Krpano><include><preview><image>< view><area><display><control><cursors><㊃712㊃ 第2期 蒋金彤等:基于Krpano的全景校园漫游的设计与实现autorotate><plugin><layer><hotspot><style>< events><action><context-menu><network>< memory><security><textstyle><lensflareset>< lensflare><data><scene><Krpano>1.3 SQL数据库技术SQL数据库技术,即操作命令集,在使用时,不必考虑 怎么做”,只需要发出 做什么”的命令就可以,属于一种功能齐全的数据库语言㊂SQL功能强大,使用方便,成本低,性能高,已成为数据库操作的基础[14]㊂1.4 全景图制作技术全景图制作流程如图2所示㊂制作时利用专业数码相机+鱼眼镜头或专业全景相机进行图像采集[15],并进行编码标记日期和地点;图像采集完成后将照片导入PTGui进行全景拼接及HDR处理,并映射到球面或等距离长圆柱的.JPG文件中;最后将导出的.JPG格式照片导入Lightroom或Photoshop中进行调色处理㊂图2 全景图制作流程2 虚拟全景校园漫游系统总体设计南开大学滨海学院虚拟全景校园漫游系统旨在为在校师生提供一个可跨系统㊁跨设备使用的稳定的虚拟校园系统,此系统实现了2D校园全景和谷歌地图信息服务功能,并提供了搭载陀螺仪传感器的可穿戴式VR设备使用的WebVR全景显示㊂2.1 系统功能设计全景校园分为2D全景图㊁WebVR全景两种全景模式,需要实现全景的漫游㊁控制㊁定位㊁交互和谷歌地图信息服务㊂系统功能如图3所示㊂图3 系统功能设计2.2 系统整体架构系统基于Krpano框架和Google Maps API Server 服务,系统整体架构设计如图4所示㊂该架构使用主流的B/S模式,分别为数据层㊁服务层和应用层三层结构㊂其中,数据层将处理完成的全景图切片上传至Web服务器,全景图数据以文件形式直接存储在Web 服务器以便用户请求访问㊂服务层使用Google cloud server作为谷歌地图信息的应用服务器㊂它提供Google maps API for JavaScript等谷歌地图功能,可将Google maps嵌入到Web端,并提供唯一凭据(key)供Krpano应用程序调用㊂应用层通过Krpano平台为系统设计2D全景㊁WebVR全景显示㊁谷歌地图信息㊁全景定位㊁全景控制㊁全景交互㊁全景漫游等功能㊂图4 系统整体框架3 虚拟全景校园系统的实现3.1 数据的采集与处理校园全景数据的采集是必不可少的㊂在采集过程中,通常使用数字摄影测量,选取专业全景相机进行图像采集可以保证后续稳定㊁有效的处理㊂通过PTGui 对拍摄的图像进行校正和图像HDR融合处理,为导入Krpano平台前做准备㊂该文采集了南开大学滨海学院正门㊁教学楼㊁图书馆㊁食堂等10个地点㊂图像采集完成后,使用第三方拼接工具PTGui手㊃812㊃ 计算机技术与发展 第31卷动进行全景拼接㊂该软件具有专业的控制点拼接功能,能够细微调整全景照片,并在内部集成HDR 处理功能㊂拼接完成的单张全景图如图5所示㊂图5 单张全景图3.2 功能实现本虚拟全景校园系统实现了2D 全景㊁WebVR 全景显示㊁谷歌地图信息㊁全景定位㊁全景控制㊁全景交互㊁全景漫游等功能㊂系统实现界面如图6所示㊂图6 系统功能实现界面(1)2D 全景图显示㊂使用Krpano 框架中的全景配置对象(tour.xml )中的scene 元素㊁image 元素㊁view 元素负责每个地点全景图,通过修改配置文件即可实现链接数据层全景切片,完成全景图的加载显示㊂核心代码如下:<scene name ="scene _Library _v 1_0_2"title ="图书馆"onstart =""havevrimage ="true"thumburl ="panos /Library _v 1_0_2.tiles /thumb.jpg">//通过thumburl 链接全景图切片,并自定义全景地点名称<view hlookat ="0.0"vlookat ="0.0"fovtype ="MFOV"//初始化全景视场,type 为”MFOV ”fov ="120"maxpixelzoom ="2.0"fovmin ="70"fovmax ="140"limitview ="auto"/><image type ="CUBE"multires ="true"tilesize ="512"if="!webvr.isenabled">//配置全景类型为立方体(2)WebVR 全景显示㊂Krpano 框架提供外挂WebVR 插件(webvr.js ),通过调用WebVR API ,实现了对外部移动设备的加速传感器和陀螺仪传感器进行体感和位置追踪㊂核心代码如下:webvr ="true"//开启WebVR 模式<image if ="webvr.isenabled"><cube url ="panos /BeilangYuan.tiles /vr /pano _%s.jpg"/>//链接WebVR 模式下的全景图切片全景配置对象(tour.xml )封装了全景图配置的scene ㊁image ㊁view 等元素,实现了根据配置信息自动完成全景图初始化加载和请求㊂WebVR 全景显示界面如图7所示㊂图7 WebVR 全景显示界面(3)谷歌地图信息服务㊁全景定位㊂由Googlemaps services 提供的Maps API for JavaScript 支持将Google maps 信息服务嵌入到Krpano 框架中,并通过全景配置对象(tour.xml )和全景脚本对象(tour.js )配置实现全景定位,将全景图EXIF 中的地理信息(纬度lat ㊁经度lng ㊁方位heading )自动定位标记在谷歌地图中㊂核心代码如下:maps ="true"maps _type ="google"//开启maps ,配置type 为 google ”maps _google _api _key =""<scene name ="scene _DJI _Building 6"thumburl ="panos /DJI_Building 6.tiles /thumb.jpg"lat ="38.86109000"lng ="117.44135556"heading ="0.0">//自动获取全景图exif 信息并存储在lat ㊁lng ㊁heading 属性中实现效果如图8所示㊂图8 全景定位及谷歌地图效果图(4)全景交互㊂Krpano 框架已默认配置外部交互设备,如鼠标㊁键盘等形式的交互㊂通过配置全景配置对象增加热点交互㊁陀螺仪体感交互功能,调用陀螺仪传感器,并提高移动设备的交互体验感㊂核心代码如下:<hotspot name ="spot 1"style ="skin _hotspotstyle"ath ="1.960"atv ="0.603"linkedscene ="scene _3"/>//配置热点信息,指定链接场景<style name ="skin _hotspotstyle"㊃912㊃ 第2期 蒋金彤等:基于Krpano 的全景校园漫游的设计与实现url="vtourskin_hotspot.png"onclick="if(linkedscene,skin_hidetooltips();tween(scale, 0.25,0.5);tween(oy,-20,0.5);tween(alpha,0,0.5); looktohotspot();loadscene(get(linkedscene),null,MERGE, BLEND(1));skin_updatescroll(););" //配置onclick事件响应热点4摇结束语 该文以南开大学滨海学院校园为研究区域,使用Krpano框架并结合全景图制作技术,设计了一个集2D校园全景漫游㊁WebVR全景显示㊁谷歌地图信息服务㊁交互式漫游㊁真实感交互为一体的虚拟全景校园漫游系统,并可跨系统㊁跨设备使用㊂在系统设计过程中,根据师生需求在全景漫游中定制交互功能;将全景漫游系统嵌入web端,实现了跨系统㊁跨设备㊁多用户实时访问的功能㊂全景漫游系统具有较强的广播宣传效应,同时也有助于对帮助数字校园建设,让虚拟现实技术在校园里实现㊂参考文献:[1] 范国渠.高校数字化校园整体构建策略与实施[D].济南:山东师范大学,2009.[2] 朱国情,李东亮,程 刚.基于Krpano的全景编辑系统设计与实现[C]//第14届中国系统仿真技术及其应用学术年会论文集.三亚:科研出版社,2012.[3] 杭永冲,洪祎晨.基于krpano的校园全景VR漫游系统的设计与实现[J].现代计算机,2017(25):57-61. [4] 杨仁杰.基于Web的全景技术研究[D].郑州:郑州大学,2012.[5] LI D,XIAO B J,XIA J Y.High-resolution full frame pho⁃tography of EAST to realize immersive panorama display [J].Fusion Engineering and Design,2020,155:111545.[6] ZHANG M,XU J,LI E,et al.The design and implementa⁃tion of agricultural base virtual roaming system based on the 720°panorama[J].Destech transactions on computer science and engineering,2017.[7] 武 刚,余 武.虚拟校园三维全景漫游系统探究与实现[J].现代教育技术,2013,23(5):122-126.[8] 彭统乾,甘 泉.基于VRP的虚拟水上乐园设计[J].自动化与仪器仪表,2015(3):201-203.[9] RUAN Jing,SHANG Yanlei.Research on detection andmodification system based on virtual panorama[J].IOP Con⁃ference Series:Materials Science and Engineering,2019,490(4):042036.[10]马贺清,陈建平,于 淼,等.VRP虚拟校园建设及其关键技术[J].计算机系统应用,2012,21(5):153-157. [11]黄植钦,舒娱琴,闫文豪.基于Web AppBuilder的虚拟校园系统设计与实现 以华南师范大学为例[J].华南师范大学学报:自然科学版,2017,49(4):122-128. [12]殷腾箐,仲伟凡,张笑楠.基于Krpano的全景技术在滩涂资源管理系统中的应用[J].浙江水利科技,2017,45(3): 89-91.[13]阮 景.虚拟全景检测定位方法与中文识别方法的研究[D].北京:北京邮电大学,2019.[14]刘萍萍,陆兆攀,高武奇.基于OpenGL的三维校园漫游系统可视化研究[J].计算机技术与发展,2018,28(4):174-178.[15]张建军.全景虚拟现实技术在虚拟校园建设中的应用[J].北京工业职业技术学院学报,2020,19(1):18-22.㊃022㊃ 计算机技术与发展 第31卷。
krpano调用vue方法
krpano调用vue方法（最新版3篇）目录（篇1）1.Krpano 简介2.Vue 简介3.Krpano 与 Vue 的结合4.调用 Vue 方法的实例5.总结正文（篇1）1.Krpano 简介Krpano 是一款开源的 WebGL 全景漫游插件，可以将全景图片或者视频转化为一个可以交互的 3D 场景。
用户可以在场景中自由漫游，感受身临其境的观看体验。
Krpano 提供了丰富的功能和插件，可以满足各种不同场景的需求。
2.Vue 简介Vue 是一款流行的 JavaScript 框架，用于构建用户界面。
Vue 采用了组件化的思想，使得开发者可以轻松构建复杂的单页面应用。
Vue 提供了简洁的语法和强大的功能，如数据双向绑定、计算属性、侦听器等，极大地提高了开发效率。
3.Krpano 与 Vue 的结合将 Krpano 与 Vue 结合起来，可以实现更丰富的交互效果。
例如，通过 Vue 的方法，可以控制 Krpano 场景的播放、暂停、全屏等操作。
这样，开发者可以充分利用两者的优势，构建出更加功能强大的应用。
4.调用 Vue 方法的实例下面是一个简单的实例，演示如何在 Krpano 中调用 Vue 方法：首先，创建一个 Vue 实例，定义一个方法，如“切换全景模式”：```javascriptvar app = new Vue({el: "#app",data: {panoramaMode: "default"},methods: {switchPanoramaMode: function () {this.panoramaMode = this.panoramaMode === "default"? "fullscreen" : "default";}}});```然后，在 Krpano 的 HTML 模板中，使用 Vue 实例的`methods`属性，绑定一个事件，如“切换全景模式”：```html<a-pano :pano="pano"@switch-panorama-mode="switchPanoramaMode"></a-pano> ```在这个实例中，当用户点击“切换全景模式”按钮时，Vue 的`switchPanoramaMode`方法会被调用，从而实现全景模式的切换。
基于krpano 的全景漫游系统的实现
Krpano功能介绍Krpano的所有标签如下：Crop属性的四个值：0 、0、50、50，表示在加载的图片的0，0位置起，宽50高50裁切出一个图片，供当前使用。
也就是说，可以把好几个图标整合在一张图片上，使用时，调用Crop脚本函数，提供要切割的起始坐标，要切割图片的宽高。
parent属性设置插件的父插件名称Krpano viewer的功能是十分强大和复杂的．本文只介绍系统所用到的几个比较重要的标签=、校园全景漫游的具体实现2．1、将krpano viewer嵌入html网页Krpa~o Viewer提供了swfkrpano．is脚本使用它可以很方便地将krpano viewer嵌入html网页．其使用方法如下：首先引人脚本文件：<script src="swfkrpano．J⋯S><／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。
krpano环物场景实现
krpano环物场景实现<!-- ⽤krpano的onstart属性执⾏buildframe，该action有两个参数，第⼀个参数是图像序列所在的路径，第⼆个参数是图像总数 --><krpano version="1.0.8.15" onstart="buildframes(%CURRENTXML%/objects/toyota-avalon/,36);"><!-- 在改变浏览器窗⼝⼤⼩时和缩放环物全景时执⾏的两个action，实际上最终都是为了保证环物图⽚的尺⼨在改变窗⼝⼤⼩（onresize）和缩放全景（onviewchange）时保持恰当的⽐例 --><events onresize="updateframes()" onviewchange="updateframesscale()" /><!-- 名为frame的style，是针对36个图像plugins要载⼊的style，可以看到关键的onloaded中执⾏了updateframesize的action，同时ondown中的domouserotate是实现⿏标拖拽图像实现环物图⽚切换的关键action --><style name="frame" keep="true" visible="false"align="center"onloaded="updateframesize(get(name));set(plugin[loadingtext].visible,false);"ondown="copy(oldmousex,mouse.x);domouserotate();"/><!-- 图⽚载⼊中的⽂字显⽰，主要是为了安慰⽤户焦躁的⼼，这⾥也可以运⽤动态热点的⽅式。
基于krpano的校园全景VR漫游系统的设计与实现
基于krpano的校园全景VR漫游系统的设计与实现
杭永冲;洪祎晨
【期刊名称】《现代计算机（专业版）》
【年(卷),期】2017(000)025
【摘要】720°全景漫游是当今一种相对比较新颖的图像处理技术,依靠逼真的临场感和沉浸效果,一直很受现在人们的追求.我们可以通过全景漫游系统,往来于各个场景之间.利用现在科技的发展,体现校园的人文风景,是一种比较新颖又生动的方式.首先对360°全景技术及krpano进行适当了介绍,而后对校园全景VR漫游系统具体的设计与实现方式进行详细的解说,最后制作完成发布到网站上.
【总页数】5页(P57-61)
【作者】杭永冲;洪祎晨
【作者单位】浙江财经大学东方学院,嘉兴 314408;浙江财经大学东方学院,嘉兴314408
【正文语种】中文
【相关文献】
1.基于Krpano的校园全景漫游系统的实现 [J], 冯小欧
2.基于Pano2VR的三维全景校园漫游系统设计与实现 [J], 孙君菊;甘露
3.基于Krpano的全景校园漫游的设计与实现 [J], 蒋金彤;孙雅芃
4.基于VR全景技术的三维校园漫游系统场景搭建
——以广州工商学院三水校区为例 [J], 陈展鹏;黄建泽
5.基于VR全景技术的三维校园漫游系统场景搭建——以广州工商学院三水校区为例 [J], 陈展鹏;黄建泽
因版权原因，仅展示原文概要，查看原文内容请购买。
panovr全景图制作教程
pano2vr 全?景?漫?游制作一、单个全景制作1.1.运行【pano2vr】，进入主界面；1.2.点击【选择输入】，选择全景图片；1.3.【输入】-【类型】默认为【自动】，点击全景图【打开】，选定图片后，点【确定】返回主界面；1.4.【打补丁】可将LOGO放入全景；1.5.可加入多个补丁，点击【增加】添加一个补丁，按下图进行设置；1.6.【显示参数】可调整全景的水平和垂直角度以及正北方向；1.7.【显示参数/限制】用于指定全景初始的视角，【平摇】为水平方位，【俯仰】为垂直方位，【FoV】为可视角度，【正北】可调整全景的方位；1.8.【用户数据】用于填写作品相关的信息和全景的经纬坐标；1.9.点击【纬度】后的坐标按钮，设置全景的经纬度信息；通过【设定正北标记】和【选择地标】可方便的设置正北方位；1.10.【交互热点】可在全景实现人机交互的功能；1.11.在图片中的任何位置双击加入一个点型热区；1.12.向左移动至大门，再添加一个多边型热区；1.13.[媒体]中可加入背景音乐、图片和视频等；1.14.点击右侧的[打开]文件名，可选择背景音乐；1.15.在左侧图片的相应位置双击，可添加图片和视频；1.16.在电视位置双击，可添加视频；1.17.在主界面的[输出]中选择输出格式后，点击[增加]；1.18.选择系统自带的皮肤；1.19.设置[FLASH输出]的视觉效果；1.20.设置[FLASH输出]的视觉效果；1.21.点击[确定]生成SWF格式文件，即完成；1.22.在主界面的[输出]中选择输出格式[HTML5]后，点击[增加]1.23.点击[确定]生成HTML5格式文件，即完成；二、多个全景漫游制作2.1.完成单个全景的基础上，在主界面右侧的【漫游浏览器】中，鼠标右键选【Add Panorama】添加新的全景；2.2.参照【一】的步骤依次加入全景2和3；2.3.接下来需要对所有全景设置交互热点，依次选择全景，设置【交互热点】-【修改】注：1.填写【ID】时，需要与【URL】中的编号一致，便于后期导航图和缩略图的皮肤制作；2.【皮肤ID】也是与皮肤中的热点名称一致，这里暂且定义为’hs1’；2.4.完成三个全景的热点交互之后，右侧漫游浏览器中每个全景的‘感叹号’就消失了！2.5.多个全景漫游的制作到此就OK了！点击【全部】看看效果吧！三、脚本编辑在【主界面】-【输出】中点击【参数】按钮；参照下图，点击【编辑】按钮，进入皮肤脚本编辑界面；3.1.工具栏制作3.1.1.参照下图添加一个【绘制矩形】3.1.2.双击已绘制的【矩形】，设置【尺寸】、【背景】和【边框】等参数注：尺寸-高的数值按照按钮图片的高并预留上下部分的空白，本例中按钮图片为40*40；3.1.3.参照下图添加一个图片作为按钮，然后点击新增的图片，修改【ID】为‘tool_left’3.1.4.依次加入所有的按钮图片并拖到相应的位置，并将【矩形】拖到皮肤的左下角（或你喜欢的位置），记住要设置【锚点】接下来就要对每个按钮设置功能，双击【tool_left】弹出【图片属性】，选择【动作/修改器】3.1.5.参照下图设置动作，并依次右上下和放大、缩小（下文不再详细说明）第7个和第8个按钮如下3.1.6.再添加两个【矩形】，分别是缩略图（sltbar）和导航图(dhtbar)，并分别放至左上角和右上角注：为方便演示，皮肤大小调整为640*380，全部完成后可以再进行调整；3.1.7.参照下图设置第9个和第10个按钮的动作最基本的皮肤制作到此已完成，保存皮肤并返回主界面，生成输出看看效果吧！还有一个小小的美化的处理，三个bar的透明处理，再次进入皮肤编辑界面，双击【toolbar】，参照下图设置透明度和动作，别忘了另外两个bar保存皮肤并返回主界面，生成输出看看效果吧！是不是美了！？3.2.缩略图制作3.2.1.双击【sltbar】矩形，修改尺寸3.2.2.现在开始【sltbar】的制作，参照【3.1.3】的方法在缩略图矩形中加入左右两个方向箭头3.2.3.在中部加入【容器】，修改【ID】并设置大小和位置3.2.4.双击‘slt_center’【容器】，勾选【蒙版】3.2.5.再添加一个【矩形】，【ID】为‘slt_center_items’，并设置【矩形属性】3.2.6.在‘slt_center_items’【矩形】中依次加入缩略图【图片】3.2.7.依次为每个缩略图设置[交互热点替身],双击第一个缩略图，填写[交互热点替身ID]为‘Point0101’3.2.8.点击[动作/修改器]选项卡，设置[动作]，其中‘dt0101’和‘yellow dot’是导航图中的对象名称3.2.9.第二、三个缩略图如下3.2.10.在右侧的【树】中，将‘slt_center_items’【矩形】拖入‘slt_center’【容器】中3.2.11.修改‘slt_center_items’【矩形】的位置，与‘slt_center’【容器】的位置一致3.2.12.在右侧的【树】中双击‘slt_left’,进入【动作/修改器】3.2.13.在右侧的【树】中双击‘slt_right’,进入【动作/修改器】现在可以告诉你一个好消息，缩略图的皮肤已经完成了，保存脚本-生成输出看看效果吧！3.3.导航（雷达）图制作3.3.1.参照下图添加一个【绘制矩形】3.3.2.双击已绘制的【矩形】，设置【尺寸】、【背景】和【边框】等参数注：尺寸-高的数值按照按钮图片的高并预留上下部分的空白，本例中按钮图片为300*300；3.3.3.参照下图添加导航图，然后点击新增的图片，修改【ID】为‘dht_t01’3.3.4.参照下图添加导航点，然后点击新增的图片，修改【ID】为‘dt0101’，需要特别注意的是[交互热点替身ID]，必须填写与之前设定的热点ID（详见2.3章节内容）保持一致，如‘Point0101’3.3.5.依次添加另两个导航点3.3.6.参照下图添加当前导航点图片3.3.7.参照下图添加雷达图片3.3.8.双击‘yellow_dot1’，设置[图片属性]3.3.9.双击[树]中的‘dt0101’，设置[图片属性]3.3.10.依次设置‘dt0102’和‘dt0103’的[图片属性]dt0103现在又可以告诉你一个好消息，导航（雷达）图的皮肤已经完成了，保存脚本-生成输出看看效果吧！3.4.Google（百度）地图制作Google地图比较方便，因为PANO2VR里集成了谷歌地图，具体设置如下：1．参照下图添加一个矩形2．在矩形‘mapbar’中添加一个[文本区]3．双击刚添加的[文本区]填写[文字]，注意脚本中的width和height需要与尺寸相符4．关闭[皮肤编辑器]，在[HTML5输出]的[HTML]选项卡中勾选‘Include Google Maps’选项Baidu地图比较方便，原因很简单，PANO2VR里没有集成了百度地图，具体设置可参照Google地图，但第4节中则不需要勾选‘Include Google Maps’选项，但在生成好的HTML文件中需要在Body的底部加入百度地图的脚本，如下：<script type="text/javascript">//创建和初始化地图函数：function baidu_initMap(){baidu_createMap();//创建地图baidu_setMapEvent();//设置地图事件baidu_addMapControl();//向地图添加控件baidu_addMarker();//向地图中添加marker}//创建地图函数：function baidu_createMap(){var baidu_map = new BMap.Map("mapdiv");//在百度地图容器中创建一个地图var baidu_point = new BMap.Point(114.337663,30.564641);//定义一个中心点坐标baidu_map.centerAndZoom(baidu_point,13);//设定地图的中心点和坐标并将地图显示在地图容器中window.map = baidu_map;//将map变量存储在全局}//地图事件设置函数：function baidu_setMapEvent(){map.enableDragging();//启用地图拖拽事件，默认启用(可不写)map.enableScrollWheelZoom();//启用地图滚轮放大缩小map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)map.enableKeyboard();//启用键盘上下左右键移动地图}//地图控件添加函数：function baidu_addMapControl(){//向地图中添加缩放控件var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_SMALL});map.addControl(ctrl_nav);//向地图中添加缩略图控件var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:0});map.addControl(ctrl_ove);//向地图中添加比例尺控件var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});map.addControl(ctrl_sca);//标注点数组var markerArr = [{title:"全景漫游",content:"全景漫游",point:"114.34125 6|30.564392",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}];//创建markerfunction baidu_addMarker(){for(var i=0;i<markerArr.length;i++){var json = markerArr[i];var point = new BMap.Point(p0,p1);var iconImg = baidu_createIcon(json.icon);var marker = new BMap.Marker(point,{icon:iconImg});var iw = baidu_createInfoWindow(i);var label = new bel(json.title,{"offset":new BMap.Sizemarker.setLabel(label);map.addOverlay(marker);label.setStyle({borderColor:"#808080",color:"#333",cursor:"pointer"});(function(){var index = i;var _iw = baidu_createInfoWindow(i);var _marker = marker;_marker.addEventListener("click",function(){this.openInfoWindow(_iw);});_iw.addEventListener("open",function(){_marker.getLabel().hide();})_iw.addEventListener("close",function(){_marker.getLabel().show();})label.addEventListener("click",function(){_marker.openInfoWindow(_iw);})if(!!json.isOpen){label.hide();_marker.openInfoWindow(_iw);}})()}}//创建InfoWindowfunction baidu_createInfoWindow(i){var baidu_iw = new Window("<b class='iw_poi_title' title='" + json.title + "'>" +json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");return baidu_iw;}//创建一个Iconfunction baidu_createIcon(json){BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})return baidu_icon;}baidu_initMap();//创建和初始化地图</script>3.5.热区精图展示3.5.1.进入主界面，点击‘交互热点’[修改]3.5.2.选择多边形的‘交互热点类型’，在需要的区域双击开始，通过单击逐个描点，最后再通过双击结束，ID设置为‘jpg01’3.5.3.点击[确定]返回，再进入[皮肤编辑器]，参照地图拉一个矩形，但必须去除[可见]选项3.5.4.加入一个[关闭]的图片，ID为‘jpgclose’3.5.5.加入需要放大的图片,ID为‘jpgbar01’3.5.6.双击‘jpgbar01’图片，设置[交互热点替身ID]为‘jpg01’3.5.7.设置[动作/修改器]3.5.8.双击‘jpgclose’图片，设置[动作/修改器]接下来的工作就是不停的点击[确定]按钮，生成一个看看效果咯！3.6.热区360物件展示可通过OBJECT2VR生成HTML5格式，再通过交互热点的方法进行链接咯！四、全景图片的制作4.1、我们需要先制作360全景图片。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Krpano功能介绍Krpano的所有标签如下：Crop属性的四个值：0 、0、50、50，表示在加载的图片的0，0位置起，宽50高50裁切出一个图片，供当前使用。
也就是说，可以把好几个图标整合在一张图片上，使用时，调用Crop脚本函数，提供要切割的起始坐标，要切割图片的宽高。
parent属性设置插件的父插件名称Krpano viewer的功能是十分强大和复杂的．本文只介绍系统所用到的几个比较重要的标签=、校园全景漫游的具体实现2．1、将krpano viewer嵌入html网页Krpa~o Viewer提供了swfkrpano．is脚本使用它可以很方便地将krpano viewer嵌入html网页．其使用方法如下：首先引人脚本文件：<script src="swfkrpano．J⋯S><／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插件、默认为播放，当点击后声音停止，并且图标改变为关闭方式，再次点击，播放声音，图标变为播放方式。
地图按钮的代码为：<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”／>。