基于Three.js 的虛擬模型3D 交互展示研究及實(shí)現(xiàn)

蘇龍生，鄧斯堯，周佳瑩，古天馳，顧樹爍，黃志明，李曉東

（佛山科學(xué)技術(shù)學(xué)院電子信息工程學(xué)院，廣東 佛山 528000）

3D 虛擬模型的應(yīng)用能使部分空間信息進(jìn)行更加直觀的展示，而基于WebGL 的3D 技術(shù)Three.js 是目前最流行的3D 技術(shù)開發(fā)框架，所以WebGL 的迅猛發(fā)展為虛擬模型3D 展示的實(shí)現(xiàn)提供了一種高效且輕便的方法[1]。本文研究制作的平臺(tái)在允許網(wǎng)頁不安裝任何插件的條件下，也可實(shí)現(xiàn)3D 虛擬模型的全方位三維立體展示，做到讓用戶只需通過操作鼠標(biāo)，即可靈活地控制三維模型進(jìn)行720°無死角展示[2]。

本文通過VR 全景相機(jī)搭配Pano2VR 軟件搭建了實(shí)景VR 場景，使用3D Max 和Blender 等建模軟件設(shè)計(jì)虛擬三維模型。同時(shí)本文研究技術(shù)可將虛擬模型加載到由Three.js、pano2vr_player.js、3DMOD.js 和index.html等文件共同構(gòu)建的實(shí)景VR 環(huán)境中，實(shí)現(xiàn)實(shí)景VR 環(huán)境里的虛擬模型3D 交互展示，在更全面地增強(qiáng)人機(jī)交互功能的同時(shí)也為用戶提供了更好的沉浸式VR 體驗(yàn)。

1 虛擬模型3D 交互展示的實(shí)現(xiàn)基礎(chǔ)

1.1 基于WebGL 的Three.js 可視化技術(shù)

Three.js 是用JavaScript 編寫輕量可視化庫，通過對(duì)WebGL 的接口進(jìn)行封裝從而簡化了WebGL 的使用操作。同時(shí)Three.js 提供了可直接訪問的JavaScript API，實(shí)現(xiàn)了在不安裝第三方插件的情況下加速且高效渲染3D 場景[3]，允許用戶在不熟練掌握較多數(shù)學(xué)知識(shí)和繪圖技術(shù)的前提下也能在Web 網(wǎng)頁上輕松搭建三維展示場景。

1.2 虛擬VR 人機(jī)交互技術(shù)

在虛擬現(xiàn)實(shí)人機(jī)交互系統(tǒng)中，通過VR 場景智能重建技術(shù)實(shí)現(xiàn)真實(shí)場景疊加從而構(gòu)建虛擬三維空間，用戶可通過佩戴頭戴顯示器和人體姿勢傳感器等裝備接入虛擬VR 場景[4]。在虛擬VR 場景中用戶可進(jìn)行諸多操作，實(shí)時(shí)獲得視覺、聽覺和觸覺等感官模擬反饋，完成具有多感知性、高真實(shí)性的沉浸式人機(jī)信息交換[5]。

1.3 基于Pano2VR 的場景智能搭建技術(shù)

Pano2VR 可導(dǎo)入多種格式圖像，通過拼接進(jìn)行處理生成SWF 格式的全景圖搭建全景漫游交互場景，不用對(duì)三維場景進(jìn)行實(shí)時(shí)渲染的同時(shí)極大彌補(bǔ)二維場景的渲染不足，降低全景漫游場景的制作復(fù)雜度。同時(shí)該技術(shù)擁有熱點(diǎn)、皮膚、媒體和補(bǔ)丁等輸入格式和HTML5、QuickTime、Flash 輸出格式。場景搭建成功后用戶不僅可以通過鼠標(biāo)實(shí)現(xiàn)對(duì)VR 場景的漫游，也可以通過按鈕切換成自動(dòng)相機(jī)視角進(jìn)行漫游[6]，全面提升了VR 漫游效果。

1.4 服務(wù)器部署技術(shù)

使用遠(yuǎn)程終端連接遠(yuǎn)程虛擬服務(wù)器，將項(xiàng)目工程文件生成可運(yùn)行的jar 包或war 包等軟件包部署到服務(wù)器目標(biāo)路徑環(huán)境上檢測運(yùn)行。部署過程包括修改項(xiàng)目文件夾訪問權(quán)限、設(shè)置服務(wù)器分配端口和配置代碼運(yùn)行環(huán)境等。

