基于Web3D的三維模型頂點編輯方法

喬 磊

(上海工程技術大學 電子電氣工程學院， 上海 201620)

0 引 言

三維模型具有真實、直觀、全面等優點，可以提供更生動的視覺體驗[1]。隨著計算機技術的發展，三維模型已被廣泛應用于工業制造、醫療、教育、商業娛樂等諸多領域[2]。三維模型的獲取途徑中，通過三維建模軟件創作和生成模型仍然是最主要的方式。例如3D游戲人物或影視CG角色等都來源于此；即使是來自三維掃描或三維重建的數據，在實際應用中也可能需要通過建模軟件進行修復或處理[3]。目前，常用的三維建模軟件有3Dmax、ZBrush、 Blender等，針對不同應用領域或行業需求，不同軟件在功能、操作細節等方面都各有針對性與獨特優勢。但出于功能全面性考慮，此類軟件通常都需要通過數據體量較大的安裝程序進行安裝。

在實際生活中，有時候僅需對三維模型進行工作量較小的局部修改操作，在大體量的建模軟件中修改對設備和地點等都存在一定限制，某些情況下不能隨時隨地反饋和跟進。而通過Web端應用在線完成，可以不限制環境或設備，甚至通過移動設備就可以快速做出處理。同時，隨著Web技術的快速演進，Web應用跨平臺低成本的優點使得桌面應用轉向Web應用成為一種新的發展方向，硬件設備的發展也保證了Web應用有足夠的計算和處理能力。隨著WebGL標準的制定與開發，諸多Web3D應用得以落地[4]。面向Web環境的三維可視化及三維交互功能的實現變得更為容易，也使得Web端三維模型頂點編輯成為可能[5]。在Web環境中進行三維模型編輯已經存在一些案例，但這些案例中的編輯只限于操作模型整體的位移、旋轉、縮放，而模型編輯的核心功能，即對頂點的編輯并未得到實現[6]。因此，本文提出一種Web環境下的三維模型編輯方法，可以快速完成輕量級的三維模型處理。

Three.js框架庫是對WebGL的API的進一步封裝，本文以此為基礎，實現Web環境下的三維模型頂點編輯。首先，在分析三維數據結構的基礎上，通過頂點可視化與頂點交互驅動幾何體更新實現了三維模型頂點編輯，基于此對編輯記錄及撤銷方法進行了說明；其次，對多種三維格式數據的導入與導出方法進行了說明，以支持對外部三維模型的修改。通過在不同格式的三維模型數據中進行頂點編輯，驗證了Web端模型編輯的可行性。

1 技術背景

1.1 三維模型的網格表示

多邊形網格表示是三維模型最常用的表示方法，該方法通過一系列多邊形的集合對物體表面進行描述，由多邊形圍成的區域來定義模型的外形和位置[7]。三角形網格由于結構簡單、易操作、易處理等優點，成為應用最廣泛的網格形式。三角網格的表示由頂點集合V和三角面集合T組成。如圖1所示，在一個三維模型中，各頂點的空間坐標v構成了集合V，各三角面的拓撲信息f構成了集合T，集合V和T共同構成了該模型的三角網格表示。

圖1 模型的三角網格表示

Web3D場景中的網格都屬于三角網格。頂點編輯是在網格上進行的，其本質是對網格頂點的空間坐標的修改。

1.2 Web3D網格數據結構

在Three.js中，網格(mesh)是由幾何體(geometry)與材質(material)等屬性構成的。其中，材質決定網格表面的視覺效果，幾何體決定網格的形狀。幾何體的主要屬性見表1。頂點編輯的本質就是修改幾何體中的頂點信息。

表1 幾何體屬性

2 關鍵技術與實現方法

2.1 頂點編輯

網格頂點編輯的目的是該改變網格的形狀，其本質是對網格頂點的空間坐標進行修改，需要將這一過程轉化為可視化的交互事件。因此，將頂點編輯的實現分為兩個部分，一是通過解析幾何信息創建可視化的頂點對象；二是將頂點對象交互事件轉換為模型的形體更新。

