《基于Pano2VR全景漫游系统的动态交互热点功能实现》-工学论文，科技论文-论文范文参考-科学狗论文网

标题

基于Pano2VR全景漫游系统的动态交互热点功能实现

范文

吕梁　魏娟

摘要：全景漫游项目中，各场景之间的交互需要依靠热点功能实现。按照热点的静止状态可分为静态交互热点和动态交互热点。相比较而言，动态交互热点比静态交互热点更能吸引大众的关注，更加符合大众的审美需要。本文以Pano2VR软件为工具，实现全景漫游项目中的动态交互热点功能。

关键词：Pano2VR;动态交互热点;动态“直升机”交互热点

中图分类号：TP391.41 文献标识码：A 文章编号：1003-5168（2020）13-0011-03

Realization of Dynamic Interactive Hotspot Function

Based on Pano2VR Panoramic Roaming System

——Taking the Production of Dynamic "Helicopter" Interactive Hotspot as an Example

LYU Liang1 WEI Juan2

（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 hotspot 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 interaction 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

進入21世纪，在现代信息技术的推动作用下，摄影技术得到了空前的发展，以此为延伸的全景漫游逐步走进人们的视野。其以真实感强、画面清晰、运行流畅等优点被广泛应用到博物馆、工业、军事、旅游、教育等多个领域。目前，在全景项目制作过程常见的软件有Pano2VR、Unity3D、krpano或是基于krpano内核制作的工具（软件）或平台（网站）。Pano2VR软件以良好的优化界面及不需要编程就可以实现强大的交互功能等优势，在行业领域内具有较大的知名度和应用程度。

在基于Pano2VR软件制作的全景漫游项目中，通常包含图片、音乐、解说、文字信息等多种媒体元素，通过动作设定或者时间设定，实现交互，并且最终以Flash文件格式或HTML5文件格式展示项目[1]。场景交互作为交互功能之一，按照交互热点的静止状态又可分为静态交互热点和动态交互热点。文中所描述的动态交互热点，是指经过场景中指定热点下的皮肤ID调用的，利用皮肤编辑器进行设计制作，能够在场景中连续不断变化热点图形形态，能够显示目标场景缩略图，能够实现场景切换的虚拟按钮。

1 基本思路

动态交互热点一般包含动态图形和缩略图两部分。其中，动态图形是动态交互热点在场景中的实例化图形，即能够在最终输出项目中呈现的图形形象。通过对动态图形的动作设定，能实现场景切换功能和缩略图的渐隐渐现功能。实现动态交互热点的基本思路如图1所示。

1.1 动态图形制作的基本思路

动态图形功能的实现需要同时具备三个基本条件：变量条件、时间设定和逻辑块设置[2]。具体来讲，就是产生动态变化图形的对应逻辑块，通过变量条件的值判断，执行对应的图形形态变化命令;当单位时间内完成该命令后，自动改变变量条件的值类型，再进行新一轮的值判断并执行对应的图形形态变化命令，周而复始，实现动态图形的形态变化。

1.2 动态缩略图制作的基本思路

缩略图的基本构成元素包含背景图片、节点图像、文本信息。其中，节点图像对应目标场景的目标视图;文本信息通过变量输入来显示目标场景标题。

缩略图的动态变化过程实际是自身透明度的变化和目标场景的变化。当鼠标进入指定热点区域，渐现缩略图，当鼠标离开指定热点区域，渐隐缩略图。一般来说，缩略图的渐隐渐现功能由动态图形的动作设定控制，并且指定热点区域范围通常是动态图形的大小范围。

2 关键步骤

以校园全景漫游项目中动态“直升机”交互热点制作为例，重点讲解实现“直升机”位置上下动态变化以及目标场景缩略图渐隐渐现功能的关键步骤。

2.1 创建场景热点

首先在软件功能面板中选择元素-热点，并在场景中双击创建指定热点，修改属性-指定热点下的ID、类型、标题、描述、链接目标网址、目标等参数，保持皮肤ID的默认设置。

其次，打开皮肤编辑器，并添加交互热点模板，修改属性-位置-ID为Hotspot_helicopter。接下来，分别制作皮肤编辑器中的动态图形和动态缩略图。最终层级关系及效果如图2所示。

2.2 动态“直升机”图形制作步骤

2.2.1 创建变量。点击画布外空白处，在属性-变量下双击创建变量，名称为helicopter，类型为条件判断，初始值为假。

2.2.2 绘制定时器。选择绘制定时器，双击画布空白处创建定时器;修改属性-位置-ID为Timer_helicopter;删除属性-外观下的可见逻辑块，并取消可见;修改属性-计时器下的参数类型为初始值，超时为0.5 s，重复为切换;双击属性-动作添加动作设定，来源为激活，动作为设定变量值，变量名称为helicopter，操作为等于（=），值为否，点击OK关闭动作设定。继续添加动作设定，来源为停用，动作为设定变量值，变量名称为helicopter，操作为等于（=），值为真，点击OK关闭动作设定。实现变量helicopter值的动态变化。

