姚震 仲梁維 陳彩鳳

摘 要：普通的商品網(wǎng)頁展示方法很難滿足機(jī)械產(chǎn)品的展示要求。隨著HTML5的出現(xiàn)以及WebGL技術(shù)的推廣，在網(wǎng)頁上展示三維機(jī)械模型有了新的解決方案。提出了基于Three.js三維模型展示平臺(tái)的構(gòu)建方法。對(duì)網(wǎng)頁上簡(jiǎn)單的三維場(chǎng)景顯示流程和場(chǎng)景中三維模型的交互進(jìn)行了分析，借助WebGL的第三方類庫Three.js，免去了網(wǎng)頁3D展示所需的渲染插件麻煩，顯示了WebGL的開放性、免插件、跨平臺(tái)、硬件加速的優(yōu)勢(shì)。用戶可在網(wǎng)頁面上觀看設(shè)計(jì)的三維效果，操作簡(jiǎn)便，效果很好。

關(guān)鍵詞：HTML5；無渲染；WebGL；Three.js；三維模型

DOI：10.11907/rjdk.172850

中圖分類號(hào)：TP317.4

文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1672-7800（2018）005-0187-04

Abstract：The general merchandise webpage display method is difficult to meet the display requirements of mechanical products. With the emergency of HTML5 and the promotion of WebGL technology， a new solution is provided for the display of three-dimensional mechanical models on webpages. In order to emphasize the construction and implementation of a realistic mechanism， we use Three. js of WebGL′s third-party library to eliminate the rendering plug-ins required for displaying a web page in 3D， and present a three-dimensional model display platform based on Three.js. The interaction between the simple 3D scene display process and the 3D model in the sceneis analysed. It shows the advantages of WebGL's openness， plug-in-free， cross-platform， hardware acceleration. The three-dimensional design model created on the web page is convenient for the user to view the designed three-dimensional effect on the web page. The operation is simple and has achieved good results.

Key Words：HTML5； no plug-in；WebGL； Three.js； three-dimensional model

0 引言

當(dāng)前，計(jì)算機(jī)和互聯(lián)網(wǎng)技術(shù)在各領(lǐng)域都得到了廣泛應(yīng)用，特別是Web3D技術(shù)。隨著對(duì)網(wǎng)頁體驗(yàn)要求的不斷提高，網(wǎng)頁正逐漸從傳統(tǒng)的二維平面模式向交互式三維模式發(fā)展。早期的三維圖形采用的Web3D技術(shù)主要有VRML、GL4Java、JAVA3D、Fluid3D、Superscape（VRT）、Vecta3D、Cult3d等，這些技術(shù)通常需要安裝大小不等且封裝性很強(qiáng)的插件來支撐，使得用戶體驗(yàn)感降低，系統(tǒng)移植也不靈活[1]。工業(yè)設(shè)備的三維動(dòng)畫演示都要借助專業(yè)的機(jī)械建模軟件，如SolidWorks、PRO/E、UG等。當(dāng)建模及演示算法設(shè)計(jì)好后，演示時(shí)都需要依賴三維軟件，于是將需要演示的動(dòng)畫錄制成視頻文件，再在客戶面前展示，這種方式造成客戶無法體驗(yàn)系統(tǒng)的交互性。因此，人們開始尋求一種開源且免插件并能在不同平臺(tái)網(wǎng)頁中都具有良好渲染與交互效果的展示方法。WebGL的出現(xiàn)克服了傳統(tǒng)三維網(wǎng)頁技術(shù)存在的兼容性差、高成本、高門檻以及專業(yè)建模軟件的依賴性等缺點(diǎn)，只需借助瀏覽器就能體驗(yàn)3D交互頁面。

