基于Three.js 的全景漫游產(chǎn)品設計與實現(xiàn)

權(quán)西瑞，王 凱，王小飛，呂 佩

（1. 自然資源部陜西基礎地理信息中心，陜西 西安 710054）

全景地圖是一種全新的地理信息表現(xiàn)方式，通過虛擬現(xiàn)實技術(shù)將全景影像構(gòu)建成真實三維場景，以其靈活的交互方式實現(xiàn)第一視角地圖瀏覽體驗，能精確地展示實際的地理場所，幫助用戶更真實地掌握環(huán)境信息[1]。由于全景地圖對真實場景的圖像渲染效果逼真，用戶交互手段豐富，已被廣泛應用于旅游景區(qū)、虛擬校園、智慧城市和房地產(chǎn)管理等領(lǐng)域[2]。目前，將WebGL技術(shù)應用于全景數(shù)據(jù)可視化領(lǐng)域的研究逐漸成為熱點，如陳秀萬[3]等分析了基于WebGL搭建三維地理信息場景的基本方法，研究了全景地圖數(shù)據(jù)獲取與處理方法，提出了采用開源WebGL框架構(gòu)建小型漫游場景的實現(xiàn)流程；韓昕熠[4]等針對全景地圖數(shù)據(jù)和實景模型融合過程中存在的問題，提出了基于Cesium三維平臺構(gòu)建實景導覽系統(tǒng)的實現(xiàn)方法；任宏康[5]等研究了第三方WebGL 類庫引擎，提出了將瓦片和DEM 數(shù)據(jù)應用于構(gòu)建三維地形的方法；陳林[6]研究了Three.js引擎的跨平臺技術(shù)，提出了將該技術(shù)應用于管線三維可視化建模過程的實現(xiàn)方法；羅雅丹[7]等研究了利用WebGL技術(shù)渲染全景云臺相機拍攝的全景照片的方法，并構(gòu)建了景區(qū)的全景漫游系統(tǒng)。

本文通過對全景可視化關(guān)鍵技術(shù)的深入分析，研究了全景數(shù)據(jù)組織方法、全景服務發(fā)布技術(shù)和展示技術(shù)，設計了全景產(chǎn)品的概念模型、系統(tǒng)架構(gòu)和功能模塊，并基于Three.js 技術(shù)開發(fā)了全景漫游產(chǎn)品，分析了該產(chǎn)品的可行性和實用性。

1 全景可視化技術(shù)研究

全景可視化技術(shù)是利用圖像合成與渲染技術(shù)，基于一定的規(guī)則展示特定三維場景的技術(shù)。通過對全景相機采集的圖像進行整合拼接處理，形成全景照片；再通過相應的可視化引擎渲染為三維場景。全景漫游產(chǎn)品開發(fā)過程中涉及的技術(shù)包括全景圖像獲取技術(shù)、圖像拼接技術(shù)、場景渲染技術(shù)和場景編輯技術(shù)等。常用的第三方可視化引擎技術(shù)包括Three.js、Krpano等。

1.1 Three.js可視化技術(shù)

Three.js 是一個輕量級的WebGL 開源框架，用于在瀏覽器中渲染三維場景和模型數(shù)據(jù)，包含一組基于Javascript語言編寫的第三方庫，提供了原生態(tài)WebGL的API接口；同時封裝了投影、矩陣和矢量運算等常用的數(shù)據(jù)計算庫，支持制作動畫、游戲、模型與粒子特效等，具備相機、光源、網(wǎng)格、材質(zhì)、光源、紋理等三維場景渲染對象。Three.js渲染引擎支持多種三維模型文件格式，可直接加載obj、fbx 等多種格式的模型數(shù)據(jù)，同時支持加載特定JSON 格式的三維模型數(shù)據(jù)。Three.js可視化技術(shù)的實現(xiàn)流程如圖1所示。

圖1 Three.js可視化技術(shù)的實現(xiàn)流程圖

1.2 Krpano可視化技術(shù)