2.2.3 添加图片。选择添加图片，双击画布空白处导入PNG格式的直升机图片;拖拽直升机图片至Hotspot_helicopter正上方，成为子集;修改图片属性-位置-ID为Image_helicopter，修改位置-锚点位置居中，并且X、Y数值设为0;点击位置逻辑块，设置触发变量为helicopter，值为假，Y数值设为5，启用过渡命令并设置时间为0.5 s，点击OK关闭逻辑块设置;勾选属性-外观手型鼠标指针。

此处逻辑块的作用为通过变量helicopter的条件判断，执行直升机图片X轴方向的位移命令，并且位移的变化经过0.5 s过渡完成。由于变量helicopter的条件判断参数是一个动态变化过程，因此直升机图片的上下位移也是动态变化过程。

2.2.4 添加动作。双击属性-动作添加动作设定，来源为点击，动作为打开下一个全景，URL为$hu，点击OK关闭动作设定，实现目标场景的切换。

至此，动态交互热点下的动态图形制作完成。

2.3 动态缩略图制作步骤

2.3.1 制作背景图片。选择绘制矩形，双击画布空白处创建矩形;修改属性-位置-ID为Rectangle_Scene，尺寸为宽120像素、高80像素;自定义调整属性-矩形下的背景、边框参数。

2.3.2 制作节点图像。选择添加节点图像，双击画布空白处创建节点图像;修改属性-位置-ID为NodeImage_Scene，尺寸为宽110像素、高70像素;通过计算调整位置X、Y数值，使NodeImage_Scene处于Rectangle_Scene中间位置。

2.3.3 制作文本信息。选择绘制文本区，双击画布空白处创建文本;修改属性-位置-ID为Text_Scene;尺寸为宽110像素、高15像素;通过计算调整位置X、Y数值，使Text_Scene下边缘与NodeImage_Scene下边缘重合;自定义调整属性-矩形下的背景、边框参数;屬性-文本-文字输入变量$hs，实现目标场景标题显示。

2.3.4 制作容器。按住Ctrl键同时点击鼠标左键，选定Rectangle_Scene、NodeImage_Scene、Text_Scene;选择绘制容器，双击画布空白处创建容器;修改属性-位置-ID为Container_Scene;拖拽Container_Scene至Hotspot_helicopter正上方成为子集;修改属性-位置锚点位置为上方居中，设置X、Y数值为0;修改属性-外观-Alpha（透明度）值为0。

2.3.5 添加动作。选择直升机图片，即Image_helicopter，双击属性-动作添加动作设定，来源为鼠标进入，动作为透明度，格式为更改元素透明度，Alpha（透明度）值为1，Tansition Time为0.5 s，目标为Container_Scene，点击OK关闭动作设定;继续添加动作设定，来源为鼠标离开，动作为透明度，格式为更改元素透明度，Alpha（透明度）值为0，Tansition Time为0.5s，目标为Container_Scene，点击OK关闭动作设定，实现缩略图的渐隐渐现功能。

最后，保存皮肤并返回场景中，为属性-指定热点下的皮肤ID指定Hotspot_helicopter交互热点，至此场景动态交互热点设置完成。最终输出效果如图3所示。

3 拓展应用

3.1 动态图形的多样性

动态图形的样式除直升机外，还有指向箭头、圆心、气球等;同时，动态变化过程复杂多变，常见有动态位置、动态尺寸、动态角度、动态Alpha值（透明度），每个参数旁边均有一个逻辑块选项，为用户提供高级命令修改。

3.2 属性-高级下的层叠样式表

层叠样式表（Cascading Style Sheets，CSS）是一种用来表现HTML或XML等文件样式的计算机语言。CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。例如：编写文本-属性-高级选项下的CSS样式代码为text-shadow： 1px 1px 2px #000000，可实现文字阴影的添加。

3.3 多个动态交互热点注意事项

在实际全景漫游项目中，动态交互热点往往不仅一个，因此在动态交互热点制作过程中，除注意命名的规范性，还应注意为每一个动态交互热点单独创建定时器和变量，防止场景运行时出现命令调用冲突产生错误。

4 结语

在Pano2VR软件制作的全景漫游项目中，艺术与技术相结合的特点得到了较好的体现。以动态交互热点中的动态图形制作为例，应从动画运动规律的角度思考图形的动态变化过程。在交互设计上，不需要通过语言脚本的编写就能实现功能，但在设置高级交互命令时，往往需要具备清晰的逻辑思维和编程思维。以此为基础，在研究其他动态交互功能时具有重要的参考意义，可以相对轻松地完成制作。

参考文献：

[1]薛瑞昌.基于Pano2VR的博物馆全景漫游微课系统研究[J].现代教育技术，2017（5）：88-94.

[2]孙君菊，甘露.基于Pano2VR的三维全景校园漫游系统设计与实现[J]. 福建电脑，2016（6）：129-130.

收稿日期：2020-04-11

作者简介：吕梁（1988—），男，本科，助教，研究方向：数字媒体;魏娟（1986—），女，本科，助理编辑，研究方向：传播学。

随便看

科学优质学术资源、百科知识分享平台，免费提供知识科普、生活经验分享、中外学术论文、各类范文、学术文献、教学资料、学术期刊、会议、报纸、杂志、工具书等各类资源检索、在线阅读和软件app下载服务。