互聯網+720°全景影像展示平臺的設計與實現

白　雪，白永國，丁文昊

(1.吉林化工學院 信息中心，吉林 吉林 132022；2.吉林化工學院 信息與控制工程學院，吉林 吉林 132022；3.吉林化工學院 經濟管理學院，吉林 吉林 132022)

“互聯網+”以及大數據時代的到來，為各行各業創造了更多商機，也為更多“創客”愛好者搭建了施展技藝的舞臺，社會上甚至一度出現“人人創新”的新態勢[1].高校作為創新型人才培養的孵化基地，在“大眾創業，萬眾創新”的洪流中也充當著“弄潮兒”，始終走在前列.近年來，以互聯網為契機，各種新技術的發展日新月異，全景影像制作與展示技術也逐漸引發關注.基于此，鼓勵并引導學生將現代流行的全景影像制作技術與實際生活相結合，實現線上線下虛擬場景與實體的無縫對接，成為學生雙創實踐活動的一個研究點.以全景介紹校園及周邊景點為出發點，將相關計算機技術作為工具，設計并制作“互聯網+720°全景影像展示平臺”，一方面檢驗了學生的雙創實踐能力并為現實生活中的虛擬引導助力，另一方面，也為“互聯網+新技術”方面研究提供一定實踐積累.

1　互聯網+720°全景影像展示平臺的設計

1.1　平臺總體功能設計

互聯網+720°全景影像展示平臺采用B/S架構.即使用者可以通過瀏覽器直接使用相關功能，并對相關內容進行查看.管理員則利用后臺對網站內容全面管理.該平臺具體功能情況如圖1所示.

圖1　平臺功能示意圖

平臺分為前端后端兩部分.前端展示呈現部分主要提供欄目展示、圖片輪播、圖文介紹以及一鍵720°體驗等功能.欄目展示是將網站中的虛擬場景分門別類排列，方便使用者快速找到入口并進入.圖片輪播則是利用幻燈片自動播放原理，將全景圖在首頁呈現，一目了然的讓使用者知道實景具體情況.圖文介紹則是針對每個具體的虛擬場景均加以說明，幫助使用者進一步了解該場景的詳細情況.一鍵720°體驗是前臺呈現的核心內容，使用者可以利用鼠標拖拽將虛擬場景變化角度產生環繞感，同時也更加具有實景的沉浸感和代入感，仿佛身臨其境[2].

平臺后端主要提供欄目管理、內容編輯、內容發布以及系統參數配置功能.后端所有操作均由管理員統一執行.欄目管理模塊可根據實際平臺需求，對分類進行修改.內容編輯部分則是在分類菜單下對具體內容進行添加圖片、文字等進一步說明.內容發布則是將后臺編輯內容轉換格式后公布在網站上.系統參數配置則是對后臺維護提供一些基本參數，從而維護平臺安全.

1.2　核心技術應用情況

在平臺建設方面，為實現預設功能，在主體建設上采用PHP+MySQL形式.PHP是一種免費開源、服務器端、跨平臺、HTML嵌入式的腳本語言.PHP對不同的技術提供了編程環境與接口，可以方便開發各種功能完備、交互性強的動態頁面，為網站建設提供簡單實用的解決方案[3]，在此基礎上，利用MySQL實現對數據庫的高效管理.主體頁面布局上，采用DIV+CSS技術進行開發.DIV 是設計、開發網頁過程中的應用語言及標記元素，為文檔提供布局結構.CSS則能夠對頁面的顏色、布局與背景等進行有效控制，豐富頁面效果[4].將DIV與CSS合并過程中，可以有效提高網頁操作靈活性并使頁面簡潔明了，整齊劃一.通過主體建設以及布局優化兩步走，可以基本完成網站頁面制作，從而為使用者提供更加美好的視覺體驗.在后端管理方面，主要采用DedeCMS內容管理系統來進行操作.該系統具有穩定的框架結構，非常適用于PHP語言編輯的網頁管理，可以根據系統提供的基本操作形式實現對網站內容的增刪改以及其他個性化設置，可操作性極強[5].