2 基于Three.js 的虛擬模型3D 交互展示研究架構(gòu)

本文研究基于Three.js 構(gòu)建的虛擬模型3D 交互展示平臺(tái)系統(tǒng)具有高性能、人機(jī)交互性強(qiáng)和體驗(yàn)?zāi)Ｊ截S富等特點(diǎn)[7]。以“多層次、多定點(diǎn)和多功能”為核心設(shè)計(jì)虛擬模型3D 交互展示架構(gòu)，研究應(yīng)用架構(gòu)主要包括軟硬件基礎(chǔ)層、數(shù)據(jù)與結(jié)構(gòu)層、驅(qū)動(dòng)引擎層和應(yīng)用展示層4 大層。本團(tuán)隊(duì)研究設(shè)計(jì)虛擬模型3D 交互展示架構(gòu)如圖1 所示。

軟硬件基礎(chǔ)層由后臺(tái)服務(wù)器、項(xiàng)目應(yīng)用軟件和硬件設(shè)備等組成。使用項(xiàng)目應(yīng)用軟件設(shè)計(jì)工程文件并且打包，經(jīng)諸多硬件設(shè)備分析與調(diào)試，再將其部署到后臺(tái)服務(wù)器中，最后可通過瀏覽器進(jìn)入到預(yù)設(shè)計(jì)的IP 地址進(jìn)行虛擬模型三維展示體驗(yàn)。數(shù)據(jù)與結(jié)構(gòu)層則用來存儲(chǔ)數(shù)據(jù)與算法結(jié)構(gòu)[8]。存儲(chǔ)數(shù)據(jù)包括三維虛擬模型相關(guān)數(shù)據(jù)、環(huán)境切片和自定義熱點(diǎn)數(shù)據(jù)結(jié)構(gòu)等。驅(qū)動(dòng)引擎層則以各類js 腳本為核心進(jìn)行引擎驅(qū)動(dòng)，該層設(shè)計(jì)文件包含自定義3DMOD.js、圖形開發(fā)腳本W(wǎng)ebGL.js 和全景圖創(chuàng)建腳本pano2vr_player.js 等腳本文件[9]，其中3DMOD.js 為本文所研究虛擬模型3D 交互展示技術(shù)的核心。

3 虛擬模型3D 交互展示實(shí)現(xiàn)

3.1 虛擬模型建模

團(tuán)隊(duì)主要使用3D Max 和Blender 等建模軟件設(shè)計(jì)虛擬三維模型。即在虛擬數(shù)字空間中使用結(jié)合幾何、掃描、基于圖像等虛擬現(xiàn)實(shí)技術(shù)，模擬真實(shí)世界中的事物構(gòu)建3D 模型[10]，同時(shí)實(shí)現(xiàn)三維定位、方向追蹤等傳感技術(shù)的動(dòng)態(tài)虛擬現(xiàn)實(shí)效果。建模初始與完成界面分別如圖2、圖3 所示。

圖2 建模初始界面

圖3 建模完成界面

3.2 實(shí)景VR 場景搭建

本文應(yīng)用Pano2VR 全景圖像轉(zhuǎn)換軟件進(jìn)行實(shí)景VR 場景搭建，Pano2VR 可將二維影像轉(zhuǎn)換為三維實(shí)景交互全景圖[11]，通過導(dǎo)入圖片、添加媒體、設(shè)計(jì)皮膚和接入交互熱點(diǎn)等操作后可生成VR 全景漫游項(xiàng)目工程文件，再將文件打包部署至虛擬服務(wù)器中，即可成功搭建實(shí)景VR 平臺(tái)[12]。設(shè)計(jì)的實(shí)景VR 場景搭建邏輯圖如圖4 所示。

圖4 實(shí)景VR 場景搭建邏輯圖

3.3 設(shè)計(jì)3D 模型接入熱點(diǎn)

當(dāng)根據(jù)已設(shè)計(jì)好的虛擬模型3D 交互展示研究架構(gòu)設(shè)計(jì)好3DMOD.js 腳本文件后，需要以熱點(diǎn)為媒介將其接入實(shí)景VR 場景中。3D 模型熱點(diǎn)接入具體步驟如下。

3.3.1 熱點(diǎn)位置部署

