基于Pano2VR全景漫游系統(tǒng)的動態(tài)交互熱點功能實現(xiàn)

呂梁　魏娟

摘 要：全景漫游項目中，各場景之間的交互需要依靠熱點功能實現(xiàn)。按照熱點的靜止?fàn)顟B(tài)可分為靜態(tài)交互熱點和動態(tài)交互熱點。相比較而言，動態(tài)交互熱點比靜態(tài)交互熱點更能吸引大眾的關(guān)注，更加符合大眾的審美需要。本文以Pano2VR軟件為工具，實現(xiàn)全景漫游項目中的動態(tài)交互熱點功能。

關(guān)鍵詞：Pano2VR;動態(tài)交互熱點;動態(tài)“直升機”交互熱點

中圖分類號：TP391.41 文獻標(biāo)識碼：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世紀(jì)，在現(xiàn)代信息技術(shù)的推動作用下，攝影技術(shù)得到了空前的發(fā)展，以此為延伸的全景漫游逐步走進人們的視野。其以真實感強、畫面清晰、運行流暢等優(yōu)點被廣泛應(yīng)用到博物館、工業(yè)、軍事、旅游、教育等多個領(lǐng)域。目前，在全景項目制作過程常見的軟件有Pano2VR、Unity3D、krpano或是基于krpano內(nèi)核制作的工具（軟件）或平臺（網(wǎng)站）。Pano2VR軟件以良好的優(yōu)化界面及不需要編程就可以實現(xiàn)強大的交互功能等優(yōu)勢，在行業(yè)領(lǐng)域內(nèi)具有較大的知名度和應(yīng)用程度。

在基于Pano2VR軟件制作的全景漫游項目中，通常包含圖片、音樂、解說、文字信息等多種媒體元素，通過動作設(shè)定或者時間設(shè)定，實現(xiàn)交互，并且最終以Flash文件格式或HTML5文件格式展示項目[1]。場景交互作為交互功能之一，按照交互熱點的靜止?fàn)顟B(tài)又可分為靜態(tài)交互熱點和動態(tài)交互熱點。文中所描述的動態(tài)交互熱點，是指經(jīng)過場景中指定熱點下的皮膚ID調(diào)用的，利用皮膚編輯器進行設(shè)計制作，能夠在場景中連續(xù)不斷變化熱點圖形形態(tài)，能夠顯示目標(biāo)場景縮略圖，能夠?qū)崿F(xiàn)場景切換的虛擬按鈕。

1 基本思路

動態(tài)交互熱點一般包含動態(tài)圖形和縮略圖兩部分。其中，動態(tài)圖形是動態(tài)交互熱點在場景中的實例化圖形，即能夠在最終輸出項目中呈現(xiàn)的圖形形象。通過對動態(tài)圖形的動作設(shè)定，能實現(xiàn)場景切換功能和縮略圖的漸隱漸現(xiàn)功能。實現(xiàn)動態(tài)交互熱點的基本思路如圖1所示。

1.1 動態(tài)圖形制作的基本思路

動態(tài)圖形功能的實現(xiàn)需要同時具備三個基本條件：變量條件、時間設(shè)定和邏輯塊設(shè)置[2]。具體來講，就是產(chǎn)生動態(tài)變化圖形的對應(yīng)邏輯塊，通過變量條件的值判斷，執(zhí)行對應(yīng)的圖形形態(tài)變化命令;當(dāng)單位時間內(nèi)完成該命令后，自動改變變量條件的值類型，再進行新一輪的值判斷并執(zhí)行對應(yīng)的圖形形態(tài)變化命令，周而復(fù)始，實現(xiàn)動態(tài)圖形的形態(tài)變化。

1.2 動態(tài)縮略圖制作的基本思路

縮略圖的基本構(gòu)成元素包含背景圖片、節(jié)點圖像、文本信息。其中，節(jié)點圖像對應(yīng)目標(biāo)場景的目標(biāo)視圖;文本信息通過變量輸入來顯示目標(biāo)場景標(biāo)題。

縮略圖的動態(tài)變化過程實際是自身透明度的變化和目標(biāo)場景的變化。當(dāng)鼠標(biāo)進入指定熱點區(qū)域，漸現(xiàn)縮略圖，當(dāng)鼠標(biāo)離開指定熱點區(qū)域，漸隱縮略圖。一般來說，縮略圖的漸隱漸現(xiàn)功能由動態(tài)圖形的動作設(shè)定控制，并且指定熱點區(qū)域范圍通常是動態(tài)圖形的大小范圍。

