基于Three.js的鍍膜機(jī)展示平臺的設(shè)計(jì)

戴秀海 姚震 仲梁維 王書文 倪靜

摘? 要：隨著網(wǎng)頁展示技術(shù)的不斷更新，使復(fù)雜的三維機(jī)械模型能夠在網(wǎng)頁中的展示成為可能。本文簡單介紹了HTML5的優(yōu)勢及WebGL的第三方類庫Three.js，詳細(xì)闡述網(wǎng)頁上場景的顯示流程和場景中的模型交互，顯示了WebGL的優(yōu)越性，同時(shí)提出了基于Three.js的鍍膜機(jī)展示平臺的構(gòu)建方法。此平臺方便了用戶的觀看和操作，具備了良好的展示效果。

關(guān)鍵詞：鍍膜機(jī);HTML5;無渲染;WebGL;Three.js

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

Coating Machine Display Platform Based on Three.js

DAI Xiuhai1，YAO Zhen2，ZHONG Liangwei2，WANG Shuwen2，NI Jing2

（1.OPTORUN（Shanghai）Co.，Ltd.，Shanghai 200444，China;

2.Mechanical Engineering，University of Shanghai for Science and Technology，Shanghai 200093，China）

Abstract：With the updating of web page display technology， it is possible to display mechanical 3D models in Web pages. This paper introduces the advantages of HTML5 and the third-party class library of WebGL-Three.js， elaborates the display flow of simple scenes on Web pages and the interaction of models in the scenes， fully demonstrates the advantages of WebGL， and puts forward the construction method of the display platform of coating machine based on Three.js. This platform is convenient for users to watch and operate with good display effect.

Keywords：coating machine; HTML5; no plug-in;WebGL; Three.js

1? ?引言（Introduction）

隨著計(jì)算機(jī)技術(shù)和網(wǎng)絡(luò)技術(shù)的快速進(jìn)步，產(chǎn)品的各種展示技術(shù)層出不窮，其中虛擬展示技術(shù)逐漸成為熱門技術(shù)之一。近年來，隨著科學(xué)技術(shù)的逐步發(fā)展和完善，產(chǎn)品的展示技術(shù)已經(jīng)向網(wǎng)頁版的虛擬現(xiàn)實(shí)方向發(fā)展。在國外，網(wǎng)頁版的虛擬展示技術(shù)主要體現(xiàn)在城市的規(guī)劃、建筑的漫游、室內(nèi)的設(shè)計(jì)等。在國內(nèi)，此類技術(shù)主要應(yīng)用在產(chǎn)品的展示、地圖的形態(tài)構(gòu)建等，如：通過虛擬展示的形式服務(wù)于博物館和校園的網(wǎng)站，可以讓人有身臨其境的真實(shí)感。在機(jī)械、汽車、家居產(chǎn)品的展示方面，產(chǎn)品虛擬展示技術(shù)具備了使用的靈活性、豐富的交互性和體驗(yàn)的娛樂性等優(yōu)勢，使其逐漸受到廣泛的重視和應(yīng)用。用戶只需通過登錄網(wǎng)頁，即可觀看產(chǎn)品結(jié)構(gòu)，實(shí)現(xiàn)人機(jī)交互，節(jié)約了時(shí)間和經(jīng)濟(jì)成本。當(dāng)前，用戶對網(wǎng)頁的體驗(yàn)要求逐漸地從二維的平面模式向交互式的三維模式過渡。早期的三維圖形采用的Web3D技術(shù)都存在著諸多不足之處，通常需要借助封裝性很強(qiáng)的插件來支撐[1]。不但降低了用戶對系統(tǒng)的體驗(yàn)，還減弱了系統(tǒng)的可移植性。工業(yè)領(lǐng)域的設(shè)備演示都需要依賴傳統(tǒng)的建模軟件，如Creo、3Dmax、UG、Catia等。

