郭明金 陳姝

? ? ? ? 摘 ? 要：設(shè)計了基于Web的3D模型瀏覽與交互系統(tǒng)，主要采用基于WebGL的第三方庫Three.js來實現(xiàn)。該系統(tǒng)的建立主要包括場景的構(gòu)建、場景的交互控制和模型的云存儲。模型是場景構(gòu)建的前提，用戶可從外部導(dǎo)入所需模型或利用系統(tǒng)自帶的簡單模型進(jìn)行模型的構(gòu)建。場景交互技術(shù)主要包括模型的平移、旋轉(zhuǎn)、縮放、拾取、剖切、3D動畫模型的播放以及信息的顯示等。模型的云存儲是指用戶可以通過登錄賬戶將3D模型存儲到服務(wù)器，日后需要時直接從服務(wù)器中加載即可。

關(guān)鍵詞：3D模型;WebGL技術(shù);Three.js庫;服務(wù)器

中圖分類號：TP311.5 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?文獻(xiàn)標(biāo)識碼：A

Research and Implementation of 3D Model Browsing

and Interaction System Based on Web

GUO Ming-jin？覮，CHEN Shu

（College of Information and Engineering，Xiangtan University，Xiangtan，Hunan 411105，China）

Abstract：3D model browsing and interaction system based on Web is designed，which mainly adopts the third-party library Three.js based on WebGL to realize. The establishment of the system mainly includes the construction of the scene，the interactive control of the scene and the cloud storage of the model. The model is the premise of the construction of the scene，users can import the required model from the outside or use the system's simple model to build the model. The interactive technologies of the scene mainly include the translation，rotation，zooming，picking up of the model，playing of the 3D animation model，and display of information and so on. The cloud storage of the model means that the user can store the 3D model on the server by logging into the account，and can directly load it from the server when needed.

Key Words： 3D model;WebGL technology;Three.js library;server

隨著計算機技術(shù)的不斷發(fā)展，計算機圖形學(xué)在建筑、科學(xué)、醫(yī)藥、商務(wù)和娛樂等各種領(lǐng)域的應(yīng)用越來越廣泛，目前已經(jīng)成為各個應(yīng)用領(lǐng)域中極其重要的技術(shù)，成為計算機視覺、圖像處理、多媒體技術(shù)、模式識別等各個學(xué)科的技術(shù)基礎(chǔ)。Web3D作為三維計算機圖形學(xué)與網(wǎng)絡(luò)技術(shù)的產(chǎn)物，其發(fā)展和應(yīng)用非常廣泛，它可以在網(wǎng)頁上創(chuàng)建一個服務(wù)器，使得用戶可以直接通過瀏覽器實現(xiàn)3D場景的實時渲染與互動[1]。

隨著3D技術(shù)的應(yīng)用領(lǐng)域逐漸增多[2]，普通用戶對其需求越來越強烈，為了滿足這些用戶的需求，必須要創(chuàng)建出一個適合大眾用戶且操作簡單、方便快捷的3D模型瀏覽與交互工具。然而，目前的Web3D技術(shù)卻存在一些問題。首先，這些技術(shù)都必須要安裝特定的插件，插件的安裝會影響網(wǎng)頁的跨平臺性及穩(wěn)定性，特別是限制了其在移動終端網(wǎng)頁中的應(yīng)用;其次，許多技術(shù)僅僅針對特定行業(yè)，其通用性不強，比如Unity3D只適合游戲網(wǎng)頁的開發(fā);再次，技術(shù)實現(xiàn)較為困難，開發(fā)成本高，并且制作效率低下。為了解決這些問題，本系統(tǒng)采用WebGL技術(shù)[3]，WebGL的優(yōu)勢是不用在瀏覽器上

安裝插件，就能被應(yīng)用到網(wǎng)頁中去以創(chuàng)建多種多樣的復(fù)雜3D模型，在硬件條件相同的情況下提高3D模型的渲染性能[4]和渲染效果。目前，國內(nèi)

Web3D相關(guān)產(chǎn)品比較稀缺，資源和資料也較稀少，所以，提出的基于Web的3D模型瀏覽與交互系統(tǒng)是虛擬現(xiàn)實技術(shù)亟待解決的重要技術(shù)問題之一，應(yīng)用前景非常好[5]。

1 ? 系統(tǒng)方案設(shè)計

1.1 ? 系統(tǒng)架構(gòu)

