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

關(guān)鍵詞： HTML5； WebGL； three.js； 三維模型； 數(shù)據(jù)驅(qū)動

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

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

1 數(shù)據(jù)驅(qū)動的三維建模

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

Web的后臺主要是數(shù)據(jù)，3D只是一種數(shù)據(jù)呈現(xiàn)方式，通過后臺的數(shù)據(jù)驅(qū)動前臺的3D場景和動畫，即是數(shù)據(jù)驅(qū)動的三維建模，其意義在于通過修改后臺的數(shù)據(jù)，即可觸發(fā)前臺3D場景的變化。

1.1 數(shù)據(jù)驅(qū)動建模的基本原理

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

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

圖1 數(shù)據(jù)驅(qū)動的三維建模原理圖

1.2 數(shù)據(jù)驅(qū)動建模案例

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

圖2 簡單三維模型數(shù)據(jù)

如圖2所示數(shù)據(jù)定義了模型（各星球）的形狀（球形）、大?。ò霃剑?、坐標(biāo)（距離太陽的距離）、外觀（貼圖文件）、運動方式（自傳和公轉(zhuǎn)的速度及方向）等基本屬性，是一種很普通的關(guān)系數(shù)據(jù)。

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

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

圖3 數(shù)據(jù)驅(qū)動的Web3D動畫效果圖

幾個關(guān)鍵步驟的代碼如下：

（1） 將模型數(shù)據(jù)格式化成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獲取模型數(shù)據(jù)

（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）；

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

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

2 復(fù)雜靜態(tài)三維模型的導(dǎo)入及處理

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

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

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

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 靜態(tài)模型的導(dǎo)入

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

3 復(fù)雜動態(tài)三維模型的導(dǎo)入及處理

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

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

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

圖5 一個典型的dae文件

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

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

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中，動態(tài)模型一般是循環(huán)播放的，three.js通過requestAnimationFrame函數(shù)實現(xiàn)動畫效果，它很類似于setTimeOut函數(shù)，但又略有區(qū)別，一是當(dāng)標(biāo)簽頁失去焦點時，它就不再運行了，二是該函數(shù)目前還是依賴于瀏覽器的，以后可能還有變化。

4 其他三維模型的導(dǎo)入及處理

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

5 結(jié) 語

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

（1） 渲染效率問題

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

（2） 碰撞檢測問題

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

參考文獻(xiàn)

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

[2] 蘇雪.基于WebGL標(biāo)準(zhǔn)的家庭娛樂終端上Web3D渲染的實現(xiàn)[J].長江大學(xué)學(xué)報：自然科學(xué)版，2011（12）：102?104.

[3] 劉愛華，韓勇，張小壘，等.基于WebGL技術(shù)的網(wǎng)絡(luò)三維可視化研究與實現(xiàn)[J].地理空間信息，2012（5）：79?81.

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

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

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

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

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

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