基于Three.js的機(jī)械產(chǎn)品自動裝配演示

摘 要：隨著前端展示技術(shù)的發(fā)展，HTML5和WebGL技術(shù)在機(jī)械領(lǐng)域的應(yīng)用正逐漸增多，這為機(jī)械產(chǎn)品在網(wǎng)頁上的裝配展示提供了新的解決途徑。為了避免網(wǎng)頁展示所需的渲染插件的麻煩，提出了基于WebGL的第三方類庫Three.js的裝配展示平臺的構(gòu)建方法。本文對網(wǎng)頁上實(shí)現(xiàn)簡單三維模型展示流程和機(jī)械產(chǎn)品網(wǎng)頁裝配的功能進(jìn)行了分析，顯示了WebGL的開放性、免插件、跨平臺、硬件加速的優(yōu)勢。在網(wǎng)頁上實(shí)現(xiàn)機(jī)械的裝配，方便了用戶的觀看和操作，取得了良好的效果。

關(guān)鍵詞：HTML5；Three.js；無渲染；WebGL；裝配

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

Abstract：With the development of front-end display technology，using HTML5 and WebGL technology in the field of machinery is gradually increased，which provides a new way for the assembly of mechanical products demonstrated in web pages.In order to avoid the trouble of the rendering plug-in needed for the web page display，the construction method of the assembly display platform of the third party class library Three.js based on WebGL is proposed.This paper analyzes the function of displaying simple 3D models on web pages and functions of web page assembly of mechanical products，and shows the advantages of open，plug-in free，cross-platform，hardware-acceleration of WebGL.The realization of mechanical assembly on the web facilitates the viewing and operation of the users，and has achieved good results.

Keywords：HTML5；Three.js；no rendering；WebGL；assembling

1 引言（Introduction）

隨著CAD/CAM技術(shù)在制造業(yè)領(lǐng)域的應(yīng)用逐漸擴(kuò)大，產(chǎn)品的設(shè)計效率得到了有效的提高，同時也提高了生產(chǎn)過程的自動化水平。但是，產(chǎn)品的裝配環(huán)節(jié)還存在著一些問題，因?yàn)榇谁h(huán)節(jié)與對于技術(shù)人員的知識及經(jīng)驗(yàn)的積累要求較高，這一約束使制造業(yè)自動化的發(fā)展受到了極大的制約。裝配設(shè)計的性能和保證產(chǎn)品質(zhì)量和可靠性，降低產(chǎn)品成本，提高競爭力具有重要意義[1]。隨著三維畫圖軟件技術(shù)的發(fā)展，技術(shù)人員開始在復(fù)雜的CAD應(yīng)用軟件（如Pro/E，UG，Soildworks，Creo等）上進(jìn)行機(jī)械產(chǎn)品的虛擬裝配，此種裝配方式存在著一些問題。例如：不同軟件對于電腦的配置要求不同、不同軟件所畫的圖之間不能互相利用、所需要生成的裝配圖文件存儲量過大、在向客戶展示時對軟件依賴性強(qiáng)，不方便操作、對技術(shù)人員的專業(yè)素質(zhì)要求高等。尋求一種操作簡便、開放性高、可跨平臺且對硬件要求低的裝配展示方式，成為了研究人員迫切需要解決的問題[2]。

隨著前端網(wǎng)頁技術(shù)的迅速發(fā)展，在網(wǎng)頁上實(shí)現(xiàn)產(chǎn)品的展示技術(shù)逐漸受到了人們的青睞。基于新標(biāo)準(zhǔn)的HTML5和WebGL技術(shù)網(wǎng)頁展示方法，使上述難題得到了一定的解決。在網(wǎng)絡(luò)環(huán)境中，用戶只需將每個機(jī)械零部件保存為單獨(dú)的文件，通過JSON格式的語言將零件的相關(guān)信息反饋給瀏覽器，借助于瀏覽器就可以很清晰的了解三維的機(jī)械產(chǎn)品的裝配順序，操作簡單方便且對三維繪圖的軟件依賴性低。本文闡述了基于Three.js的機(jī)械產(chǎn)品自動裝配的動畫演示平臺，使得用戶能夠在客戶端可以體會到一些三維模型逼真的裝配效果，從而為實(shí)物裝配提供一定的指導(dǎo)，具有很好的應(yīng)用價值。

2 關(guān)鍵技術(shù)（Key technology）

2.1 虛擬裝配應(yīng)用現(xiàn)狀的研究