該平臺中最為核心的環節是一鍵720°體驗模塊.該模塊功能實現采用三步走戰略，即圖像采集、圖片合成以及720°全景影像生成.圖像采集部分，使用全景相機并搭配魚眼鏡頭，對取景處進行720°全景拍照.拍照時需盡量注意圖片連續性，每個場景至少環繞拍攝6～8張圖片，以確保圖片合成的無縫連接[6].圖片合成主要采用PTGui Pro軟件，它能夠對多數圖像實現自動拼接，對于拍攝不規范以及無法定位的圖片可以手動添加控制點進行操作，從而將采集到的相同場景的一組圖片進行拼接修正使其成為連貫全景圖[7].720°全景影像生成則借助第三方在線生成平臺快睿全景制作而成.將完整的全景圖導入到系統后，根據實際情況對尺寸、色調、背景音樂等方面進行調整后便可按操作提示將其轉換成一項720°虛擬場景，該場景可實現以“人視角”自動巡游，也可以通過鼠標拖拽手工操作[8].此外，場景發布后支持生成html文件并可直接下載至本地，無需任何插件便可實現虛擬場景的生成與保存[9].通過利用后臺管理軟件對html文件進行上傳及適當設置后，使用者便可在前端瀏覽器中真正實現一鍵體驗720°的功能.

2　互聯網+720°全景影像展示平臺的實現

根據平臺預設，并利用相關技術實現場景制作及平臺搭建后，互聯網+720°全景影像展示平臺主頁如圖2所示.

圖2　平臺前端主頁示意圖

主頁面中設有圖片輪播，實景圖以輪播形式交替呈現.此外，主頁面也設有主菜單，主菜單下均設置有浮動式二級菜單，可對具體場景進行選擇.以烏拉公園為例，點擊主頁上烏拉公園菜單后，將呈現該菜單下具體內容的圖文介紹，其效果如圖3所示.

點擊下方詳情按鈕，可直接進入具體場景子頁面，并一鍵體驗720°全景功能.具體場景子頁面效果如圖4所示.

點擊一鍵體驗720°按鈕后便呈現自動巡游全景體驗場景，如圖5所示.此外，可通過場景內的方向指示按鈕或直接利用鼠標手動改變視角，從上下、左右、遠近等多個視角對720°場景的各個部分進行自定義細節查看.

圖5　自動巡游全景體驗效果示意圖

3　結　　論

720°全景影像的出現為虛擬場景建設及用戶體驗等方面帶來生機.將其與互聯網相關技術融合，打造互聯網+720°全景影像展示平臺，并將其與學生日常生活實際相結合，使其不僅成為情景展示以及場景體驗的新方法，同時也成為鍛煉及檢驗學生創新實踐能力的好途徑.圍繞“創意、創新、創業”的人才培養理念[10]，以平臺搭建為契機，鼓勵學生“起步校園，走入社會”，將互聯網+720°全景影像平臺的創意遷移至更多相關領域并進行創新研究，切實為提高學生的創新創業素質助力，真正幫助學生增進雙創研究深度，提升雙創實踐溫度，同時也為雙創理念在校內外的進一步實踐積累經驗.

參考文獻：

[1]陳飛.大眾創業萬眾創新背景下大學生“微創業”實證研究[J].吉林化工學院學報，2016(8)：92-98.

[2]黃代軍.中石化智能化管線系統720度全景影像制作[J].江漢石油職工大學學報，2016(7)：71-73.

[3]湯強，趙耀，王輝,等.基于PHP和MySQL的教育培訓整合平臺設計與實現[J].電腦知識與技術，2017(4)：62-63+75.

[4]王海榕.DIV+CSS技術在網頁布局中的應用[J].電子技術與軟件工程，2017(4)：14.

[5]劉娜.基于織夢DedeCMS建設企業門戶網站的分析[J].信息通信，2016(2)：76-78.

[6]朱賀，張軍，杜佃峰,等.全景攝影技術在建筑工程中的應用淺析[J].土木建筑工程信息技術，2017(8)：87-93.

[7]刁智剛，劉智濃，王寧寧,等.利用PTGui軟件制作全景圖[J].科技風，2016(7)：124-125.

[8]司占軍，張姣姣，耿浩.基于虛擬現實技術的圖書館全景漫游場景的設計與實現[J].電腦知識與技術，2017(11)：214-215.

[9]王晨，田依潔.基于HTML5的全景技術在氣象宣傳工作中的應用[J].新媒體研究，2017(9)：12-13+31.

[10] 蘇顯春，閆廣平.工科院校創新創業應用型人才培養模式研究與實踐[J].吉林化工學院學報，2017(8)：10-14.