增加了新功能的HTML5和具有獨(dú)特的三維繪圖標(biāo)準(zhǔn)的WebGL技術(shù)，只需借助于瀏覽器就可對(duì)三維機(jī)械模型進(jìn)行輕松訪問和操作。本文研究了三維機(jī)械的動(dòng)畫演示，提出了基于WebGL第三方庫Three.js的實(shí)驗(yàn)系統(tǒng)，用戶在客戶端便可體會(huì)到三維模型逼真的3D效果，具有較高的應(yīng)用價(jià)值[2]。

1 關(guān)鍵技術(shù)

1.1 產(chǎn)品展示研究現(xiàn)狀

網(wǎng)絡(luò)產(chǎn)品展示形式有：

（1）購物網(wǎng)站商品展示。購物網(wǎng)站首先將一些普遍的應(yīng)用進(jìn)行發(fā)布，再將所需展示的產(chǎn)品進(jìn)行發(fā)布，這樣用戶就可以看到簡(jiǎn)單且直觀的效果圖。但是，這種顯示存在不足：①網(wǎng)速限制了在網(wǎng)頁上商品圖片的數(shù)量，對(duì)于像素較大且清晰度較好的圖片顯示有一定困難，用戶不能很好地了解商品的細(xì)節(jié)，影響了商品的展示；②所展示的商品角度由展商預(yù)先設(shè)定，用戶無法看到所需角度的產(chǎn)品圖片；③ 商家為了突出所展示商品的畫面效果，會(huì)在特定條件下拍攝，降低了商品的真實(shí)感。

（2）視頻展示。視頻展示是指直接從不同角度將商品以視頻的形式展現(xiàn)出來。與圖片展示相比，視頻表現(xiàn)出的信息量更大，但缺點(diǎn)是所展示商品的信息、主題和背景都由展覽商預(yù)先設(shè)定，很難滿足用戶的個(gè)性化需求。

上述展示方法一般只適用于一些中小型商品，對(duì)于機(jī)械產(chǎn)品而言，光靠文字、圖片介紹產(chǎn)品是不夠的。機(jī)械產(chǎn)品展示除了注重外觀展示外，更加注重的是內(nèi)在結(jié)構(gòu)、運(yùn)行狀態(tài)以及安裝操作甚至維修等[3]。

1.2 以HTML5標(biāo)準(zhǔn)為載體呈現(xiàn)三維圖像

在HTML5之前，并不是所有瀏覽器都支持HTML、CSS和JavaScript，這就造成同一個(gè)頁面在不同瀏覽器中效果的不同。 HTML5對(duì)以前的技術(shù)進(jìn)行總結(jié)并添加了一些新的功能，制訂出了新的規(guī)范，致力于打造一種操作方便、內(nèi)容豐富、免插件且跨平臺(tái)性更好的產(chǎn)品，實(shí)現(xiàn)各系統(tǒng)平臺(tái)的無縫鏈接與交互，目前來看效果相當(dāng)不錯(cuò)，部分主流瀏覽器支持HTML5，如 Firefox、 Opera、Chrome、IE9+等 [4]。

1.3 基于WebGL的畫面渲染

WebGL本身是一套JavascriptAPI，也是一種3D繪圖標(biāo)準(zhǔn)，它將OpenGL ES（OpenGL for Embedded Systems）2.0與JavaScript相結(jié)合，借助于HTML5的Canvas元素進(jìn)行渲染，可以在網(wǎng)頁上創(chuàng)建三維復(fù)雜場(chǎng)景與模型。與早期Web3D實(shí)現(xiàn)相比，WebGL解決了兩大關(guān)鍵問題：①WebGL通過Javascript對(duì)圖像進(jìn)行宣染，對(duì)瀏覽器插件的依賴?。虎赪ebGL可通過OpenGL ES2.0與底層CPU進(jìn)行通信，可在大多數(shù)平臺(tái)上運(yùn)行，兼容性好。此外，WebGL還有如下優(yōu)勢(shì)：首先，WebGL解決了網(wǎng)頁開發(fā)對(duì)渲染插件的依賴問題；其次，WebGL可以在大多數(shù)瀏覽器及平臺(tái)上運(yùn)行，是開放的，提高了開發(fā)效率； 再次，WebGL支持CPU硬件加速，實(shí)現(xiàn)三維圖形渲染[5]。在生活中，基于WebGL的3D產(chǎn)品無處不在，從三維地圖到開源項(xiàng)目，如谷歌地圖、騰訊地圖、Open WebGlobal等，部分游戲也開始使用此類技術(shù)。