該系統(tǒng)采用B/S結(jié)構(gòu)，由三部分組成，分別是客戶端、服務(wù)器端和數(shù)據(jù)庫。服務(wù)器端采用Java編寫，對數(shù)據(jù)庫中各表進(jìn)行了封裝，從而使得數(shù)據(jù)的安全性得到了保障。不同客戶端如手機、電腦等通過Web瀏覽器導(dǎo)入或加載模型，服務(wù)器接收其請求，并將模型傳送到客戶端，客戶端的瀏覽器通過WebGL加速渲染模型[6]，形成三維場景。用戶可以在客戶端的場景中實現(xiàn)場景漫游和模型平移或縮放等操作。同時，客戶端可以向服務(wù)器發(fā)送請求，查看數(shù)據(jù)庫中存儲的模型。系統(tǒng)架構(gòu)圖如圖1所示。

1.2 ? 功能模塊

系統(tǒng)的功能模塊主要分為服務(wù)器端與客戶端，客戶端主要用于用戶與系統(tǒng)的交互，服務(wù)器端則主要負(fù)責(zé)存儲用戶上傳的模型，并能通過用戶的操作實時加載模型到場景中?？蛻舳税ū镜貙?dǎo)入、本地導(dǎo)出、模型操作、渲染、信息的存儲與顯示等功能模塊。服務(wù)器端主要包括用戶登錄、用戶登出、模型與場景的加載、上傳和刪除等功能模塊。其系統(tǒng)功能模塊圖如圖2所示：

1.3 ? 數(shù)據(jù)庫設(shè)計

為了使模型能夠云端存儲，實現(xiàn)模型的動態(tài)加載與上傳，用戶可登錄自己的賬號將模型數(shù)據(jù)存入MySQL數(shù)據(jù)庫中，從中加載上傳過的模型，通過數(shù)據(jù)庫的查詢和刪除等操作實現(xiàn)模型的加載與刪除等操作。

本系統(tǒng)所涉及的表主要有用戶表tb_user、平臺表tb_platform、模型總表tb_total_model、模型詳表tb_detail_model和狀態(tài)表tb_status，各個表之間的聯(lián)系如圖3所示。

2 ? 系統(tǒng)實現(xiàn)

2.1 ? 界面實現(xiàn)

主界面分為三個區(qū)域：場景渲染區(qū)域、菜單欄區(qū)域及信息欄區(qū)域，如圖4所示。場景渲染區(qū)域是系統(tǒng)界面最主要的區(qū)域，用來對3D場景進(jìn)行實時渲染;菜單欄區(qū)域為用戶與界面交互的區(qū)域，用于用戶的注冊登錄、模型的導(dǎo)入導(dǎo)出、編輯與操作等的控制，采用下拉列表的方式;信息欄區(qū)域包括場景信息顯示欄、模型基礎(chǔ)信息欄和模型材質(zhì)欄，用于指導(dǎo)用戶使用該系統(tǒng)及顯示系統(tǒng)的其他相關(guān)信息。

2.2 ? 主要功能實現(xiàn)

（1）本地導(dǎo)入

系統(tǒng)支持導(dǎo)入外部模型到場景中渲染，外部模型格式可選，包括wrl、obj、dae、stl、ply等國際通用格式，系統(tǒng)還支持解析3D動畫模型文件，可以支持dae格式和vrml格式的3D動畫模型的播放。

（2）本地導(dǎo)出

系統(tǒng)支持導(dǎo)出場景以及場景中的模型，支持導(dǎo)出js、stl和obj格式，可導(dǎo)出場景中的所有信息，包括燈光及其基本信息，模型及其基本信息與材質(zhì)信息，以及場景列表中的信息。

（3）模型加載

用戶在登錄狀態(tài)下，選擇加載后，客戶端向服務(wù)器發(fā)送模型ID，服務(wù)器根據(jù)模型ID查找相應(yīng)的模型信息，包括3D模型和其貼圖，將其返回給客戶端，加載到瀏覽器中。

（4）信息存儲與顯示功能

信息存儲與顯示功能主要用于模型基本信息的展示，用戶修改模型時模型信息會實時顯示在信息欄，同樣的，若用戶在信息欄修改模型信息，修改的信息也會實時渲染到場景中。信息欄的顯示功能主要包括場景對象名字列表、選中對象的基本信息、幾何信息和材質(zhì)信息。

3 ? 系統(tǒng)測試與分析

3.1 ? 實驗環(huán)境