Krpano是一個圖像展示與交互引擎，提供了圖像渲染技術(shù)，支持運行在PC 端、移動端和平板電腦端的Flash 應用程序；在全景圖像渲染方面，支持多種圖像格式，包括六面體模型、球面模型和圓柱模型等全景格式。Krpano是對基于Flash語法的動態(tài)腳本Ac?tion Script的二次開發(fā)，提供了API接口和面向不同應用場景的插件，支持開發(fā)各種全景應用產(chǎn)品。在全景系統(tǒng)中，利用xml 格式的數(shù)據(jù)結(jié)構(gòu)配置文件存儲全景視圖、圖像、場景熱點、圖層、熱點跳轉(zhuǎn)等信息，實現(xiàn)全景場景渲染與瀏覽操作。

隨著全景技術(shù)的快速發(fā)展和輕量化WebGL 技術(shù)的不斷成熟，基于插件式的全景地圖瀏覽方式的弊端愈發(fā)凸顯，市面上的主流瀏覽器逐漸開始不支持插件，基于Flash 插件的Krpano 全景渲染技術(shù)無法滿足不同用戶跨平臺瀏覽的需求。由于Three.js 具備無需插件支持、跨平臺瀏覽器展示、靈活的三維交互體驗等優(yōu)點，本文利用Three.js 設計并開發(fā)全景漫游產(chǎn)品。

2 全景漫游產(chǎn)品架構(gòu)設計

2.1 全景產(chǎn)品的概念設計

全景產(chǎn)品通過全景技術(shù)引擎驅(qū)動全景數(shù)據(jù)在不同終端的瀏覽器中進行渲染。從數(shù)據(jù)源來看，全景數(shù)據(jù)包括全景切片數(shù)據(jù)和全景業(yè)務數(shù)據(jù)，全景切片數(shù)據(jù)是采用LOD 分級模式存儲的每個拍攝站點的全景影像，用于全景渲染引擎的展示；全景業(yè)務數(shù)據(jù)是實現(xiàn)全景場景組織的關(guān)鍵，采用“對象—場景組—場景”的模式進行組織和管理，其中對象是需要建模的主體，場景組是一系列場景的集合，可以是對象的某層或某個分區(qū)，場景是最小的組織單元，對應于一個全景點位。全景數(shù)據(jù)的概念模型如圖2所示。

圖2 全景產(chǎn)品的概念模型

2.2 全景產(chǎn)品的系統(tǒng)架構(gòu)

全景產(chǎn)品基于C/S和B/S雙重模式體系，采用多層架構(gòu)進行構(gòu)建，主要包括軟硬件支撐層、數(shù)據(jù)層、引擎層和應用層，如圖3所示。

圖3 全景產(chǎn)品總體架構(gòu)

軟硬件支撐層由硬件、操作系統(tǒng)、數(shù)據(jù)庫等構(gòu)成。根據(jù)數(shù)據(jù)特點，數(shù)據(jù)庫采用混合存儲架構(gòu)，全景切片數(shù)據(jù)采用MongoDB數(shù)據(jù)庫存儲，全景業(yè)務數(shù)據(jù)采用MySQL數(shù)據(jù)庫存儲。數(shù)據(jù)層包括全景產(chǎn)品相關(guān)的各類數(shù)據(jù)，如全景切片數(shù)據(jù)、熱點數(shù)據(jù)、導覽圖數(shù)據(jù)、專題數(shù)據(jù)和路徑漫游數(shù)據(jù)等。引擎層由全景可視化引擎Three.js、前端框架Vue.js、服務端框架Spring Boot、前端開發(fā)語言Javascript 和服務端開發(fā)語言Java等構(gòu)成，是系統(tǒng)框架功能實現(xiàn)的基礎。根據(jù)全景產(chǎn)品功能需要，應用層面向用戶提供了全景產(chǎn)品數(shù)據(jù)生產(chǎn)和展示功能，實現(xiàn)了全景數(shù)據(jù)處理、數(shù)據(jù)生產(chǎn)、數(shù)據(jù)展示、應用管理。

2.3 全景產(chǎn)品的功能模塊

全景產(chǎn)品包括全景數(shù)據(jù)處理、全景數(shù)據(jù)生產(chǎn)、全景應用管理、全景數(shù)據(jù)展示等子系統(tǒng)，功能模塊設計如圖4所示。

圖4 全景產(chǎn)品功能結(jié)構(gòu)