WebGL的第三方類庫Three.js，在不同平臺的網(wǎng)頁中都具有良好的渲染與交互效果[2]。WebGL與傳統(tǒng)展示技術(shù)相比具有一些優(yōu)點(diǎn)，如：良好的兼容性、較低的成本，依賴性低等。用戶只需通過瀏覽器就能體驗(yàn)3D交互頁面，讓其視覺體驗(yàn)變得更加具有真實(shí)感。本文探討了鍍膜機(jī)的網(wǎng)頁動(dòng)畫演示研究，提出了基于Three.js的實(shí)驗(yàn)系統(tǒng)，使得用戶可以在網(wǎng)頁中體會(huì)鍍膜機(jī)三維模型的逼真效果，具有較強(qiáng)的應(yīng)用價(jià)值[3]。

2? ?背景及關(guān)鍵技術(shù)（Background and key technologies）

2.1? ?鍍膜機(jī)

隨著影像設(shè)備、手機(jī)、平板電腦等IT產(chǎn)品的普及，市場對鍍膜機(jī)需求量逐年增大，其設(shè)計(jì)生產(chǎn)精度要求極高。用鍍膜技術(shù)實(shí)現(xiàn)物體的表面處理，生活中隨處可見。例如：軍用、醫(yī)用顯示器、觸摸屏、太陽能等。使用鍍膜機(jī)進(jìn)行鍍膜具有如下的優(yōu)點(diǎn)：

（1）操作易控。鍍膜過程中，只需保持鍍膜機(jī)的工作壓強(qiáng)、電功率等條件的穩(wěn)定，就能獲得比較穩(wěn)定的沉積速率。

（2）膜的牢固性好。薄膜與基板有著極好的附著力，改善了所鍍膜物體的機(jī)械強(qiáng)度。

（3）成膜致密、均勻。從顯微照片看，薄膜表面微觀形貌比較精致細(xì)密，而且非常均勻，從而使薄膜的聚集密度得到了提高。

（4）薄膜具有優(yōu)異的性能。如濺射的金屬膜通常能獲得良好的光學(xué)性能、電學(xué)性能及某些特殊性能。

（5）易于組織大批量生產(chǎn)。可以通過擴(kuò)大磁控源來實(shí)現(xiàn)大規(guī)模的鍍膜，鍍膜機(jī)的自動(dòng)化控制，使流水線作業(yè)成為可能。

（6）工藝環(huán)保。傳統(tǒng)的電鍍會(huì)產(chǎn)生廢液、廢渣、廢氣，對環(huán)境造成嚴(yán)重的污染。而鍍膜機(jī)鍍膜對環(huán)境污染小、生產(chǎn)效率高。

2.2? ?傳統(tǒng)機(jī)械展示的不足

傳統(tǒng)展示方法一般可分為：標(biāo)本展示，實(shí)物或模型展示，幻燈片、視頻、多媒體影像展示等。雖然傳統(tǒng)展示存在著一些優(yōu)點(diǎn)，但是其不能完全適應(yīng)現(xiàn)代化的展示需求。

首先，傳統(tǒng)展示方法所展示的信息在傳達(dá)方面具有一定的局限性[4]。展示最直接的目的是將信息傳遞給參觀者。傳統(tǒng)的展示方法只能在限定時(shí)間和空間內(nèi)以較為單一的展示手段向參觀者傳遞信息。這樣使得所傳遞的信息量有限，此外還削弱了對信息整理、歸類、系統(tǒng)化的能力。其次，傳統(tǒng)展示方法使參觀者處于被動(dòng)的認(rèn)知狀態(tài)。參觀者參觀后，很難對展覽的內(nèi)容形成深刻的記憶。最后，傳統(tǒng)展示方法不注重情感的交流。傳統(tǒng)展示方法注重強(qiáng)調(diào)教育功能及理論知識的傳播，缺乏人與人的情感交流，使展示的方式過于生硬。通過調(diào)查發(fā)現(xiàn)，人們更傾向于參加娛樂程度高的展覽活動(dòng)，這樣更易令人輕松和愉快。當(dāng)今社會(huì)，設(shè)計(jì)人員開始密切關(guān)注展示中人的感情交流，讓人性化和以人為本的理念在展覽中得到體現(xiàn)。