依據(jù)WebGL規(guī)范，通過對(duì)底層WebGL圖形接口進(jìn)行簡(jiǎn)單封裝，形成了一個(gè)出色的框架——Three.js。它通過掩蓋細(xì)節(jié)來加快開發(fā)效率，降低了開發(fā)者負(fù)擔(dān)，在瀏覽器3D效果方面表現(xiàn)也很優(yōu)異。Three.js提供了三維創(chuàng)建所需的基本元素，如點(diǎn)、線、面、矩陣等，通過將相機(jī)（ Cameras）、物體（objects）、光線（lights） 等添加到場(chǎng)景（Scene），借助渲染器（ renderer）進(jìn)行場(chǎng)景渲染，即可實(shí)現(xiàn)基本的網(wǎng)頁三維模型展示。Three.js提供了大量的實(shí)例及其源代碼供開發(fā)者研究，可通過逆向工程快速而有效地創(chuàng)建三維模型。

2 基于Three.js的機(jī)械展示系統(tǒng)創(chuàng)建

三維場(chǎng)景的基本結(jié)構(gòu)模塊如圖1所示。

2.1 渲染器設(shè)置

定義好場(chǎng)景中的三維模型，并添加好相機(jī)之后，通過調(diào)用渲染函數(shù)使存在于三維空間里的模型以二維平面的形式顯現(xiàn)出來。可以將渲染器和Canvas元素進(jìn)行綁定，并在HTML中定義id的 Canvas元素：

其Renderer相關(guān)代碼如下：

Var render=new THREE. Render（{

Canvas：document.getElementById（‘MAINCanvas）

}）；

2.2 場(chǎng)景（Scene）設(shè)置

場(chǎng)景就是一個(gè)很大的三維空間，就像一個(gè)很大的容器，沒有任何復(fù)雜操作，程序開始時(shí)即可進(jìn)行實(shí)例化，然后添加模型物體到場(chǎng)景中。相關(guān)代碼如下：

var scene；

function initScene（）

{

scene = new THREE.Scene（）；

}

2.3 照相機(jī)（Camera）設(shè)置

在Three.js中照相機(jī)設(shè)置主要有正投影和透視投影兩種方式，其目的是將三維空間里的物體模型映射到二維平面中，正投影中物體模型的大小與視點(diǎn)的距離無關(guān)，相反，透視投影中物體模型的大小與視點(diǎn)的距離會(huì)呈現(xiàn)出遠(yuǎn)小近大的現(xiàn)象，而且照相機(jī)設(shè)置的位置不同，會(huì)呈現(xiàn)出不同的視角。值得注意的是Three.js使用的坐標(biāo)系都是右手坐標(biāo)系，而且照相機(jī)也應(yīng)該添加到場(chǎng)景中，其相關(guān)代碼如下所示：

var camera；

function initCamera（） {

camera=new THREE.PerspectiveCamera（70，window.innerWidth/ window.innerHeight， 1， 10000 ）；

camera.position.z= 2000；}

2.4 光源（Light）設(shè)置

為了使場(chǎng)景中的視覺效果更好，可通過添加適當(dāng)?shù)墓庠磥碚宫F(xiàn)相應(yīng)的主題和效果。為了模型在放大、縮小、旋轉(zhuǎn)時(shí)更好地顯示，需要多種光源結(jié)合，其代碼如下：

