基于Three.js的機械產品自動裝配演示

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

關鍵詞：HTML5；Three.js；無渲染；WebGL；裝配

中圖分類號：TP311 文獻標識碼：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技術在制造業領域的應用逐漸擴大，產品的設計效率得到了有效的提高，同時也提高了生產過程的自動化水平。但是，產品的裝配環節還存在著一些問題，因為此環節與對于技術人員的知識及經驗的積累要求較高，這一約束使制造業自動化的發展受到了極大的制約。裝配設計的性能和保證產品質量和可靠性，降低產品成本，提高競爭力具有重要意義[1]。隨著三維畫圖軟件技術的發展，技術人員開始在復雜的CAD應用軟件（如Pro/E，UG，Soildworks，Creo等）上進行機械產品的虛擬裝配，此種裝配方式存在著一些問題。例如：不同軟件對于電腦的配置要求不同、不同軟件所畫的圖之間不能互相利用、所需要生成的裝配圖文件存儲量過大、在向客戶展示時對軟件依賴性強，不方便操作、對技術人員的專業素質要求高等。尋求一種操作簡便、開放性高、可跨平臺且對硬件要求低的裝配展示方式，成為了研究人員迫切需要解決的問題[2]。

隨著前端網頁技術的迅速發展，在網頁上實現產品的展示技術逐漸受到了人們的青睞?；谛聵藴实腍TML5和WebGL技術網頁展示方法，使上述難題得到了一定的解決。在網絡環境中，用戶只需將每個機械零部件保存為單獨的文件，通過JSON格式的語言將零件的相關信息反饋給瀏覽器，借助于瀏覽器就可以很清晰的了解三維的機械產品的裝配順序，操作簡單方便且對三維繪圖的軟件依賴性低。本文闡述了基于Three.js的機械產品自動裝配的動畫演示平臺，使得用戶能夠在客戶端可以體會到一些三維模型逼真的裝配效果，從而為實物裝配提供一定的指導，具有很好的應用價值。

2 關鍵技術（Key technology）

2.1 虛擬裝配應用現狀的研究

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

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

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

2.2 以HTML5標準為載體呈現三維圖像

在沒有HTML5標準之前，并不是所有版本的瀏覽器都支持HTML、CSS和JavaScript，常常因為打開瀏覽器的版本不同而效果不同[5]。HTML5通過對以前的技術進行改進和總結，制訂出了新的標準，并且在原來的基礎上添加了一些新的功能，以便打造出一種內容豐富、操作簡捷、免插件且跨平臺性更好的產品，它可以在各系統平臺上實現的無縫鏈接與交互[6]。從目前來看，效果還是相當不錯的，部分主流瀏覽器都已支持HTML5，例如，Firefox、Opera、Chrome、IE9+等[7]?？傮w來說，HTML5有下面的優點[8]：

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

（2）使得在瀏覽器中實現了視頻與音頻的展示。

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

（4）提高了用戶體驗。

（5）將會在網頁三維游戲與移動設備應用中發揮重要作用。

2.3 基于WebGL的畫面渲染

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

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

3 基于Three.js的機械自動裝配展示系統的創建

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

3.1 場景設置

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

var scene；

function initScene（） {

scene=new THREE.Scene（）；

}

3.2 攝像機設置

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

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 光源設置

為了優化場景中的視覺效果，可添加適當的光源來展現相應的主題和效果。為了模型在放大、縮小、旋轉時更好的顯示，則需要多種光源的結合。在一個場景中可以有多個光源，其基本上都是環境光和其他幾種光源的組合。其格式如下：

var pointLight；

function pointLight{

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

pointLight.position.copy（camera.position）；

scene.add（pointLight）

}；

3.4 渲染器設置

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

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 物體模型導入及自動裝配的實現

場景中的模型可以是Three.js中自帶的規則模型，也可以是通過3D建模工具導出的模型文件。HTML腳本本身自帶一些簡單的規則三維模型，如正方體，球等。由于機械裝備一般都比較復雜，用簡單的幾何體組合的方式很難將其表現出來?；诖?，可以先通過3dsMax、PRO/E、UG和SolidWorks制作的三維模型，再將其通過軟件轉化成瀏覽器可加載的文件格式，添加到場景中。Three.js自帶了加載json的方法，所以不需要額外引用插件?，F在的JSON格式有兩個類型，一種需要JSONLoader加載；另一種需要ObjectLoader加載。本次實驗采用3dsmax把模型格式轉換成obj，再導入blender處理好模型后導出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…]；//頂點數

"normals"：[-0.92388，0，-0.382683…]；//頂點法線向量

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

"faces"：[42，0，1…]；//threejs內的類型，存儲了頂點vertices的索引

}]

"materials"：[{

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

"type"："MeshLambertMaterial"，

"name"："Blue_S"，

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

"color"：16777215

}

各零件出現的時間和軌跡描述格式：

"animations"：[{

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

"fps"：24，//幀頻

"tracks"：[{

"type"："vector3"，

"name"："camTrick_G.position"，

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

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

"time"：1//當前幀的時間

}，{

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

"time"：156

}，{

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

"time"：157

}，{

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

"time"：170

}]

}

該模塊的工作流程及自動裝配展示技術的實現，如圖2所示。

其最終效果如圖3所示。

4 結論（Conclusion）

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

參考文獻（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的機械產品虛擬裝配技術研究[D].中國石油大學，2008.

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

[4] 張雋，翟正軍.虛擬裝配技術的研究與應用現狀[J].航空制造技術，2009（01）：70-73.

[5] 畢曉明.簡析HTML5在移動互聯網開發中的應用[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的空間環境數據三維成像研究與應用[D].電子科技大學，2013.

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

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

作者簡介：

侯嚴庭（1992-），男，碩士生.研究領域：計算機輔助設計.