2.3? ?性能更優(yōu)異的HTML5標(biāo)準(zhǔn)

HTML5是遵守兼容性、實(shí)用性、非革命性發(fā)展的三點(diǎn)規(guī)則來制定標(biāo)準(zhǔn)的。HTML5在新版本和以前版本的瀏覽器上都可以正常運(yùn)行。HTML5對一些常用的簡單功能進(jìn)行了封裝，內(nèi)部并沒有特別復(fù)雜的功能內(nèi)部。HTML5只是一種“妥協(xié)式”的規(guī)范，并不是革命性的發(fā)展。

HTML5還具備了如下的優(yōu)勢：（1）解決了瀏覽器的兼容問題。HTML5通過詳細(xì)的分析各瀏覽器所具有的功能，并以此為基礎(chǔ)來制定一個(gè)通用的規(guī)范，使各瀏覽器都能支持這個(gè)標(biāo)準(zhǔn)。（2）部分替代了原來的JavaScript。HTML5增加了部分可替代Javascript的實(shí)用功能，這些功能只要通過為標(biāo)簽增加一些屬性即可。（3）更明確語義支持。HTML5為頁面布局提供了更明確的語義元素，使頁面語義更清晰。（4）增強(qiáng)了WEB應(yīng)用程序功能。為了解決功能不足的問題，HTML5增加了新的API，這些API功能逐漸在各瀏覽器中得到實(shí)現(xiàn)。未來，HTML5在Web上的應(yīng)用將會(huì)更加廣闊。

2.4? ?基于WebGL的畫面渲染

WebGL實(shí)際上是一種3D繪圖標(biāo)準(zhǔn)，也是一套Javascript API[5]。它具備OpenGL ES（OpenGL for Embedded Systems）2.0與JavaScript的優(yōu)點(diǎn)，通過HTML5中的Canvas元素進(jìn)行渲染，使在網(wǎng)頁上創(chuàng)建三維復(fù)雜場景與模型成為了可能。與先前的Web3D的網(wǎng)頁實(shí)現(xiàn)效果相比，WebGL有以下幾個(gè)優(yōu)點(diǎn)。（1）WebGL幾乎不需要依賴瀏覽器的插件，就可以實(shí)現(xiàn)對圖像的渲染。（2）WebGL的兼容性好，可以在絕大多數(shù)的瀏覽器上運(yùn)行。（3）WebGL支持CPU硬件加速，實(shí)現(xiàn)三維圖形的渲染[6]。WebGL三維表達(dá)的優(yōu)越性，在2D與3D的位圖像動(dòng)態(tài)渲染中都能得到很好的體現(xiàn)。

Three.js作為一個(gè)輕量級的跨瀏覽器JavaScript庫，在創(chuàng)建和顯示W(wǎng)eb瀏覽器中的圖形和三維動(dòng)畫方面有著無與倫比的優(yōu)勢。主要是因?yàn)槠淇梢耘cHTML5的canvas元素、SVG和WebGL相結(jié)合，可以調(diào)用很多的3D顯示API。利用Three.js，可以輕松地創(chuàng)建各種三維場景，包括攝影機(jī)、光影、材質(zhì)等各種對象，從而極大地減輕Web3D的開發(fā)工作量，與其他技術(shù)相比，Three.js最大的優(yōu)勢在于開源且容易上手。利用其來開發(fā)一些輕量級的Web3D應(yīng)用仍然是可行和高效的。Three.js提供了點(diǎn)、線、面、矩陣等所需的基本元素，結(jié)合相機(jī)（cameras）、物體（objects）、光線（lights）、場景（scene）、渲染器（renderer）等，即可在網(wǎng)頁上實(shí)現(xiàn)三維模型的展示[7]。

3? 基于Three.js的鍍膜機(jī)展示系統(tǒng)的創(chuàng)建（Creation of display system for coating machine based on Three.js）