function initlight （） {

var ambientLight = new THREE.AmbientLight（0xffffff ）；

scene.add（ ambientLight ）；

var directionalLight = new THREE.DirectionalLight（ 0xffffff ）；

directionalLight.position.set（ 0， 1， 0 ）；

scene.add（ directionalLight ）；

var pointLight = new THREE.PointLight（ 0xff0000， 1， 500 ）；

ointLight.position.set（0，0，-200）；

scene.add（ pointLight ）；}

3 三維模型導(dǎo)入

通過HTML腳本即可創(chuàng)建一些簡(jiǎn)單的三維模型，如正方體、球等規(guī)則的幾何體，而對(duì)于比較復(fù)雜的機(jī)械裝備，以簡(jiǎn)單幾何體組合的方式顯然是不切實(shí)際的，但Three.js可以導(dǎo)入由3dsMax、PRO/E、UG以及SolidWorks制作的三維模型，通過相關(guān)軟件將其轉(zhuǎn)化成瀏覽器可加載的文件格式添加到場(chǎng)景中。模型導(dǎo)入借助不同的加載器，即一系列輔助函數(shù)，不同格式的模型對(duì)應(yīng)不同的加載器，常用的幾種不同的加載器如表1所示。

這些加載器都遵循同樣的原則：

（1） 在網(wǎng)頁中包含[NameOfFormat]Loader.js文件。

（2） 使用[NameOfFormat]Loader.load（）函數(shù)從URL中加載。

（3） 檢查一下傳遞給回調(diào)函數(shù)的返回結(jié)果，并對(duì)它進(jìn)行渲染[6]。

考慮到本文三維模型是在SolidWorks中建模所得，所以采用OBJLoader.js加載器，而此加載器需要的三維模型格式為.obj。首先在SolidWorks中建模，保存模型格式為.stl，再將模型導(dǎo)入到3DsMax中獲得.obj格式的三維模型，加載模型的主要代碼形式如下：

var loader=new THREE.OBJLoader（）；

loader.load（'obj/base1.obj'，function （base） {

base.rotation.x=Math.PI*0.5；

base.position.set（-450，450，0）；

scene.add（base）；

}）；

導(dǎo)入模型最終效果如圖2所示。

4 模型平移、旋轉(zhuǎn)、縮放

模型的平移、旋轉(zhuǎn)、縮放實(shí)際上是借助一些常見的相機(jī)操作控件對(duì)相機(jī)進(jìn)行操作。當(dāng)然，除使用控件外，還可通過設(shè)置相機(jī)的position屬性，調(diào)用lookAt（）函數(shù)改變相機(jī)的指向位置來移動(dòng)相機(jī)。在以上研究的基礎(chǔ)上借助Three.js框架的軌跡球controls的控制，將加載器OBJLoader.js導(dǎo)入三維模型，便可實(shí)現(xiàn)與三維模型的交互，在場(chǎng)景中完成模型的平移、旋轉(zhuǎn)、縮放，選擇一個(gè)合適的角度及方位詳細(xì)地瀏覽三維模型結(jié)構(gòu)。使用TrackballControls之前先創(chuàng)建控件，并綁定到相機(jī)上：

var trackballControls= new THREE.TrackballControls（ camera ）；

trackballControls.rotateSpeed = 1.0； //旋轉(zhuǎn)速度

trackballControls.zoomSpeed = 1.2； //變焦速度

trackballControls.panSpeed = 0.8； //平移速度

trackballControls.Zoom = false； //是否變焦

trackballControls.Pan = true； //是否平移

trackballControls.staticMoving = false； //是否有慣性

trackballControls.dynamicDampingFactor = 0.3； //動(dòng)態(tài)阻尼系數(shù)，就是靈敏度

更新相機(jī)的位置可在render循環(huán)中完成。對(duì)相機(jī)的操作方式如表2所示。

5 3D模型驅(qū)動(dòng)