2 關(guān)鍵步驟

以校園全景漫游項目中動態(tài)“直升機”交互熱點制作為例，重點講解實現(xiàn)“直升機”位置上下動態(tài)變化以及目標(biāo)場景縮略圖漸隱漸現(xiàn)功能的關(guān)鍵步驟。

2.1 創(chuàng)建場景熱點

首先在軟件功能面板中選擇元素-熱點，并在場景中雙擊創(chuàng)建指定熱點，修改屬性-指定熱點下的ID、類型、標(biāo)題、描述、鏈接目標(biāo)網(wǎng)址、目標(biāo)等參數(shù)，保持皮膚ID的默認(rèn)設(shè)置。

其次，打開皮膚編輯器，并添加交互熱點模板，修改屬性-位置-ID為Hotspot_helicopter。接下來，分別制作皮膚編輯器中的動態(tài)圖形和動態(tài)縮略圖。最終層級關(guān)系及效果如圖2所示。

2.2 動態(tài)“直升機”圖形制作步驟

2.2.1 創(chuàng)建變量。點擊畫布外空白處，在屬性-變量下雙擊創(chuàng)建變量，名稱為helicopter，類型為條件判斷，初始值為假。

2.2.2 繪制定時器。選擇繪制定時器，雙擊畫布空白處創(chuàng)建定時器;修改屬性-位置-ID為Timer_helicopter;刪除屬性-外觀下的可見邏輯塊，并取消可見;修改屬性-計時器下的參數(shù)類型為初始值，超時為0.5 s，重復(fù)為切換;雙擊屬性-動作添加動作設(shè)定，來源為激活，動作為設(shè)定變量值，變量名稱為helicopter，操作為等于（=），值為否，點擊OK關(guān)閉動作設(shè)定。繼續(xù)添加動作設(shè)定，來源為停用，動作為設(shè)定變量值，變量名稱為helicopter，操作為等于（=），值為真，點擊OK關(guān)閉動作設(shè)定。實現(xiàn)變量helicopter值的動態(tài)變化。

2.2.3 添加圖片。選擇添加圖片，雙擊畫布空白處導(dǎo)入PNG格式的直升機圖片;拖拽直升機圖片至Hotspot_helicopter正上方，成為子集;修改圖片屬性-位置-ID為Image_helicopter，修改位置-錨點位置居中，并且X、Y數(shù)值設(shè)為0;點擊位置邏輯塊，設(shè)置觸發(fā)變量為helicopter，值為假，Y數(shù)值設(shè)為5，啟用過渡命令并設(shè)置時間為0.5 s，點擊OK關(guān)閉邏輯塊設(shè)置;勾選屬性-外觀手型鼠標(biāo)指針。

此處邏輯塊的作用為通過變量helicopter的條件判斷，執(zhí)行直升機圖片X軸方向的位移命令，并且位移的變化經(jīng)過0.5 s過渡完成。由于變量helicopter的條件判斷參數(shù)是一個動態(tài)變化過程，因此直升機圖片的上下位移也是動態(tài)變化過程。

2.2.4 添加動作。雙擊屬性-動作添加動作設(shè)定，來源為點擊，動作為打開下一個全景，URL為$hu，點擊OK關(guān)閉動作設(shè)定，實現(xiàn)目標(biāo)場景的切換。

至此，動態(tài)交互熱點下的動態(tài)圖形制作完成。

2.3 動態(tài)縮略圖制作步驟

2.3.1 制作背景圖片。選擇繪制矩形，雙擊畫布空白處創(chuàng)建矩形;修改屬性-位置-ID為Rectangle_Scene，尺寸為寬120像素、高80像素;自定義調(diào)整屬性-矩形下的背景、邊框參數(shù)。

2.3.2 制作節(jié)點圖像。選擇添加節(jié)點圖像，雙擊畫布空白處創(chuàng)建節(jié)點圖像;修改屬性-位置-ID為NodeImage_Scene，尺寸為寬110像素、高70像素;通過計算調(diào)整位置X、Y數(shù)值，使NodeImage_Scene處于Rectangle_Scene中間位置。

2.3.3 制作文本信息。選擇繪制文本區(qū)，雙擊畫布空白處創(chuàng)建文本;修改屬性-位置-ID為Text_Scene;尺寸為寬110像素、高15像素;通過計算調(diào)整位置X、Y數(shù)值，使Text_Scene下邊緣與NodeImage_Scene下邊緣重合;自定義調(diào)整屬性-矩形下的背景、邊框參數(shù);屬性-文本-文字輸入變量$hs，實現(xiàn)目標(biāo)場景標(biāo)題顯示。