進(jìn)入Pano2VR 首頁，點(diǎn)擊交互熱點(diǎn)設(shè)計(jì)框中的“修改”按鈕，進(jìn)入交互熱點(diǎn)設(shè)置界面，找到目標(biāo)位置再雙擊即可部署成功。

3.3.2 自定義熱點(diǎn)形式

熱點(diǎn)內(nèi)容呈現(xiàn)多樣性，如圖片、音樂、網(wǎng)頁和相對(duì)路徑文件等，選擇在交互熱點(diǎn)的URL 處輸入3D虛擬模型展示網(wǎng)頁的相對(duì)跳轉(zhuǎn)路徑，即可完成熱點(diǎn)基礎(chǔ)部署。

3.3.3 設(shè)計(jì)熱點(diǎn)皮膚

交互熱點(diǎn)類型分為點(diǎn)型和多邊形型。根據(jù)需求選擇類型并繪制交互熱區(qū)，然后通過皮膚ID 替換默認(rèn)皮膚樣式，即可設(shè)計(jì)貼合現(xiàn)實(shí)環(huán)境的熱點(diǎn)皮膚。

3.3.4 設(shè)置跳轉(zhuǎn)樣式

點(diǎn)擊交互熱點(diǎn)設(shè)計(jì)框中的“修改”按鈕，再點(diǎn)擊已設(shè)計(jì)熱點(diǎn)，找到“目標(biāo)”按鈕即可選擇場景跳轉(zhuǎn)樣式（有blank、parent、self 和top 4 種類型），點(diǎn)擊確認(rèn)即可完成跳轉(zhuǎn)樣式設(shè)置。

3.3.5 激活熱點(diǎn)進(jìn)行內(nèi)容展示

熱點(diǎn)部署完成后即可選擇輸出HTML5 格式文件，點(diǎn)擊增加并確認(rèn)輸出，項(xiàng)目工程文件生成后等待熱點(diǎn)激活，即可跳轉(zhuǎn)頁面進(jìn)行內(nèi)容展示。

3.4 實(shí)現(xiàn)虛擬模型人機(jī)交互3D 展示

將已設(shè)計(jì)生成好的工程項(xiàng)目文件部署至服務(wù)器中后，用戶即可通過瀏覽器進(jìn)入到實(shí)景VR 漫游環(huán)境和虛擬模型人機(jī)交互3D 展示網(wǎng)頁。用戶可操作鼠標(biāo)實(shí)現(xiàn)人機(jī)交互三維模型展示，如滑動(dòng)鼠標(biāo)滾動(dòng)輪可對(duì)虛擬模型進(jìn)行放縮操作（通過放大操作也可實(shí)現(xiàn)以第一視角穿越障礙物進(jìn)行“穿模”深度漫游），長按鼠標(biāo)左鍵移動(dòng)實(shí)現(xiàn)以三維模型中心點(diǎn)為基點(diǎn)進(jìn)行720°翻轉(zhuǎn)展示，長按鼠標(biāo)右鍵移動(dòng)實(shí)現(xiàn)以三維模型整體為基點(diǎn)進(jìn)行前后左右平移操作。實(shí)景VR 漫游環(huán)境與虛擬模型3D 交互展示圖分別如圖5、圖6 所示。

圖5 實(shí)景VR 漫游環(huán)境圖

圖6 虛擬模型3D 交互展示圖

4 結(jié)束語

本文研究基于Three.js 的虛擬模型3D 交互展示實(shí)現(xiàn)方法，并成功將其接入到實(shí)景VR 環(huán)境中，更大程度地滿足了用戶的三維環(huán)境深度漫游需求。研究3D引擎Three.js 豐富的API 接口成功構(gòu)建了存在于虛擬數(shù)字空間的3D 虛擬可視化模型，同時(shí)成功搭建基于Pano2VR 的實(shí)景VR 環(huán)境，并成功將二者結(jié)合成功打造了一個(gè)實(shí)景VR 漫游環(huán)境中的虛擬模型3D 交互展示平臺(tái)。該平臺(tái)不僅全方位展示了實(shí)景的多維度立體影像，還更清晰地展示了存在于現(xiàn)實(shí)世界的實(shí)體事物的三維空間信息。本文研究的基于Three.js 的虛擬模型3D 交互展示技術(shù)攜帶的豐富3D 交互性能，在極大程度上增強(qiáng)了VR 的漫游沉浸感，為用戶帶來了嶄新的沉浸式虛擬模型3D 人機(jī)交互感官體驗(yàn)。