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

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

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

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

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

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

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

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

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

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

1.2 Krpano可視化技術(shù)

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

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

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

2.1 全景產(chǎn)品的概念設(shè)計(jì)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4 結(jié) 語(yǔ)

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