基于Three.js 的虛擬模型3D 交互展示研究及實現

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

（佛山科學技術學院電子信息工程學院，廣東 佛山 528000）

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

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

1 虛擬模型3D 交互展示的實現基礎

1.1 基于WebGL 的Three.js 可視化技術

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

1.2 虛擬VR 人機交互技術

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

1.3 基于Pano2VR 的場景智能搭建技術

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

1.4 服務器部署技術

使用遠程終端連接遠程虛擬服務器，將項目工程文件生成可運行的jar 包或war 包等軟件包部署到服務器目標路徑環境上檢測運行。部署過程包括修改項目文件夾訪問權限、設置服務器分配端口和配置代碼運行環境等。

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

本文研究基于Three.js 構建的虛擬模型3D 交互展示平臺系統具有高性能、人機交互性強和體驗模式豐富等特點[7]。以“多層次、多定點和多功能”為核心設計虛擬模型3D 交互展示架構，研究應用架構主要包括軟硬件基礎層、數據與結構層、驅動引擎層和應用展示層4 大層。本團隊研究設計虛擬模型3D 交互展示架構如圖1 所示。

軟硬件基礎層由后臺服務器、項目應用軟件和硬件設備等組成。使用項目應用軟件設計工程文件并且打包，經諸多硬件設備分析與調試，再將其部署到后臺服務器中，最后可通過瀏覽器進入到預設計的IP 地址進行虛擬模型三維展示體驗。數據與結構層則用來存儲數據與算法結構[8]。存儲數據包括三維虛擬模型相關數據、環境切片和自定義熱點數據結構等。驅動引擎層則以各類js 腳本為核心進行引擎驅動，該層設計文件包含自定義3DMOD.js、圖形開發腳本WebGL.js 和全景圖創建腳本pano2vr_player.js 等腳本文件[9]，其中3DMOD.js 為本文所研究虛擬模型3D 交互展示技術的核心。

3 虛擬模型3D 交互展示實現

3.1 虛擬模型建模

團隊主要使用3D Max 和Blender 等建模軟件設計虛擬三維模型。即在虛擬數字空間中使用結合幾何、掃描、基于圖像等虛擬現實技術，模擬真實世界中的事物構建3D 模型[10]，同時實現三維定位、方向追蹤等傳感技術的動態虛擬現實效果。建模初始與完成界面分別如圖2、圖3 所示。

圖2 建模初始界面

圖3 建模完成界面

3.2 實景VR 場景搭建

本文應用Pano2VR 全景圖像轉換軟件進行實景VR 場景搭建，Pano2VR 可將二維影像轉換為三維實景交互全景圖[11]，通過導入圖片、添加媒體、設計皮膚和接入交互熱點等操作后可生成VR 全景漫游項目工程文件，再將文件打包部署至虛擬服務器中，即可成功搭建實景VR 平臺[12]。設計的實景VR 場景搭建邏輯圖如圖4 所示。

圖4 實景VR 場景搭建邏輯圖

3.3 設計3D 模型接入熱點

當根據已設計好的虛擬模型3D 交互展示研究架構設計好3DMOD.js 腳本文件后，需要以熱點為媒介將其接入實景VR 場景中。3D 模型熱點接入具體步驟如下。

3.3.1 熱點位置部署

進入Pano2VR 首頁，點擊交互熱點設計框中的“修改”按鈕，進入交互熱點設置界面，找到目標位置再雙擊即可部署成功。

3.3.2 自定義熱點形式

熱點內容呈現多樣性，如圖片、音樂、網頁和相對路徑文件等，選擇在交互熱點的URL 處輸入3D虛擬模型展示網頁的相對跳轉路徑，即可完成熱點基礎部署。

3.3.3 設計熱點皮膚

交互熱點類型分為點型和多邊形型。根據需求選擇類型并繪制交互熱區，然后通過皮膚ID 替換默認皮膚樣式，即可設計貼合現實環境的熱點皮膚。

3.3.4 設置跳轉樣式

點擊交互熱點設計框中的“修改”按鈕，再點擊已設計熱點，找到“目標”按鈕即可選擇場景跳轉樣式（有blank、parent、self 和top 4 種類型），點擊確認即可完成跳轉樣式設置。

3.3.5 激活熱點進行內容展示

熱點部署完成后即可選擇輸出HTML5 格式文件，點擊增加并確認輸出，項目工程文件生成后等待熱點激活，即可跳轉頁面進行內容展示。

3.4 實現虛擬模型人機交互3D 展示

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

圖5 實景VR 漫游環境圖

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

4 結束語

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