2.1.1 頂點對象的創建

頂點對象是對頂點的可視化，同時也是用戶交互的載體，應該具有以下特性：

(1)與網格頂點一一對應；

(2)支持獨立交互。

依據Web3D中網格的數據結構，頂點坐標集合數組中每3個相鄰元素表示一個頂點，因此，可通過遍歷該數組生成頂點對象。

頂點對象的視圖可基于Web3D中的網格(mesh)或精靈圖(sprite)實現，網格和精靈圖在變換控制器(TransformControls)下的交互視圖如圖2所示。由于精靈圖屬于二維表示，其性能消耗低于三維網格，因此將頂點對象渲染為精靈圖。

(a) 網格 (b) 精靈圖

根據頂點坐標數組創建頂點交互對象的步驟：

Step1定義變量target= 0，以指示當前頂點信息在數組中的位置，同時初始化頂點對象列表；

Step2訪問頂點坐標集合數組，自下標target×3始，依序獲取3個元素x、y、z，構建三維空間坐標pos(x,y,z)；

Step3創建精靈圖對象添加至3D場景，設置其空間位置為pos，將該對象加入頂點對象列表；

Step4將變量target加1，判斷頂點數量是否大于target，若條件成立，則跳轉至Step 2，否則創建結束。

2.1.2 頂點交互驅動的模型更新

創建頂點對象后，為其添加移動事件，并將移動引起的位置變化轉換為對應頂點的空間坐標變化，以驅動模型形狀的更新。在Web3D場景中，通過變換控制器可以對三維物體進行移動，切換變換控制器的操作對象，即可達到控制不同頂點的目的，結合射線拾取方法，實現鼠標選擇目標頂點和頂點移動更新模型的可視化頂點編輯。

射線拾取的原理如圖3所示，從觀察點P0位置向鼠標位置P1生成一條射線，射線與場景中的物體交于點P3。射線穿過的所有三維物體將被保存在數組中。

圖3 射線拾取

通過鼠標選擇目標頂點時，先創建射線對象，在鼠標移動時對射線的方向進行更新，當鼠標移動至某個頂點對象上時，可從被拾取物體數組中獲取該頂點對象；在目標頂點對象所在的位置顯示變換控制器輔助工具，同時切換控制器的操作對象為當前目標；當鼠標從頂點對象上移開時，則移除控制器的操作對象，同時隱藏輔助工具。

變換控制器允許對目標物體進行任意方向的位移。在每次位移時對網格幾何體進行更新，當某個頂點對象發生移動時，網格模型更新的步驟為：

Step1在頂點對象列表中查找當前受控頂點對象的次序；

Step2根據次序在頂點坐標集合數組中訪問受控頂點信息，將其坐標替換為當前受控頂點對象位移后的新坐標。

根據頂點對象的移動更新幾何數據后，在下一幀渲染執行時就會顯示最新的模型形態。

2.2 編輯操作的記錄與撤銷方法

已執行的頂點編輯操作應該允許撤銷。撤銷操作的效果是使網格恢復到編輯前的狀態，需要以已執行的編輯操作為依據，因此，編輯撤銷的實現可分為編輯記錄和撤銷方法兩部分。

2.2.1 編輯記錄

編輯記錄的目的是有效保存編輯引起的變化，并為撤銷操作提供依據。在一次頂點對象的移動中，受影響的包括被移動的頂點對象和被更新的模型，并且產生的影響僅體現在頂點的空間坐標變化上。因此，一條編輯記錄只需保存目標網格、目標頂點對象及其移動前的位置3個信息。基于此，給出編輯記錄的數據結構見表2。

表2 編輯記錄的結構

選擇數組作為編輯記錄的存儲結構。在每次頂點對象移動時，插入新的編輯記錄。為了保持幾何體的實時更新，頂點對象移動的響應事件觸發是即時的，而編輯記錄不需要即時性，只需要在每次移動結束后進行記錄的插入。

2.2.2 編輯撤銷