3.1? ?渲染器設(shè)置

渲染器就是通過調(diào)用渲染函數(shù)使存在于三維空間里的模型以二維平面的形式在網(wǎng)頁中顯現(xiàn)出來[8]。通常先在HTML中定義id的Canvas元素，再將渲染器和Canvas元素綁定。

3.2? ?場景（Scene）設(shè)置

場景就是一個(gè)三維空間，不需要有復(fù)雜的操作。程序開始時(shí)就可實(shí)例化，并將三維模型添加到其中。

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

Three.js中主要有正投影和透視投影兩種相機(jī)設(shè)置方式。透視投影中物體模型的大小會(huì)隨著視點(diǎn)的距離變化，而正投影中物體模型相關(guān)內(nèi)容如下的大小與視點(diǎn)的距離無關(guān)。Three.js中相機(jī)工作原理都是基于右手坐標(biāo)系的。

3.4? ?光源（Light）設(shè)置

為了使場景給人呈現(xiàn)出較好的視覺體驗(yàn)，可添加相應(yīng)的主題的光源，例如：多種光源的結(jié)合。

4 鍍膜機(jī)模型的導(dǎo)入（Introduction of coating machine model）

Three.js為我們提供一些簡單的模型的創(chuàng)建，如正方體、球等規(guī)則體。對于像鍍膜機(jī)這種復(fù)雜的機(jī)械而言，這顯然很難滿足其展示要求。Three.js提供了一些加載器，可以很好地解決這類問題。首先通過三維設(shè)計(jì)軟件如3dsMax、PRO/E、

UG和SolidWorks制作相關(guān)模型，然后通過相關(guān)軟件將其轉(zhuǎn)換成瀏覽器可加載的文件格式，最后將處理過的模型添加到場景中。不同類型的模型所對應(yīng)的加載器也不相同，常用加載器如下：.obj（帶材質(zhì)）類型文件所對應(yīng)的OBJLoader.js、

.mtl（帶材質(zhì)）類型文件所對應(yīng)的MTLLoader.js、.dae類型文件所對應(yīng)的ColladaLoader.js、.ply類型文件所對應(yīng)的PLYLoader.js、.stl類型文件所對應(yīng)的STLLoader.js、.vtk類型文件所對應(yīng)的VTKLoader.js[9]。

不同客戶的需求各異，企業(yè)對于產(chǎn)品的生產(chǎn)方面也應(yīng)有著不同的要求，鍍膜機(jī)的設(shè)計(jì)應(yīng)更加突出其差異性。為了更好地滿足客戶的個(gè)性化訂貨需求，這使得鍍膜機(jī)生產(chǎn)廠家需要一個(gè)展示平臺來顯示不同訂單所需鍍膜機(jī)的差異性。本次所提出的基于Three.js的展示平臺能為企業(yè)更好地解決此類問題。首先在CREO4.0中建立鍍膜機(jī)零件的三維模型，將其保存為.stl格式文件，再將模型導(dǎo)入到3dsMax中獲得.obj格式及其材料.Mtl格式的三維模型，引入OBJLoader.js加載器，相關(guān)內(nèi)容如下：

obj.initPostGL（ {

path： 'obj/'，

fileObj： 'B1.obj'，

texturePath： 'obj/'，

fileMtl： 'B1.mtl'} ）;

5? ?模型的平移、旋轉(zhuǎn)、縮放（Translation， rotation and scaling of the model）

通過相機(jī)操作控件來操作相機(jī)的位置，從而來實(shí)現(xiàn)模型的平移、旋轉(zhuǎn)、縮放[10]。除此以外還可以通過設(shè)置相機(jī)的position屬性，調(diào)用lookAt（）函數(shù)改變相機(jī)的指向位置，進(jìn)而移動(dòng)相機(jī)。本次采用Three.js框架的軌跡球controls實(shí)現(xiàn)控制，通過加載器OBJLoader.js導(dǎo)入三維模型，從而實(shí)現(xiàn)與鍍膜機(jī)模型的交互。只需對鼠標(biāo)進(jìn)行操作，即可實(shí)現(xiàn)場景中模型的平移、旋轉(zhuǎn)、縮放，使瀏覽效果更佳。使用TrackballControls之前，需將控件綁定到相機(jī)上。

