面向Web的三維模型生成與處理技術

摘 要： WebGL標準的推出加速了Web3D時代的到來，在Web3D項目中，三維模型的生成與處理是一個最核心的問題。利用three.js引擎，介紹了Web環境下的數據驅動建模、靜態三維模型的導入與處理、動態三維模型的導入與解析問題。實驗結果表明：基于WebGL平臺和three.js引擎的Web3D技術，能夠有效地實施數據可視化，實現了基于數據庫的參數化建模，同時也能兼容大多數的工業三維模型，可以支撐完整的Web3D項目。

關鍵詞： HTML5； WebGL； three.js； 三維模型； 數據驅動

中圖分類號： TN710?34； TP391.9 文獻標識碼： A 文章編號： 1004?373X（2015）24?0083?04

Web?oriented 3D model generation and processing technology

ZHENG Hua1， SU Jingfang2

（1. Shijiazhuang Institute of Railway Technology， Shijiazhuang 050061， China； 2. Hebei University of Science and Technology， Shijiazhuang 050018， China）

Abstract： The introduction of WebGL standards accelerated the arrival of the Web3D era. The generation and processing of 3D model is the core in Web3D project. On the basis of the three.js engine， the data drive modeling， importing and processing of static 3D model， and importing and analysis of dynamic 3D model in the Web environment are introduced. The experimental results show that the Web3D technology based on WebGL platform and three.js engine can not only effectively achieve the data visualization and the database?oriented parametric modeling， but also has compatibleness with most of the industrial 3D models and support the whole Web3D project.

Keywords： HTML5； WebGL； three.js； 3D model； data drive

0 引 言

Web自20世紀90年代初誕生以來，經過20多年的發展，現在已經成為Internet上最重要、最普及的應用，從HTML 1.0到2.0，3.0，4.0，XHTML以及現在的HTML 5.0，但至今為止，主流的Web頁面仍然是二維的，隨著3D技術的日益普及，下一代Web技術正朝著3D方向發展。2013年5月，HTML 5.1正式草案公布，新增了Canvas標記，通過WebGL，允許瀏覽器直接在上面繪制矢量圖形，目前HTML 5和Canvas 2D規范的制定已經完成。three.js是由JavaScript編寫的WebGL第三方庫，是一款運行在瀏覽器中的3D引擎，可以用它在Web中創建各種三維場景，比如3D對象、攝影機、光、影、紋理、材質、動畫等。與傳統的Web3D技術（如Flash3D、Unity3D、Silverlight等）相比，three.js的優勢在于它不需要在瀏覽器中安裝插件，用戶可以通過JavaScript直接控制Web頁面上的3D場景，不足之處在于它需要瀏覽器支持WebGL，到目前為止，火狐、谷歌等瀏覽器都支持WebGL，但微軟的IE瀏覽器要11.0以后的版本才支持。

現在，主流的Web仍然是二維的，文本、圖片、聲音、視頻仍然是Web的主要內容。通過與傳統的Web技術相結合，three.js可以將二維數據以三維方式呈現出來，3D場景漫游將成為Web的主要內容，這對Web的影響是革命性的，本文重點探討基于three.js引擎的各類三維模型的生成與處理技術。

1 數據驅動的三維建模

3D建模是構建三維場景的一個基本問題，一般的方法是先建模，然后渲染，最后輸出成某種特定格式的模型或動畫。當模型有變化時，必須重復執行上述步驟，也就是說，渲染結果一旦輸出，就不可修改，無法實現實時變化。

Web的后臺主要是數據，3D只是一種數據呈現方式，通過后臺的數據驅動前臺的3D場景和動畫，即是數據驅動的三維建模，其意義在于通過修改后臺的數據，即可觸發前臺3D場景的變化。

1.1 數據驅動建模的基本原理

與一般的建模不同，Web上的建模涉及帶寬問題，模型數據需要先從Web服務器傳輸到客戶機上，然后才能進行渲染，因此，模型本身不能太大，否則容易引起網頁不響應；另外，由于Web是實時交互的，因此，模型數據要在后臺以異步方式完成傳輸，如AJAX；由于three.js是基于JavaScript的，模型數據的格式最好能與之匹配，如JSON。

綜上所述，Web3D建模過程的一種合理方式是：先通過Web服務器端的技術（如Asp，Java等）將后臺數據格式轉化成JSON格式，再以AJAX的方式將數據送往客戶端，然后利用JavaScript調用three.js中相應的API，將數據以三維的方式顯示出來，其原理如圖1所示。

圖1 數據驅動的三維建模原理圖

1.2 數據驅動建模案例

下面的例子展示了一個基于Access數據庫的數據（見圖2）驅動的三維動畫，描繪了太陽及其鄰近的六大行星的運轉情況，通過修改后臺數據，可觸發前臺頁面3D場景的實時變化，如圖3所示。

