基于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—），女，本科，助理編輯，研究方向：傳播學。