更新相機(jī)的位置可以在render循環(huán)中完成。相關(guān)的操作方式具體如下：按住左鍵拖動(dòng)可實(shí)現(xiàn)模型的旋轉(zhuǎn)、翻滾;轉(zhuǎn)動(dòng)滾輪或中鍵可實(shí)現(xiàn)模型的放大縮小;按住右鍵，拖動(dòng)可實(shí)現(xiàn)模型的在場景中平移。

6? ?3D模型的驅(qū)動(dòng)（3D model drive）

鍍膜機(jī)尺寸龐大且零部件眾多，使得非專業(yè)人員無法想象其工作原理，將其運(yùn)行場景集成展示在網(wǎng)頁中的意義就顯得尤為突出。借助函數(shù)和控件改變它的位置、速度、旋轉(zhuǎn)的角度，增添了頁面的趣味性，增強(qiáng)了用戶體驗(yàn)，使之更人性化。本次將鍍膜機(jī)拆分為多個(gè)模塊，如B1、B2…B41。先對鍍膜機(jī)進(jìn)行整體顯示，在對各個(gè)模塊進(jìn)行依次顯示。具體效果如下：

7? ?結(jié)論 （Conclusion）

通過對WebGL標(biāo)準(zhǔn)下Three.js框架在網(wǎng)頁上基本三維場景展示進(jìn)行了研究分析，并提出了鍍膜機(jī)展示平臺的構(gòu)建方法。通過對不同加載器的調(diào)用，導(dǎo)入外部建好的模型;以及Three.js自帶的基本功能模塊，使得鍍膜機(jī)的3D模型呈在網(wǎng)頁中;鼠標(biāo)的操作功能，使得用戶在無須安裝任何插件的情況下，能夠輕松完成交互，實(shí)現(xiàn)模型的平移、放縮、旋轉(zhuǎn)功能。目前，Three.js還不夠成熟，部分瀏覽器尚不能全面支持，基于該技術(shù)的展示也相對較少。但隨著Three.js的推廣，尤其是移動(dòng)端瀏覽器的不斷支持，其跨平臺的優(yōu)勢將得以充分體現(xiàn)。在不遠(yuǎn)的將來，基于three.js的展示方法將成為該領(lǐng)域的主導(dǎo)。

參考文獻(xiàn)（References）

[1] 姚震，仲梁維，陳彩鳳.基于Three.js的機(jī)械產(chǎn)品展示研究[J].軟件導(dǎo)刊，2018，17（5）：187-190.

[2] Cui Peng.The Research and Design Of 3D Web Guide System Based On WebGL[C].Chinese Control and Decision Conference（CCDC），2014.

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

[4] 賀芳.工程機(jī)械展示設(shè)計(jì)中的多媒體技術(shù)應(yīng)用與研究[D].湖南大學(xué)，2013.

[5] Li Lianzhong，Zhang Kun，Xu Yang.A Cloud-Based Framework for Robot Simulation Using WebGL[C].Intelligent Systems Design and Engineering Applications （ISDEA）2015 Sixth International Conference on，2015：5-8.

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

[7] Anny Yuniarti，Ardian Atminanto，Anggi Mardasatria.et al.3D ITS Campus on the Web：A WebGL Implementation[C].International Conference on Information，Communication Technology and System（ICTS），2015.

[8] 侯嚴(yán)庭.基于Three.js的機(jī)械產(chǎn)品自動(dòng)裝配演示[J].軟件工程，2018，21（03）：23-26.

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

[10] 高辰飛.基于WebGL的海洋樣品三維可視化的研究[D].中國海洋大學(xué)，2014.