2.3.4 制作容器。按住Ctrl鍵同時點擊鼠標(biāo)左鍵，選定Rectangle_Scene、NodeImage_Scene、Text_Scene;選擇繪制容器，雙擊畫布空白處創(chuàng)建容器;修改屬性-位置-ID為Container_Scene;拖拽Container_Scene至Hotspot_helicopter正上方成為子集;修改屬性-位置錨點位置為上方居中，設(shè)置X、Y數(shù)值為0;修改屬性-外觀-Alpha（透明度）值為0。

2.3.5 添加動作。選擇直升機圖片，即Image_helicopter，雙擊屬性-動作添加動作設(shè)定，來源為鼠標(biāo)進入，動作為透明度，格式為更改元素透明度，Alpha（透明度）值為1，Tansition Time為0.5 s，目標(biāo)為Container_Scene，點擊OK關(guān)閉動作設(shè)定;繼續(xù)添加動作設(shè)定，來源為鼠標(biāo)離開，動作為透明度，格式為更改元素透明度，Alpha（透明度）值為0，Tansition Time為0.5s，目標(biāo)為Container_Scene，點擊OK關(guān)閉動作設(shè)定，實現(xiàn)縮略圖的漸隱漸現(xiàn)功能。

最后，保存皮膚并返回場景中，為屬性-指定熱點下的皮膚ID指定Hotspot_helicopter交互熱點，至此場景動態(tài)交互熱點設(shè)置完成。最終輸出效果如圖3所示。

3 拓展應(yīng)用

3.1 動態(tài)圖形的多樣性

動態(tài)圖形的樣式除直升機外，還有指向箭頭、圓心、氣球等;同時，動態(tài)變化過程復(fù)雜多變，常見有動態(tài)位置、動態(tài)尺寸、動態(tài)角度、動態(tài)Alpha值（透明度），每個參數(shù)旁邊均有一個邏輯塊選項，為用戶提供高級命令修改。

3.2 屬性-高級下的層疊樣式表

層疊樣式表（Cascading Style Sheets，CSS）是一種用來表現(xiàn)HTML或XML等文件樣式的計算機語言。CSS為HTML標(biāo)記語言提供了一種樣式描述，定義了其中元素的顯示方式。利用它可以實現(xiàn)修改一個小的樣式更新與之相關(guān)的所有頁面元素。例如：編寫文本-屬性-高級選項下的CSS樣式代碼為text-shadow： 1px 1px 2px #000000，可實現(xiàn)文字陰影的添加。

3.3 多個動態(tài)交互熱點注意事項

在實際全景漫游項目中，動態(tài)交互熱點往往不僅一個，因此在動態(tài)交互熱點制作過程中，除注意命名的規(guī)范性，還應(yīng)注意為每一個動態(tài)交互熱點單獨創(chuàng)建定時器和變量，防止場景運行時出現(xiàn)命令調(diào)用沖突產(chǎn)生錯誤。

4 結(jié)語

在Pano2VR軟件制作的全景漫游項目中，藝術(shù)與技術(shù)相結(jié)合的特點得到了較好的體現(xiàn)。以動態(tài)交互熱點中的動態(tài)圖形制作為例，應(yīng)從動畫運動規(guī)律的角度思考圖形的動態(tài)變化過程。在交互設(shè)計上，不需要通過語言腳本的編寫就能實現(xiàn)功能，但在設(shè)置高級交互命令時，往往需要具備清晰的邏輯思維和編程思維。以此為基礎(chǔ)，在研究其他動態(tài)交互功能時具有重要的參考意義，可以相對輕松地完成制作。

參考文獻：

[1]薛瑞昌.基于Pano2VR的博物館全景漫游微課系統(tǒng)研究[J].現(xiàn)代教育技術(shù)，2017（5）：88-94.

[2]孫君菊，甘露.基于Pano2VR的三維全景校園漫游系統(tǒng)設(shè)計與實現(xiàn)[J]. 福建電腦，2016（6）：129-130.

收稿日期：2020-04-11

作者簡介：呂梁（1988—），男，本科，助教，研究方向：數(shù)字媒體;魏娟（1986—），女，本科，助理編輯，研究方向：傳播學(xué)。