系統(tǒng)的開發(fā)環(huán)境分為前端和后臺。前端開發(fā)工具采用WebStorm 8，頁面設(shè)計語言采用HTML5，頁面排版布局采用CSS樣式處理，盡可能的減少頁面刷新操作，前端語言采用JavaScript語言，并運用jQuery.js及Three.js框架進(jìn)行設(shè)計，后臺語言采用Java語言，數(shù)據(jù)庫采用sql語言，前端與后臺數(shù)據(jù)交互使用用ajax技術(shù)。

系統(tǒng)的運行環(huán)境為支持WebGL的瀏覽器，本系統(tǒng)PC端測試采用Windows 7操作系統(tǒng)上的Google Chrome 65瀏覽器，移動端測試環(huán)境使用Android的UC瀏覽器。

3.2 ? 實驗分析

（1）渲染比較

本系統(tǒng)是基于Web的3D模型瀏覽與交互系統(tǒng)，需要在瀏覽器中渲染出客戶端軟件的渲染效果。因此，對本系統(tǒng)導(dǎo)入模型后的渲染效果和3dsMax 2014、Cortona3D和BS Contact軟件的渲染效果進(jìn)行了比較，如圖5所示。

圖中四行四列展示了四個模型在四種系統(tǒng)中的渲染效果，其中，本系統(tǒng)為第一列，Cortona3D、BS Contact和3DMax則分別為第二列、第三列以及第四列。從圖中可以看出，本系統(tǒng)與三個軟件的渲染效果存在一定的差異，不過都達(dá)到了比較好的渲染效果，四者的渲染效果相差不大?？梢姳鞠到y(tǒng)達(dá)到了預(yù)期的渲染效果。

（2）性能測試

性能測試主要測試系統(tǒng)的3D場景渲染性能，幀率是檢測系統(tǒng)渲染性能的關(guān)鍵指標(biāo)之一。幀率就是在渲染場景時圖形處理器每秒鐘的刷新次數(shù)。幀率越高說明系統(tǒng)展示的動畫效果越流暢。通常每秒30幀及以上就能達(dá)到較好的實時渲染的效果，就能讓人覺得較逼真[7]。在本次測試中，測試了系統(tǒng)在承載三種不同大小的模型時在場景中渲染幀率，模型大小分別是5 M、10 M、25 M，每隔10秒記錄一次，結(jié)果如表1所示。

由表1中的數(shù)據(jù)可以看出，在不同的時刻，渲染幀率在不停的變化，但是都波動幅度不大?？傮w來說，系統(tǒng)承載25 M以內(nèi)的數(shù)據(jù)量時，渲染幀率都保持在每秒30幀以上，場景渲染效果較好，操作流暢，用戶體驗感較好。

4 ? 結(jié) ? 論

通過對基于Web的3D模型瀏覽與交互系統(tǒng)的研究，介紹了模型信息的導(dǎo)入與加載、導(dǎo)出與上傳以及3D場景交互和場景的實時渲染等方法。系統(tǒng)還支持解析3D動畫模型文件，可以支持dae格式和vrml格式的3D動畫模型的播放。在PC端或移動端的瀏覽器中將3D數(shù)據(jù)進(jìn)行實時渲染，并確保用戶在模型操作過程中的各個功能的正常使用，提高系統(tǒng)的交互性以及實用性。

參考文獻(xiàn)

[1] ? MIDORI T，TAKAHIKO H，SHOJI T. Color naming experiments using 2D and 3D rendered samples[J]. Color Res. Appl. 2015，40 （3）：270—280.

[2] ? ?KRALIK M，ZAKOVA K. Interactive WebGL model of hydraulic plant[J]. IFAC-Papers OnLine. 2015，48（29）：146—151.

[4] ? ?ANDERSSON S，GORANSSON J，ANDERSSON J G S. Virtual Texturing with WebGL[D].Chalmers University of Technology，2012.

[5] ? ?SAWICKI B，CHABER B. Efficient visualization of 3D models by web browser[J]. Computing. 2013，95（1）：661—673.

[6] ? ?夏金瑤. 基于WebGL的EAST可視化系統(tǒng)[D]. 合肥：中國科學(xué)技術(shù)大學(xué)，2017.

[7] ? ?楊潤斌，梁文章，陳姝. 基于WebGL的3D動畫實時播放系統(tǒng)[J]. 計算機系統(tǒng)應(yīng)用. 2015，24（11）：58—63.