機(jī)械產(chǎn)品的裝配是在一定的精度和技術(shù)要求下，將一組零散且無序的零件按照最終所要得到產(chǎn)品的要求進(jìn)行組合的過程。產(chǎn)品零件裝配的序列規(guī)劃則成為其無法繞開的核心內(nèi)容，其對產(chǎn)品質(zhì)量有著決定性的作用。許多學(xué)者通過對裝配過程的大量研究，提出了自動化途徑的方法完成裝配，這種方式只能依靠產(chǎn)品的幾何拓?fù)浣Y(jié)構(gòu)進(jìn)行推理，缺乏裝配過程因素和操作因素，易陷入組合爆炸問題[3]。據(jù)統(tǒng)計，在產(chǎn)品的生產(chǎn)過程中大約1/3以上的人直接或間接從事與裝配有關(guān)的活動[4]，而產(chǎn)品的裝配費(fèi)用所占的成本，大約為整個生產(chǎn)成本的30%—50%（如果產(chǎn)品比較復(fù)雜，這個比例則會更高）。除此之外，產(chǎn)品的自動化生產(chǎn)往往被裝配環(huán)節(jié)所制約，產(chǎn)品是否能夠?qū)崿F(xiàn)自動化裝配的關(guān)鍵在于其裝配性能的好壞。因此，一個合理的裝配順序規(guī)劃和工藝規(guī)劃，對于產(chǎn)品設(shè)計的改進(jìn)、成本的降低、產(chǎn)品生產(chǎn)周期的縮短具有重要意義。

在產(chǎn)品的開發(fā)過程中，通常傳統(tǒng)的做法都是在借助實(shí)物模型的基礎(chǔ)上來對產(chǎn)品的裝配性能進(jìn)行分析和評價，此種方法不但花費(fèi)更多的時間、浪費(fèi)更多的精力、有時候準(zhǔn)確性也很差，而且又不能根據(jù)需要及時、快捷地進(jìn)行修改，使產(chǎn)品的生命周期有所延長，浪費(fèi)了財力和物力。針對上述問題，研究人員提出了虛擬裝配技術(shù)，此種技術(shù)為解決產(chǎn)品的裝配問題提供了新的途徑。工程師可以在虛擬環(huán)境下完成產(chǎn)品的裝配過程。這樣，工程師在裝配過程中可以融入自身經(jīng)驗(yàn)的同時，又可以用產(chǎn)生的裝配信息完善產(chǎn)品的裝配規(guī)劃，然后進(jìn)行整理歸納，將經(jīng)驗(yàn)的形成規(guī)則存儲到知識庫。

對于機(jī)械產(chǎn)品的規(guī)劃路徑演示，有技術(shù)人員提出可通過真人的現(xiàn)場演示來展現(xiàn)，也有人提出可以以視頻的形式展現(xiàn)出來，但這些都存在著一些問題，人員的表達(dá)方式是否完整、視頻的演示畫面是否清晰等?；趖hree.js的網(wǎng)頁展示技術(shù)可以使上述問題得到一定的解決。在網(wǎng)絡(luò)環(huán)境中，用戶只需借助于瀏覽器就可以對三維的機(jī)械模型的裝配流程有清晰的了解。

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

在沒有HTML5標(biāo)準(zhǔn)之前，并不是所有版本的瀏覽器都支持HTML、CSS和JavaScript，常常因?yàn)榇蜷_瀏覽器的版本不同而效果不同[5]。HTML5通過對以前的技術(shù)進(jìn)行改進(jìn)和總結(jié)，制訂出了新的標(biāo)準(zhǔn)，并且在原來的基礎(chǔ)上添加了一些新的功能，以便打造出一種內(nèi)容豐富、操作簡捷、免插件且跨平臺性更好的產(chǎn)品，它可以在各系統(tǒng)平臺上實(shí)現(xiàn)的無縫鏈接與交互[6]。從目前來看，效果還是相當(dāng)不錯的，部分主流瀏覽器都已支持HTML5，例如，F(xiàn)irefox、Opera、Chrome、IE9+等[7]?？傮w來說，HTML5有下面的優(yōu)點(diǎn)[8]：

（1）加入了幾個新的Tag，使得瀏覽器表現(xiàn)更加豐富。

（2）使得在瀏覽器中實(shí)現(xiàn)了視頻與音頻的展示。

（3）取代了Silverlight與Flash，不用任何插件可以在客戶端實(shí)現(xiàn)它們的功能。

（4）提高了用戶體驗(yàn)。

（5）將會在網(wǎng)頁三維游戲與移動設(shè)備應(yīng)用中發(fā)揮重要作用。

2.3 基于WebGL的畫面渲染