圖2 簡單三維模型數據

如圖2所示數據定義了模型（各星球）的形狀（球形）、大?。ò霃剑⒆鴺耍ň嚯x太陽的距離）、外觀（貼圖文件）、運動方式（自傳和公轉的速度及方向）等基本屬性，是一種很普通的關系數據。

在向瀏覽器端傳輸這些數據時，為減少數據轉換的工作，一般采用JSON格式（和JavaScript天然適應）。另外，由于瀏覽器在渲染三維動畫時比較消耗資源，一般采用AJAX異步通信方式（幾乎所有的瀏覽器都支持）。

接下來調用three.js中的SphereGeometry（球體）函數顯示這些星球即可。最后，為提高Web的交互性，可以加上3D聲音和場景控制（如第一人稱視角）。

圖3 數據驅動的Web3D動畫效果圖

幾個關鍵步驟的代碼如下：

（1） 將模型數據格式化成JSON格式

//???Getmodels.asp

<%

sql=\"SELECT * FROM 星球 order by id\"

set conn = Server.CreateObject（\"ADODB.Connection\"）

conn_str=\"DBQ=\"+server.mappath（\"star.mdb\"）+\"；driver={Microsoft Access Driver （*.mdb）}；\"

Conn.Open conn_str

set rs=Server.CreateObject（\"ADODB.recordset\"）

rs.Open sql，conn

str=\" {star：[\"

do until rs.EOF

str=str \"{\"

for each x in rs.Fields

str=str \"′\" x.name \"′：′\" x.value \"′，\"

next

str= left（str，len（str）?1） +\"}，\"

rs.MoveNext

loop

str= left（str，len（str）?1） +\"]}\"

response.write（str）

%>

（2） 通過AJAX獲取模型數據

（3） 通過three.js引擎生成3D模型

var sun；

var texture = new THREE.MeshPhongMaterial（{map： THREE.ImageUtils.loadTexture（′images/′+obj.star[0].tietuwenjian），emissive：0xffffff}）；

sun = new THREE.Mesh（new THREE.SphereGeometry（Number（obj.star[0].banjing），20，20）） ，texture）；

scene.add（sun）；

sun.position.set（Number（obj.star[0].juli），0，0）；

該方法的局限性在于他只能表示一些基本的、規則的三維模型，如立方體、球體、錐體等，模型本身所需要的數據很少，而且可以方便地通過關系數據庫存儲，因此，在實踐中有一定的局限性。

現實中各類工業模型一般會復雜得多，而且很難直接通過數學函數來表達，而且他們一般都使用某種專門的工具建立，具有某種特殊的格式，如Autodesk 3DS Max下的.3ds，Wavefront下的.obj等。

2 復雜靜態三維模型的導入及處理

一個典型的靜態三維模型中包含了幾何體頂點、貼圖坐標點、頂點法線、線、面、曲線、曲面等信息，將這些數據以關系數據庫的方式存儲是不太現實的，因為數據量太大且難以控制。更好的處理方式是直接在建模工具中將模型建立好，然后輸出成特定格式的模型文件，直接在Web3D中加以利用。這就涉及到三維模型的導入及處理問題。

由于沒有一個統一標準，過去用于工業建模設計上的交換格式，例如Autodesk 3DS Max下的.3ds和Wavefront軟件下的.obj，現在成為了最具代表性的兩種主流靜態模型格式。其中.obj格式由于沒有專利限制，使用文本存儲，而被大家廣泛采納。

Three.js中的OBJLoader（）和OBJMTLLoader（）類專門用于導入和處理obj格式的模型，下面的代碼導入了一個挖掘機的靜態模型，如圖4所示。首先在建模工具中建立好模型，然后輸出成.obj格式，假設模型文件命名為“wjj.obj”，導入模型的關鍵代碼如下：

var obj=′model_obj/wjj.obj′； //模型文件

var mtl=′model_obj/wjj.mtl′； //貼圖文件

var loader = new THREE.OBJMTLLoader（）；

loader.load（obj，mtl，function（object）{

object.position.set（0，0，0）；

scene.add（ object ）；

} ）；

圖4 靜態模型的導入

靜態模型本身是靜止的，程序能做的事情只能是改變他的坐標位置、旋轉角度和顯示比例，通過改變這些參數，也可以實現三維動畫效果（參考第一個例子）。

3 復雜動態三維模型的導入及處理

一個典型的動態三維模型中包含了頂點、紋理、骨骼、蒙皮、動畫等信息，與靜態模型相比，動態模型需要存儲的信息更多，控制也更復雜，因此也更加適合用導入的方式來處理和使用。

隨著硬件和技術的發展，三維建模逐漸從靜態模型向“幀動畫”和“骨骼動畫”發展，ID Tech下的.md，Autodesk下的.fbx，以及非盈利性組織Khronos負責維護的.dae格式成為了主流的動態模型格式。各種模型格式之間可以通過插件互相轉換，因此對于Web開發者來說，并不需要完全弄清每種模型的詳細格式，選擇當前最為流行的一種格式即可。