機(jī)械模型可能由于尺寸龐大并且具有相當(dāng)多的零部件，使一些非本行業(yè)的人根本無法想到這些機(jī)械模型是如何運(yùn)動(dòng)的，所以將這些運(yùn)行場(chǎng)景集成在網(wǎng)絡(luò)頁面中具有重要意義。合理的網(wǎng)頁模型控制，可以很大程度上增強(qiáng)用戶體驗(yàn)，增加頁面趣味性，減少焦慮感和乏味感[8]。模型本身是靜止的，可以通過函數(shù)改變其坐標(biāo)位置和控件，以改變構(gòu)件運(yùn)動(dòng)速度、旋轉(zhuǎn)角度[9]。

6 結(jié)語

本文應(yīng)用WebGL技術(shù)，調(diào)用Three.js、OBJLoader.js、TrackballControls.js等加載器，借助OBJLoader.js導(dǎo)入外部建好的模型；通過Three.js自帶的渲染器（Renderer）、場(chǎng)景（Scene）、照相機(jī)（Camera）、光源（Light）以及著色器功能設(shè)置，使3D模型在網(wǎng)頁中給人以真實(shí)絢麗的3D效果；用TrackballControls.js實(shí)現(xiàn)鼠標(biāo)的操作功能，最終實(shí)現(xiàn)網(wǎng)頁的3D展示功能，使用戶在客戶端無需安裝任何插件的情況下，完成對(duì)三維模型的交互，實(shí)現(xiàn)模型的平移、縮放、旋轉(zhuǎn)功能。

在Web3D中，所有動(dòng)畫都是實(shí)時(shí)渲染的，對(duì)CPU和GPU資源的消耗很嚴(yán)重。對(duì)于大型的3D場(chǎng)景，要有一定的優(yōu)化措施。此外，實(shí)現(xiàn)平臺(tái)3D展示功能時(shí)，借助WebGL這一較新穎和具有突出優(yōu)勢(shì)的3D顯示技術(shù)，雖然具有不需要安裝插件實(shí)現(xiàn)3D展示的優(yōu)點(diǎn)，但也有其局限性[10]，并非適用于所有瀏覽器。

參考文獻(xiàn)：

[1] 任宏康，祝若鑫，李風(fēng)光，等.基于Three.js的真實(shí)三維地形可視化設(shè)計(jì)與實(shí)現(xiàn)[J].測(cè)繪與空間地理信息，2015，38（10）：51-54.

[2] 王磊，高玨，金野，等.基于Web3D無插件的三維模型展示的研究[J].計(jì)算機(jī)技術(shù)與發(fā)展，2015（4）：217-220.

[3] 任萱.基于網(wǎng)絡(luò)的機(jī)械產(chǎn)品虛擬展示設(shè)計(jì)及研究[D].太原：太原理工大學(xué)，2013.

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

[5] 許虎，聶云峰，舒堅(jiān).基于中間件的瓦片地圖服務(wù)設(shè)計(jì)與實(shí)現(xiàn)[J].地球信息科學(xué)學(xué)報(bào)，2010（4）：562-567.

[6] 梁宇瀾，唐敦兵，鄭力，等.基于Web的機(jī)械加工仿真委托服務(wù)平臺(tái)[J].計(jì)算機(jī)集成制造系統(tǒng)，2002（12）：997-1001.

[7] JOS DIRKESEN. Three.js開發(fā)指南[D].李鵬程，譯. 北京：機(jī)械工業(yè)出版社，2015.

[8] 伊卓君.以用戶體驗(yàn)為中心的網(wǎng)頁交互設(shè)計(jì)理論探索[J].現(xiàn)代裝飾，2011（8）：48-49.

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

[10] 劉陽，張兵，樊鳳彬.基于虛擬現(xiàn)實(shí)技術(shù)的機(jī)械產(chǎn)品全景顯示系統(tǒng)開發(fā)[J].科技資訊，2012，35（8）：1-2.

（責(zé)任編輯：杜能鋼）