編輯撤銷的目的是將最近一次操作的頂點對象恢復到移動前的位置，并恢復其對應的頂點位置。因此，撤銷操作可以看作對指定頂點對象進行指定移動位置的一次編輯，編輯撤銷的步驟為：

Step1若編輯記錄不為空，從其中取出最后一條記錄，否則不做任何操作；

Step2依據取出的記錄，在目標模型中查找目標頂點對象，修改其空間位置為編輯前坐標。

Step3同頂點編輯操作，修改目標頂點對象對應的頂點坐標并更新幾何體，刪除當前編輯記錄。

通過上述方法，可以更靈活地進行模型頂點的編輯操作。

2.3 三維數據獲取與導出

2.3.1 數據導入與可編輯對象查找

常見的三維數據有.gltf、.fbx、.obj、.stl等格式，Three.js提供了針對不同格式的加載器，以此為基礎可實現模型數據的導入。在初始化頁面時，實例化各類型加載器，在文件導入時可依據文件格式切換加載器類型，實現多格式兼容導入，同時避免了加載器的重復創建。

不同格式的三維文件在導入后的數據結構存在差異，其中，幾何體(geometry)和網格(mesh)為可編輯對象，場景(scene)和組合(group)為包含多個可編輯對象的集合。針對該差異性，遞歸地訪問導入的三維數據，查找幾何體或網格類型的對象,并將其添加到可編輯對象列表，該流程如圖4所示。

圖4 可編輯對象查找流程

2.3.2 數據導出

同三維文件導入類似，數據的導出可基于Three.js提供的文件生成器實現。在頁面初始化階段實例化生成器對象，執行導出操作時，將待導出的數據作為參數傳入生成器中，即可獲得編輯后的模型文件。

3 實 驗

在頂點編輯方法基礎上搭建Web三維模型編輯系統，系統界面如圖5所示。分別將不同類型的外部數據導入系統，對查找到的網格進行頂點編輯，最后將編輯后的模型導出，驗證Web頂點編輯的效果。

圖5 Web3D模型編輯系統界面

將.stl格式的“布料”模型導入場景，如圖6所示。三維視圖如圖6(a)所示；創建可視化頂點對象以及模型的網格視圖，如圖6(b)所示；通過鼠標選中待編輯頂點，在頂點對象上顯示的控制器，如圖6(c)所示；通過控制器操作，對“布料”模型的局部頂點進行編輯，并將其導出為新的模型，編輯前后的對比如圖6(d)所示。

圖6 “布料”模型的編輯

將.gltf格式的多網格組合模型“卡通男”導入場景，其基礎三維視圖如7(a)所示；從導入數據中查找到的可編輯對象顯示在圖7(b)的模型列表中；選擇其中一個網格進行編輯，其編輯視圖如圖7(c)所示。

圖7 “卡通男”模型的導入

對網格的袖口區域進行頂點編輯后，模型的視覺對比如圖8所示。在編輯過程中，生成的頂點編輯記錄如圖9所示，記錄顯示了編輯操作的頂點對象和原始位置，能夠有效支持編輯的撤銷。

圖8 “卡通男”模型局部編輯

圖9 編輯記錄

從上述不同類型數據的編輯操作可以看出，Web3D頂點編輯可以支持多種類型的三維數據操作，在可編輯網格的查找、頂點可視化與交互更新方面都能有較好的效果，可以作為Web在線三維建模的基礎。

4 結束語

本文基于Web3D實現了Web三維模型頂點編輯方法。通過可視化網格的頂點對象，以及頂點對象的交互事件，實現了Web環境下的鼠標交互式模型編輯；結合外部三維數據的導入與導出，可以進行在線的輕量級三維模型修改，為Web三維建模提供了基礎。但本文方法未能實現對頂點的批量操作，且頂點對象的交互單一，可以執行的操作有限，區域性頂點選擇、多頂點操作等都是后續工作的目標。另外，控制器的操作也可以進一步抽象化，將頂點可視化與交互分離，提升頂點編輯效率，也是本文方法的改進方向。