Dae格式由于其開放性而成為目前應用最普遍的一種動態三維模型格式，他使用XML格式存儲，結構靈活，運用自由度很高，圖5展示了一個典型的dae文件結構。

圖5 一個典型的dae文件

對于動態模型來說，將其導入到三維場景的方法和靜態模型是基本相同的，但動畫部分需要程序員通過JavaScript來控制，這是難點所在。

Three.js中的ColladaLoader（）類專門用于導入和處理dae格式的模型，下面的代碼展示了一個頂點變形動畫模型在導入和處理過程中的關鍵代碼：

var md=\"model_dae/wjj.dae\"；

var loader = new THREE.ColladaLoader（）；

loader.load（md， function （ collada ） {

dae = collada.scene；

skin = collada.skins[ 0 ]；

dae.position.set（0，0，0）；

animate（）；

} ）；

function animate（） {

var delta = clock.getDelta（）；

if （ t > 1 ） t = 0；

if （ skin ） {

for （ var i = 0； i < skin.morphTargetInfluences.length； i++ ） {

skin.morphTargetInfluences[i]=0；

}

skin.morphTargetInfluences[Math.floor（t*30）]=1；

t += delta；

}

requestAnimationFrame（ animate ）；

}

在Web3D中，動態模型一般是循環播放的，three.js通過requestAnimationFrame函數實現動畫效果，它很類似于setTimeOut函數，但又略有區別，一是當標簽頁失去焦點時，它就不再運行了，二是該函數目前還是依賴于瀏覽器的，以后可能還有變化。

4 其他三維模型的導入及處理

其他常見的3D模型格式還有：vtk，wrl，utf8，stl，ply，JSON等，這些模型中的大多數three.js都提供了相應的接口，如：CTMLoader，PLYLoade，BinaryLoader，VTKLoader，STLLoader，UTF8Loader，VRMLLoader等，在處理方法上與obj或dae格式大同小異。

5 結 語

至此，完成了數據驅動的三維模型、復雜的靜態三維模型和復雜的動態三維模型的處理工作，大多數情況下，這三種模型能夠支持一個完整的3D場景了。與普通的視頻不同，在Web3D中，由于所有的動畫都是實時渲染的，對CPU和GPU資源的消耗很嚴重，對于大型的3D場景，要有一定的優化措施。

（1） 渲染效率問題

筆者曾做過實驗，在3D場景中加入一個半徑為2 000的球體，如果加上燈光和陰影，在一臺普通PC機上需要近2 min的時間才能渲染出來（FireFox瀏覽器），如果再加上動畫，網頁基本處于“未響應”狀態。造成這種情況的根源在于three.js是以三角形為基礎來構建3D模型的，在一個半徑為2 000的球體平面上會有大量的三角形，他們都需要獨立渲染。因此，在進行Web3D開發時，應盡量減少使用弧面模型，如果必須使用，則應盡量縮小其尺寸。

（2） 碰撞檢測問題

Three.js沒有提供碰撞檢測機制，即在改變模型的坐標時，會出現一個模型進入另一個模型內部的問題，這部分工作需要開發者自己編程解決，一種簡單的算法是AABB算法，即沿坐標軸方向的包圍盒算法。

參考文獻

[1] 譚文文，丁世勇，李桂英.基于WebGL和HTML5的網頁3D動畫的設計與實現[J].電腦知識與技術，2011（28）：6981?6983.

[2] 蘇雪.基于WebGL標準的家庭娛樂終端上Web3D渲染的實現[J].長江大學學報：自然科學版，2011（12）：102?104.

[3] 劉愛華，韓勇，張小壘，等.基于WebGL技術的網絡三維可視化研究與實現[J].地理空間信息，2012（5）：79?81.

[4] 殷周平，吳勇.基于WebGL和AJAX的Web3D應用研究：以在線3D協作交互式設計為例[J].安慶師范學院學報：自然科學版，2013（1）：58?61.

[5] 霍冬，鄭偉華，盛步云.基于WebGL的機械產品三維展示技術研究[J].制造業自動化，2013（18）：73?77.

[6] 方路平，李國鵬，洪文杰，等.基于WebGL的醫學圖像三維可視化研究[J].計算機系統應用，2013（9）：25?30.

[7] 韓義.Web3D及Web三維可視化新發展：以WebGL和O3D為例[J].科技廣場，2010（5）：81?86.

[8] 方強.基于WebGL的3D圖形引擎研究與實現[D].合肥：安徽大學，2013.

[9] 張麗媛，蘇永生，蘆志強.基于WebGL和有限元的碼頭三維設計與計算仿真[J].水運工程，2013（12）：57?63.