WebGL本身是一套Javascript API，也是一種3D繪圖標(biāo)準(zhǔn)，可以在兼容WebGL的瀏覽器中對交互式的圖形場景進(jìn)行渲染。WebGL可以通過Web頁面的Canvas標(biāo)簽，完全集成在支持GPU（Graphics Processing Unit）加速的Web瀏覽器中。在Web應(yīng)用程序中WebGL的工作模式如圖1所示。

依據(jù)WebGL規(guī)范，對底層的WebGL圖形接口進(jìn)行簡單的封裝，形成了更出色的框架—Three.js。通過掩蓋細(xì)節(jié)來加快產(chǎn)品的開發(fā)效率，降低了開發(fā)者的負(fù)擔(dān)。在各版本的瀏覽器3D效果方面，它的表現(xiàn)和兼容性能也很出色。Three.js通過創(chuàng)建所需的基本元素，如點(diǎn)、線、面、矩陣等，通過將相機(jī)（Cameras）、物體（objects）、光線（lights）等添加到場景（Scene）中，借助渲染器（renderer）進(jìn)行場景渲染，即可實(shí)現(xiàn)基本的網(wǎng)頁三維模型展示[9]。

3 基于Three.js的機(jī)械自動裝配展示系統(tǒng)的創(chuàng)建

（Establishment of automatic mechanical assembly and display system based on Three.js）

3.1 場景設(shè)置

場景實(shí)際上相當(dāng)于一個三維空間，后續(xù)添加的物體模型都是添加到場景中去，它相當(dāng)于一個大的容器。一般來說，場景的建立十分簡單，只需在程序最開始的時候進(jìn)行實(shí)例化，然后就可以將物體模型添加到場景中。其格式如下：

var scene；

function initScene（） {

scene=new THREE.Scene（）；

}

3.2 攝像機(jī)設(shè)置

Three.js中，相機(jī)依據(jù)三維空間中的物體投影到二維空間方式的不同，將投影分為兩種方式：透視投影和正投投影。透視投影和日常生活中人眼觀看物體的原理是一致的，就是視點(diǎn)越近的物體看起來越大，當(dāng)物體離得較遠(yuǎn)時看起來會較??；正投投影則是不管視點(diǎn)和物體有多遠(yuǎn)的距離，所要繪制的物體都按照統(tǒng)一的大小進(jìn)行。另外，相機(jī)用的是右手坐標(biāo)系工作原理，使用時需要設(shè)置位置坐標(biāo)和視野中心坐標(biāo)。其格式如下：

var camera；

function initCamera（）{

camera=newTHREE.PerspectiveCamera（40，window.innerWidth/window.innerHeight，1，100）；

camera.position.set（-5.00，3.43，11.31）；

camera.lookAt（new THREE.Vector3（-1.22，2.18，4.58））；

}

3.3 光源設(shè)置

為了優(yōu)化場景中的視覺效果，可添加適當(dāng)?shù)墓庠磥碚宫F(xiàn)相應(yīng)的主題和效果。為了模型在放大、縮小、旋轉(zhuǎn)時更好的顯示，則需要多種光源的結(jié)合。在一個場景中可以有多個光源，其基本上都是環(huán)境光和其他幾種光源的組合。其格式如下：

var pointLight；

function pointLight{

pointLight=new THREE.PointLight（0xffffff，1）；

pointLight.position.copy（camera.position）；

scene.add（pointLight）

}；

3.4 渲染器設(shè)置

渲染器就是在已經(jīng)定義好的場景中，通過添加好相機(jī)之后，調(diào)用渲染函數(shù)使存在于三維空間里的模型以二維平面的形式顯現(xiàn)出來的功能。其格式如下：

var renderer；

function initThree（）{

renderer=new THREE.WebGLRenderer（{antialias：true }）；

renderer.setClearColor（0x000000，1）；

renderer.setPixelRatio（window.devicePixelRatio）；

renderer.setSize（window.innerWidth，window.innerHeight）；

container.appendChild（renderer.domElement）；

}

3.5 物體模型導(dǎo)入及自動裝配的實(shí)現(xiàn)

場景中的模型可以是Three.js中自帶的規(guī)則模型，也可以是通過3D建模工具導(dǎo)出的模型文件。HTML腳本本身自帶一些簡單的規(guī)則三維模型，如正方體，球等。由于機(jī)械裝備一般都比較復(fù)雜，用簡單的幾何體組合的方式很難將其表現(xiàn)出來?；诖耍梢韵韧ㄟ^3dsMax、PRO/E、UG和SolidWorks制作的三維模型，再將其通過軟件轉(zhuǎn)化成瀏覽器可加載的文件格式，添加到場景中。Three.js自帶了加載json的方法，所以不需要額外引用插件?，F(xiàn)在的JSON格式有兩個類型，一種需要JSONLoader加載；另一種需要ObjectLoader加載。本次實(shí)驗(yàn)采用3dsmax把模型格式轉(zhuǎn)換成obj，再導(dǎo)入blender處理好模型后導(dǎo)出json文件。其引用的格式如下：