全景數(shù)據(jù)處理子系統(tǒng)包括全景模糊處理、全景切片管理和全景離線版導出等模塊，其中全景模糊處理模塊包括人臉輔助識別、全景模糊、模糊還原等功能；全景切片管理模塊包括全景切片、追加切片、更新切片和刪除切片等功能；全景離線版導出模塊負責將數(shù)據(jù)庫中的數(shù)據(jù)導出為本地文件，滿足離線應用需求。

全景數(shù)據(jù)生產(chǎn)子系統(tǒng)包括全景熱點數(shù)據(jù)生產(chǎn)、全景導覽圖數(shù)據(jù)生產(chǎn)、全景專題數(shù)據(jù)生產(chǎn)、導覽圖熱點數(shù)據(jù)生產(chǎn)和漫游路徑數(shù)據(jù)生產(chǎn)等模塊，用于建立全景照片之間的關(guān)聯(lián)關(guān)系和跳轉(zhuǎn)邏輯；實現(xiàn)了全景數(shù)據(jù)目錄組織、資源管理、場景編輯等功能；針對專題數(shù)據(jù)瀏覽和自動漫游需求，提供了專題數(shù)據(jù)采集和漫游路徑生產(chǎn)功能。

全景應用管理子系統(tǒng)包括全景應用發(fā)布和全景應用管理模塊，其中全景應用發(fā)布模塊通過設置全景應用系統(tǒng)的數(shù)據(jù)源，將標準的應用程序發(fā)布至Web服務器上，包括應用名稱設置、數(shù)據(jù)源設置、發(fā)布類別設置、應用縮略圖設置和應用發(fā)布等功能；全景應用管理模塊包括應用列表展示，應用啟動、停止和移除等應用管理功能。

全景數(shù)據(jù)展示子系統(tǒng)包括全景展示、全景熱點數(shù)據(jù)展示、全景導覽圖數(shù)據(jù)展示、全景導覽圖熱點數(shù)據(jù)展示、專題數(shù)據(jù)展示和路徑漫游等模塊，其中全景展示模塊包括場景展示、場景熱點展示和場景目錄樹展示等，提供了場景縮放、旋轉(zhuǎn)和通過目錄樹進入不同場景等功能；全景導覽圖熱點數(shù)據(jù)展示模塊包括導覽圖、導覽熱點和場景縮略圖等，提供了通過導覽圖和場景組縮略圖進入場景等功能；專題數(shù)據(jù)展示模塊包括圖層控制和專題數(shù)據(jù)顯示功能，可通過專題圖標定位場景并查看專題設施；路徑漫游模塊包括漫游路徑列表展示和路徑漫游功能，可根據(jù)漫游路徑進行全景場景漫游瀏覽。

3 基于Three.js的全景漫游產(chǎn)品實現(xiàn)

全景產(chǎn)品利用Three.js、Vue.js和Spring Boot進行構(gòu)建，實現(xiàn)了場景瀏覽、場景組展示和路徑漫游等功能。場景瀏覽功能實現(xiàn)了場景目錄樹和場景熱點的展示，支持根據(jù)熱點和目錄跳轉(zhuǎn)至場景進行瀏覽，場景展示過程中支持場景放大、縮小、旋轉(zhuǎn)等。場景組展示功能實現(xiàn)了場景縮略圖、導覽圖和導覽熱點的展示，通過導覽圖可直觀展示場景的平面分布圖和導覽熱點，支持在導覽圖中點擊熱點進入場景，通過場景縮略圖可直觀展示場景的圖像信息，支持點擊場景縮略圖進入場景。路徑漫游功能可根據(jù)預先設計的漫游路徑進行場景漫游瀏覽，并支持在導覽圖中展示漫游位置。

4 結(jié) 語

本文通過對全景可視化技術(shù)進行研究，設計了全景漫游產(chǎn)品的概念模型、系統(tǒng)框架和功能結(jié)構(gòu)，并基于Three.js 技術(shù)開發(fā)了全景漫游產(chǎn)品，實現(xiàn)了全景數(shù)據(jù)處理、全景數(shù)據(jù)生產(chǎn)、全景應用管理、全景數(shù)據(jù)展示等模塊。相較于傳統(tǒng)全景地圖產(chǎn)品，該產(chǎn)品具有一定的實用性和先進性，對于后續(xù)的全景可視化技術(shù)發(fā)展與應用具有一定的參考價值。