new THREE.ObjectLoader（）.load（'models/json/pump/pump.json'，function （model） {

scene.add（model）；

mixer=new THREE.AnimationMixer（model）；

mixer.clipAction（model.animations[0]）.play（）；

animate（）；

}）；

JSON文件中的模型的基本信息描述格式如下：

"geometries"：[{

"uuid"："CFB2696C-B6EA-4FCA-96E3-EA3C959F148C"，

"type"："Geometry"，

"data"：{

"vertices"：[-0.46194，1.25，-0.191341…]；//頂點(diǎn)數(shù)

"normals"：[-0.92388，0，-0.382683…]；//頂點(diǎn)法線向量

"uvs"：[[0.603154，0.532581，0.607054…]，[…]…]；//uv映射

"faces"：[42，0，1…]；//threejs內(nèi)的類型，存儲了頂點(diǎn)vertices的索引

}]

"materials"：[{

"uuid"："686b7161-539c-4515-9ee1-90bad1383a69"，

"type"："MeshLambertMaterial"，

"name"："Blue_S"，

"map"："7e397f39-0de8-45b2-88fd-7006e65ff9e5"，//漫射貼圖

"color"：16777215

}

各零件出現(xiàn)的時間和軌跡描述格式：

"animations"：[{

"name"："default"，//動畫名稱

"fps"：24，//幀頻

"tracks"：[{

"type"："vector3"，

"name"："camTrick_G.position"，

"keys"：[{//動畫幀，每一幀都有當(dāng)前骨骼的信息

"value"：[-77.460685，-1.56741，-60.086754]，

"time"：1//當(dāng)前幀的時間

}，{

"value"：[-68.295416，-1.56741，-66.434409]，

"time"：156

}，{

"value"：[-68.562223，-1.482206，-62.153825]，

"time"：157

}，{

"value"：[0，0，0]，

"time"：170

}]

}

該模塊的工作流程及自動裝配展示技術(shù)的實(shí)現(xiàn)，如圖2所示。

其最終效果如圖3所示。

4 結(jié)論（Conclusion）

通過應(yīng)用WebGL技術(shù)，調(diào)用Three.js、Detector.js、TrackballControls.js、stats.min.js等加載器，借助STLLoader.js來導(dǎo)入外部建好的模型；通過Three.js自帶的渲染器（Renderer）、場景（Scene）、照相機(jī)（Camera）、光源（Light）和著色器功能設(shè)置，使得3D模型在網(wǎng)頁中能夠給人以真實(shí)絢麗的3D效果；用TrackballControls.js實(shí)現(xiàn)鼠標(biāo)的操作功能，在通過JSON語言給出物體的顏色、坐標(biāo)、開始出現(xiàn)時間、裝配的時間等實(shí)現(xiàn)網(wǎng)頁自動裝配功能。

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

[1] Xinping Yu，Peng Gu，Xia Liu，et al.Modeling technology of virtual assembly system based on UML[J].International conference of Electronics，Communication and Aerospace Technology （ICECA），2017（2）：722-726.

[2] 杜培富.基于VRML的機(jī)械產(chǎn)品虛擬裝配技術(shù)研究[D].中國石油大學(xué)，2008.

[3] 蔣蘋，何清華，王奕.基于VRML和Java的交互式虛擬裝配技術(shù)研究[J].機(jī)械研究與應(yīng)用，2008，21（06）：96-99.

[4] 張雋，翟正軍.虛擬裝配技術(shù)的研究與應(yīng)用現(xiàn)狀[J].航空制造技術(shù)，2009（01）：70-73.

[5] 畢曉明.簡析HTML5在移動互聯(lián)網(wǎng)開發(fā)中的應(yīng)用[J].軟件工程，2016，19（02）：41-42.

[6] Du Pengyu，You Song，Li Deng.A real-time collaborative framework for 3D design based on HTML5，International Conference Computer Supported Cooperative Work in Design （CSCWD），2016：215-220.

[7] 劉新星.基于HTML5的空間環(huán)境數(shù)據(jù)三維成像研究與應(yīng)用[D].電子科技大學(xué)，2013.

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

[9] 汪升華，唐國純.基于HTML5的三維思維導(dǎo)圖軟件開發(fā)技術(shù)研究[J].軟件工程，2017，20（10）：4-7.

作者簡介：

侯嚴(yán)庭（1992-），男，碩士生.研究領(lǐng)域：計算機(jī)輔助設(shè)計.