基于瀏覽器的機(jī)械產(chǎn)品虛擬裝配展示軟件系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)韓欣雨 張應(yīng)中

摘 ?要：隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，在瀏覽器網(wǎng)頁(yè)上展示和操作機(jī)械產(chǎn)品裝配模型有了非常廣泛的應(yīng)用。針對(duì)應(yīng)用需求，采用新興的WebGL（Web圖形庫(kù)），提出了基于瀏覽器的機(jī)械產(chǎn)品虛擬裝配展示方法。通過(guò)加載服務(wù)端STL（立體光刻）三角網(wǎng)格裝配模型，對(duì)其裝配約束關(guān)系自動(dòng)重構(gòu)，基于WebGL在瀏覽器上實(shí)現(xiàn)裝配零部件導(dǎo)航，基于裝配約束關(guān)系的裝配爆炸圖自動(dòng)生成和展示，并以一級(jí)減速器為例進(jìn)行展示系統(tǒng)實(shí)驗(yàn)，驗(yàn)證了方法的可行性。

關(guān)鍵詞：WebGL;三維裝配;裝配展示;裝配約束

中圖分類(lèi)號(hào)：TP393 ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

Design and Implementation of a Browser-based Virtual Assembly

Display Software System for Mechanical Products

HAN Xinyu， ZHANG Yingzhong

（Dalian University of Technology， Dalian 116023， China）

xinyudlut@163.com; zhangyz@dlut.edu.cn

Abstract： With the development of Internet technology， it is widely used to display and operate mechanical product assembly models on web browser. For application needs， this paper proposes a browser-based virtual assembly display method for mechanical products by using emerging WebGL （Web Graphics Library） technology. By loading the server-side STL （Stereolithography） triangular mesh assembly model， the assembly constraint relationship is automatically reconstructed. Assembly component navigation is realized on the browser based on WebGL. Assembly explosion diagram based on assembly constraint relationship is automatically generated and displayed. The feasibility of the method is verified by the experiment of display system with the first-stage reducer as an example.

Keywords： WebGL; three-dimensional assembly; assembly display; assembly constraints

1 ? 引言（Introduction）

機(jī)械產(chǎn)品一般由眾多零部件組成，新產(chǎn)品的推廣、用戶的產(chǎn)品體驗(yàn)、產(chǎn)品的維護(hù)和維修等應(yīng)用都需要產(chǎn)品裝配的三維展示，例如，產(chǎn)品的高質(zhì)量渲染、裝配爆炸、裝配拆卸等。傳統(tǒng)的基于計(jì)算機(jī)輔助設(shè)計(jì)（Computer Aided Design，CAD）模型的裝配展示需要安裝復(fù)雜的CAD軟件系統(tǒng)，操作復(fù)雜，成本高昂。隨著計(jì)算機(jī)技術(shù)的發(fā)展，互聯(lián)網(wǎng)已經(jīng)在各個(gè)行業(yè)得到廣泛的應(yīng)用，如果僅僅通過(guò)瀏覽器就可以展示和操作復(fù)雜的機(jī)械產(chǎn)品，用戶在客戶端便可體會(huì)到定制產(chǎn)品逼真的3D效果，將會(huì)促進(jìn)用戶與產(chǎn)品的交互，大大方便和促進(jìn)產(chǎn)品三維數(shù)字化展示和互聯(lián)網(wǎng)+技術(shù)的應(yīng)用。

近年來(lái)，HTML5融合WebGL為瀏覽器提供了一個(gè)硬件3D加速渲染功能，從而借助系統(tǒng)顯卡在瀏覽器里流暢地展示3D場(chǎng)景和模型，可以創(chuàng)建復(fù)雜的導(dǎo)航和數(shù)據(jù)視覺(jué)化[1-2]，為瀏覽器展示和操作復(fù)雜機(jī)械產(chǎn)品三維裝配提供了支撐。為此，國(guó)內(nèi)外學(xué)術(shù)和產(chǎn)業(yè)界開(kāi)展了大量的相關(guān)研究，戴秀海等[3]采用WebGL中的Three.js開(kāi)發(fā)了一個(gè)鍍膜機(jī)展示平臺(tái)，但只能提供產(chǎn)品的三維渲染顯示;姚震等[4]也采用Three.js（3D引擎）開(kāi)展了機(jī)械產(chǎn)品三維展示的研究，主要完成了場(chǎng)景的配置和三維模型的導(dǎo)入;SUN等[5]基于WebGL技術(shù)開(kāi)發(fā)了一個(gè)輕量級(jí)的跨平臺(tái)鑄造Web3D系統(tǒng)。實(shí)際上，WebGL技術(shù)在建筑、地理信息系統(tǒng)取得了更成功的應(yīng)用，ZHOU等[6]基于WebGL開(kāi)放一個(gè)開(kāi)放式建筑管理信息跨平臺(tái)在線可視化系統(tǒng)。WebGL為瀏覽器顯示高質(zhì)量三維模型提供支撐，但是對(duì)于由眾多零部件組成的機(jī)械產(chǎn)品開(kāi)展更深入的應(yīng)用，需要有產(chǎn)品的裝配模型，包括零部件的層次組成、零部件之間的裝配約束關(guān)系和各種物理約束關(guān)系等。一個(gè)復(fù)雜機(jī)械產(chǎn)品的數(shù)字化裝配模型，包括幾何模型十分復(fù)雜，需要功能強(qiáng)大的CAD造型設(shè)計(jì)軟件來(lái)完成，但不同的CAD軟件都采用各自的模型存儲(chǔ)格式，一般提供較低級(jí)的邊界幾何信息。因此需要對(duì)CAD軟件完成的裝配模型進(jìn)行重構(gòu)，構(gòu)建出產(chǎn)品的裝配模型，才能更好地開(kāi)展各種深入的應(yīng)用。

本文針對(duì)機(jī)械產(chǎn)品三維展示需求和特點(diǎn)，基于WebGL技術(shù)研究了一個(gè)基于瀏覽器的機(jī)械產(chǎn)品裝配三維展示方法，通過(guò)對(duì)CAD軟件提供的裝配模型STL幾何數(shù)據(jù)的導(dǎo)入和裝配約束關(guān)系的自動(dòng)識(shí)別，重構(gòu)出原產(chǎn)品裝配模型，在瀏覽器上實(shí)現(xiàn)了機(jī)械產(chǎn)品裝配的三維虛擬展示，包括模型的材質(zhì)渲染、裝配爆炸、零件拆裝、零件導(dǎo)航等功能，從而使用戶在客戶端便可體會(huì)到定制產(chǎn)品逼真的3D效果。

2 ? 系統(tǒng)架構(gòu)設(shè)計(jì)（System architecture design）

2.1 ? 應(yīng)用需求分析

系統(tǒng)的創(chuàng)建用于實(shí)現(xiàn)在瀏覽器上展示和操作服務(wù)端的機(jī)械產(chǎn)品模型，目前應(yīng)用主要需要實(shí)現(xiàn)以下功能：

（1）產(chǎn)品三維模型展示

三維模型展示是指在瀏覽器上無(wú)插件加載服務(wù)端的產(chǎn)品三維模型，對(duì)產(chǎn)品進(jìn)行真實(shí)感光照渲染、材質(zhì)渲染和各種旋轉(zhuǎn)、縮放變換操作等。此外還需要對(duì)模型進(jìn)行各種交互操作，例如，零件的選擇、零件選擇導(dǎo)航操作等。因此，瀏覽器要能夠加載產(chǎn)品幾何模型，具備渲染、光照和視點(diǎn)變換的場(chǎng)景功能。

（2）產(chǎn)品虛擬裝配展示

產(chǎn)品裝配是將眾多零部件通過(guò)裝配約束方式結(jié)合在一起，對(duì)產(chǎn)品虛擬裝配展示的主要方式有裝配爆炸、裝配拆卸等，需要模擬真實(shí)零部件狀況，零件移動(dòng)和旋轉(zhuǎn)時(shí)的干涉檢查是必需的。

2.2 ? 系統(tǒng)總體架構(gòu)

本文根據(jù)上述應(yīng)用需求分析，基于WebGL技術(shù)，提出如圖1所示系統(tǒng)總體架構(gòu)。

系統(tǒng)架構(gòu)分為如下兩大部分：

（1）瀏覽器客戶端

在瀏覽器客戶端采用WebGL的第三方庫(kù)Three.js創(chuàng)建三維展示場(chǎng)景，加載產(chǎn)品三維模型文件，并為后續(xù)裝配展示提供基礎(chǔ)。瀏覽器客戶端主要包括HTML5、層疊樣式表（Cascading Style Sheets，CSS）、JavaScript、Three.js及重構(gòu)的產(chǎn)品裝配模型，基于JavaScript語(yǔ)言及Three.js在VS Code（Visual Studio Code）開(kāi)發(fā)平臺(tái)實(shí)現(xiàn)。

在瀏覽器客戶端基于JavaScript中的樹(shù)形組件tree及raycaster射線構(gòu)建產(chǎn)品零部件導(dǎo)航界面，并通過(guò)Three.js中的相機(jī)控件實(shí)現(xiàn)對(duì)產(chǎn)品的移動(dòng)、旋轉(zhuǎn)、拆裝等交互操作。

（2）產(chǎn)品模型服務(wù)端

要展示的機(jī)械產(chǎn)品裝配模型通常放在服務(wù)端。產(chǎn)品裝配模型十分復(fù)雜，一般通過(guò)CAD建模軟件設(shè)計(jì)完成，不同CAD建模軟件以不同的裝配模型格式存儲(chǔ)。Three.js提供一個(gè)加載STL文件功能，而STL格式文件是將零件幾何模型以三角面的形式進(jìn)行描述，即一個(gè)STL文件是由一組無(wú)序的三角面組成的。STL格式在工業(yè)界得到廣泛的應(yīng)用，主流CAD建模軟件都能將幾何模型生成STL格式文件。本文將要展示的產(chǎn)品裝配模型按照STL格式存儲(chǔ)在服務(wù)端，客戶端通過(guò)資源定位器就可以加載到瀏覽器上展示。

2.3 ? 基于瀏覽器的三維場(chǎng)景

本文通過(guò)WebGL的第三方庫(kù)Three.js構(gòu)建虛擬裝配展示系統(tǒng)，包括渲染器、場(chǎng)景、相機(jī)、光源等的設(shè)置[7]。

（1）渲染器設(shè)置

采用Three.js中的WebGLRenderer渲染器進(jìn)行場(chǎng)景渲染，它通過(guò)HTML5中的標(biāo)簽直接內(nèi)嵌于網(wǎng)頁(yè)中進(jìn)行渲染，并能夠利用GPU硬件進(jìn)行加速，達(dá)到提高渲染性能的效果。

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

場(chǎng)景是一個(gè)3D空間，用來(lái)放置物體、相機(jī)及燈光。在Three.js中，場(chǎng)景用THREE.Scene表示。

（3）相機(jī)設(shè)置

為了保證機(jī)械產(chǎn)品模型展示的真實(shí)性，采用透視相機(jī)（PerspectiveCamera）。它采用的是透視投影，視景體為錐臺(tái)形區(qū)域，投射結(jié)果與幾何體角度和距離有關(guān)，會(huì)產(chǎn)生“近大遠(yuǎn)小”的效果。

同時(shí)，為了保證加載模型能夠居中渲染，需要借助相機(jī)對(duì)象的LookAT（）方法實(shí)現(xiàn)，即借助包圍盒BOX3計(jì)算模型幾何中心在Three.js坐標(biāo)中的世界坐標(biāo)，并將該坐標(biāo)作為L(zhǎng)ookAT（）的參數(shù)。

（4）光源設(shè)置

為了保證較好的渲染效果，便于后續(xù)模型放大、縮小、旋轉(zhuǎn)時(shí)更好地顯示模型，需要多種光源配合，因此采用兩種點(diǎn)光源（PointLight）和環(huán)境光源（AmbientLight）配合的方法。

2.4 ? 產(chǎn)品三維裝配模型創(chuàng)建

Three.js中包含多種二維及三維網(wǎng)格對(duì)象，提供創(chuàng)建簡(jiǎn)單幾何體及高級(jí)幾何體的方法，可以直接創(chuàng)建三維模型，但是相對(duì)機(jī)械產(chǎn)品復(fù)雜模型，其功能是遠(yuǎn)遠(yuǎn)不夠的，必須借助CAD造型軟件系統(tǒng)。另一方面，Three.js支持加載STL、OBJ、FBX等多種格式的三維模型文件，可以直接加載外部模型，目前主流的CAD造型軟件都能生成STL格式文件。因此，本文基于三維建模軟件SolidWorks對(duì)機(jī)械產(chǎn)品裝配模型進(jìn)行建模，并導(dǎo)出STL格式的文件。

3 ?產(chǎn)品三維裝配展示模型（3D assembly display model of the product）

3.1 ? 產(chǎn)品三維裝配模型設(shè)計(jì)

要實(shí)現(xiàn)上述產(chǎn)品裝配展示的應(yīng)用需求，在客戶端必須要構(gòu)建一個(gè)產(chǎn)品三維裝配模型。產(chǎn)品裝配模型是對(duì)裝配零部件信息的描述，主要包括裝配體單元組成的層次關(guān)系表達(dá)、裝配零件、部件的裝配定位及約束關(guān)系表達(dá)、各種裝配特征的表達(dá)等。本文采用如圖2所示的裝配模型，產(chǎn)品裝配由零件、子裝配通過(guò)裝配約束關(guān)系形成的一個(gè)層次裝配結(jié)構(gòu)樹(shù)。零件模型由零件名稱(chēng)、零件屬性和一組來(lái)自STL文件的三角面表示的幾何邊界來(lái)描述。

零件在裝配中的位置和姿態(tài)是通過(guò)裝配約束實(shí)現(xiàn)的，即裝配零件之間存在一個(gè)裝配約束關(guān)系。本文采用面向?qū)ο蠹夹g(shù)定義的部分裝配約束關(guān)系如圖3所示。“裝配約束”類(lèi)是裝配約束關(guān)系的基類(lèi)，下面派生出“同軸約束”類(lèi)、“共面約束”類(lèi)、“相切約束”類(lèi)等，“共面約束”類(lèi)又可以派生出“同向共面”類(lèi)和“反向共面”類(lèi)。在“裝配約束”類(lèi)中設(shè)立“參考零件”對(duì)象、“被約束零件”對(duì)象、“參考約束面”對(duì)象、“被約束面”對(duì)象和“約束參數(shù)”對(duì)象等屬性。

3.2 ? 產(chǎn)品三維裝配模型重構(gòu)

由于CAD裝配模型轉(zhuǎn)換為STL格式文件后，原有的裝配模型信息和邊界模型幾何信息丟失，轉(zhuǎn)換為一組三角面集，要構(gòu)造上述產(chǎn)品三維裝配模型需要從這些三角面模型中進(jìn)行重構(gòu)。自動(dòng)重構(gòu)過(guò)程如圖4所示。

重構(gòu)過(guò)程主要有三個(gè)步驟：一是加載STL格式三維模型文件，使用Three.js中的STLLoader對(duì)象將STL三角面文件轉(zhuǎn)入系統(tǒng)場(chǎng)景中，同時(shí)對(duì)文件進(jìn)行MeshLambertMaterial材質(zhì)設(shè)置，完成對(duì)模型文件的加載;二是完成對(duì)加載STL三角面的拓?fù)鋽?shù)據(jù)結(jié)構(gòu)的重構(gòu)，方便對(duì)三角面進(jìn)行各種幾何和查詢操作，形成一個(gè)零件幾何邊界;三是在所有STL文件加載、零件構(gòu)造完成后，通過(guò)零件之間的位置和姿態(tài)識(shí)別零件之間的裝配約束關(guān)系。第二個(gè)和第三個(gè)步驟將在下節(jié)介紹。

圖5是一個(gè)減速器產(chǎn)品三維裝配模型通過(guò)本文方法重構(gòu)后裝配模型實(shí)例。

4 ?產(chǎn)品裝配約束關(guān)系自動(dòng)重構(gòu)（Automatic reconstruction of product assembly constraint relationship）

4.1 ? 三角網(wǎng)格拓?fù)鋽?shù)據(jù)結(jié)構(gòu)重構(gòu)

如前面所述，STL文件是一組獨(dú)立三角面的集合。一個(gè)三角面由三個(gè)頂點(diǎn)和一個(gè)面法矢量組成，相鄰三角面沒(méi)有任何拓?fù)潢P(guān)系，并且存在大量重復(fù)頂點(diǎn)，因此非常有必要開(kāi)展三角網(wǎng)格拓?fù)鋽?shù)據(jù)重構(gòu)。

拓?fù)渲貥?gòu)主要包括兩個(gè)部分工作：一是進(jìn)行冗余頂點(diǎn)剔除;二是創(chuàng)建三角網(wǎng)格拓?fù)鋽?shù)據(jù)結(jié)構(gòu)，即構(gòu)建三角網(wǎng)格面與相鄰面之間、三角面與邊之間、邊與頂點(diǎn)之間的拓?fù)潢P(guān)系?；谠撏?fù)潢P(guān)系可以實(shí)現(xiàn)對(duì)三角面進(jìn)行鄰域搜索和幾何操作。

目前關(guān)于三角網(wǎng)格拓?fù)鋽?shù)據(jù)結(jié)構(gòu)已經(jīng)開(kāi)展了大量的研究，典型的拓?fù)鋽?shù)據(jù)結(jié)構(gòu)是半邊結(jié)構(gòu)。文獻(xiàn)[8]提出一個(gè)采用半邊編碼的緊湊三角網(wǎng)格拓?fù)鋽?shù)據(jù)結(jié)構(gòu)，在該數(shù)據(jù)結(jié)構(gòu)中，三角網(wǎng)格的幾何信息通過(guò)頂點(diǎn)和三角面描述，拓?fù)湫畔㈦[含在半邊信息中，半邊信息編碼為一個(gè)無(wú)符號(hào)長(zhǎng)整型數(shù)，消耗內(nèi)存少。

本文采用JavaScript編程，基于文獻(xiàn)[8]給出的重構(gòu)算法，實(shí)現(xiàn)三角網(wǎng)格拓?fù)鋽?shù)據(jù)重構(gòu)。從零件三角網(wǎng)格邊界中，已知一個(gè)三角面，就可以很快地遍歷所有其他三角面;如果已知一條邊，就可遍歷三角面的所有其他的邊;不需要條件判斷完成一環(huán)鄰域直接查詢，為后續(xù)裝配約束關(guān)系重構(gòu)打下了基礎(chǔ)。

4.2 ? 裝配約束關(guān)系自動(dòng)識(shí)別

完成STL零件模型的拓?fù)渲貥?gòu)后，即可得到一個(gè)由三角面組成的零件幾何邊界，但以前的零件裝配信息丟失，需要根據(jù)零件的幾何位置和姿態(tài)，對(duì)裝配約束關(guān)系自動(dòng)識(shí)別，重構(gòu)其裝配約束關(guān)系。裝配約束關(guān)系自動(dòng)識(shí)別主要步驟如下：

（1）兩個(gè)零件包圍盒檢查

零件包圍盒是一個(gè)包容零件三角面幾何邊界的最小六面體，可以通過(guò)對(duì)零件三角面的三維頂點(diǎn)求最大最小獲取。設(shè)零件A的最小包圍盒為Amin，零件B的最小包圍盒為Bmin，則如果Amin∩Bmin=0，表明零件A和零件B可能有交集，即可能存在裝配約束關(guān)系，轉(zhuǎn)到下一步進(jìn)行檢測(cè)。

（2）零件三角面的面面檢測(cè)

對(duì)存在邊界交集的兩個(gè)零件開(kāi)展三角面的面面檢測(cè)。檢測(cè)基本方法是任取零件A的一個(gè)三角面，與零件B上所有三角面進(jìn)行面接觸檢測(cè)，主要步驟如下：

Step 1：計(jì)算兩個(gè)三角面夾角。由于每個(gè)三角面都保存有面法向量，采用夾角公式計(jì)算，如果夾角值，表明兩個(gè)三角面是同向平行;如果，表明兩個(gè)三角面是反向平行（是設(shè)定的最小閾值）。

Step 2：計(jì)算兩個(gè)平行三角面距離。如果距離，表明兩個(gè)三角面相接觸，再通過(guò)三角面拓?fù)潢P(guān)系進(jìn)行鄰域搜索;如果還存在一個(gè)相鄰三角面相接觸，表明兩個(gè)零件存在共面約束，再進(jìn)一步判斷是同向共面、反向共面還是同軸關(guān)系。

（3）同軸關(guān)系判定

如果相鄰三角面存在共面約束，同時(shí)計(jì)算與相鄰面之間的兩面夾角。由于三角網(wǎng)格在近似表示曲面時(shí)存在一個(gè)舍入誤差，當(dāng)誤差足夠小時(shí)，此時(shí)則代表平面。此外，假設(shè)二面角存在一個(gè)最大值，當(dāng)大于這個(gè)值時(shí)，則兩鄰接面是不同的幾何面[9-10]。因此，兩鄰接面關(guān)系主要有如表1所示三種情況。

根據(jù)表1推斷出一個(gè)三角面與三個(gè)鄰接面的關(guān)系，存在兩個(gè)以上的三角面共面時(shí)，即可確定為在一個(gè)平面上，然后通過(guò)遞歸鄰域搜索屬于同一平面的其他三角面，從而確定整個(gè)平面。

當(dāng)一個(gè)三角面的三個(gè)鄰接面存在至少一個(gè)屬于曲面部分，則將它們作為曲面的候選三角面，然后比較它們的尺寸，當(dāng)它們的尺寸大小基本相同時(shí)，通過(guò)判斷圓柱軸線方向的方法來(lái)判斷是否為曲面，即將其假設(shè)為圓柱表面的一部分，求得圓柱體軸線的方向，再檢查圓柱軸線與下一個(gè)三角面法向量的垂直度，從而識(shí)別圓柱表面。識(shí)別圓柱表面后，同樣通過(guò)遞歸鄰域搜索到同屬于圓柱表面的其他三角面，進(jìn)而確定兩圓柱的軸線位置，計(jì)算兩零件圓柱面軸線夾角，當(dāng)或時(shí)，此時(shí)兩零件同軸。

5 ?產(chǎn)品三維裝配展示（3D assembly display of the product）

基于上述工作，本文在谷歌瀏覽器上開(kāi)展了機(jī)械產(chǎn)品三維虛擬裝配展示實(shí)驗(yàn)，由于篇幅所限，下面僅介紹兩項(xiàng)產(chǎn)品裝配展示方法。

5.1 ? 產(chǎn)品零部件導(dǎo)航

為了方便用戶更好地在瀏覽器界面下查找裝配模型中的各個(gè)零件，在瀏覽器左側(cè)基于JavaScript中的樹(shù)形組件tree構(gòu)建產(chǎn)品裝配結(jié)構(gòu)樹(shù)，如果選擇一個(gè)零件名稱(chēng)，相應(yīng)地在裝配展示區(qū)，該零件高亮顯示。

在產(chǎn)品裝配模型中，每個(gè)零件幾何邊界是通過(guò)加載服務(wù)端的STL文件生成的，加載的STL文件名就是構(gòu)造裝配模型中的零件名。獲取了裝配樹(shù)中點(diǎn)擊的零件名稱(chēng)，就可以通過(guò)裝配模型搜索到對(duì)應(yīng)零件的幾何邊界。如圖6所示，在左側(cè)結(jié)構(gòu)樹(shù)中選擇減速器箱座時(shí)，相應(yīng)地在裝配展示區(qū)，減速器箱座高亮顯示。

相應(yīng)地在裝配展示區(qū)，鼠標(biāo)在模型中移動(dòng)時(shí)，鼠標(biāo)光標(biāo)所接觸的零件也會(huì)高亮顯示。其基本原理是在鼠標(biāo)移動(dòng)光標(biāo)位置處構(gòu)造一條raycaster射線，計(jì)算鼠標(biāo)所經(jīng)過(guò)的3D空間的對(duì)象是否被射線擊中，從而返回被擊中的零件對(duì)象，完成零件的選中。拾取流程包括三個(gè)步驟：

Step 1：坐標(biāo)轉(zhuǎn)換。將所選零件的屏幕坐標(biāo)轉(zhuǎn)為WebGL標(biāo)準(zhǔn)設(shè)備坐標(biāo)。

Step 2：射線計(jì)算。通過(guò)選中零件位置與相機(jī)參數(shù)來(lái)計(jì)算射線位置。

Step 3：射線交叉計(jì)算。通過(guò)intersectObjects（）計(jì)算出與射線相交的網(wǎng)格模型，實(shí)現(xiàn)對(duì)展示區(qū)零件的選中。

5.2 ? 產(chǎn)品裝配爆炸圖展示

復(fù)雜的機(jī)械產(chǎn)品通常包含大量零部件，為了揭示和分析其內(nèi)部結(jié)構(gòu)，表達(dá)零部件間的相對(duì)空間位置關(guān)系，需要將裝配體中的零部件按照指定的次序、方向和距離相互分離，這種視圖稱(chēng)為爆炸圖或爆炸視圖。爆炸圖可清晰地展示裝配體中所有零部件之間的相互配合、連接關(guān)系等。

目前關(guān)于裝配爆炸圖的生成有大量的研究，主要有自動(dòng)生成方法和交互手工生成方法。本文在上述裝配約束關(guān)系重構(gòu)的基礎(chǔ)上，實(shí)現(xiàn)了產(chǎn)品裝配爆炸圖自動(dòng)生成及展示，主要實(shí)現(xiàn)步驟如下：

Step 1：沿坐標(biāo)軸方向設(shè)立六個(gè)爆炸方向：-x，x，-y，y，-z，z。

Step 2：搜索裝配約束關(guān)系模型。對(duì)具有反向共面約束的零件，按照其約束參考面法向收集到不同爆炸方向設(shè)定的爆炸序列中。例如，零件A反向共面約束到零件B上，A是約束零件，B是參考零件，B上共面的面為參考面，如果該面法向是x軸正向，則零件A被收集到正x軸方向爆炸排序隊(duì)列中。

Step 3：對(duì)六個(gè)爆炸方向的爆炸排序隊(duì)列重新進(jìn)行排序。每個(gè)排序零件都設(shè)置一個(gè)初始值為零的約束度，如果該零件被約束關(guān)系每引入一次參考零件，則該零件的約束度加1;約束度最小，同時(shí)離垂直坐標(biāo)平面距離最遠(yuǎn)的零件先進(jìn)入排序隊(duì)列。

Step 4：對(duì)六個(gè)爆炸排序隊(duì)列里零件爆炸平移變換。計(jì)算裝配包圍盒，確定爆炸距離;按照隊(duì)列先進(jìn)先出原則，按照計(jì)算設(shè)定的爆炸距離平移變換爆炸零件。

圖7給出一個(gè)在谷歌瀏覽器下生成的減速器裝配爆炸圖。

6 ? 結(jié)論（Conclusion）

通過(guò)互聯(lián)網(wǎng)技術(shù)將服務(wù)端的機(jī)械產(chǎn)品三維CAD數(shù)字化模型在客戶端瀏覽器上進(jìn)行裝配展示，對(duì)促進(jìn)產(chǎn)品的數(shù)字化推廣和服務(wù)具有重要意義。本文基于WebGL技術(shù)，開(kāi)展了機(jī)械產(chǎn)品虛擬裝配展示技術(shù)的研究，對(duì)裝配展示技術(shù)架構(gòu)進(jìn)行了設(shè)計(jì)，采用第三方庫(kù)Three.js創(chuàng)建虛擬展示場(chǎng)景，對(duì)裝配模型的STL文件進(jìn)行裝配模型及裝配約束關(guān)系的自動(dòng)重構(gòu)，初步實(shí)現(xiàn)了一個(gè)基于客戶端瀏覽器的機(jī)械產(chǎn)品裝配展示，包括裝配模型零件導(dǎo)航及交互、裝配爆炸圖展示等功能。實(shí)驗(yàn)表明，本文提出的方法是可行的，基于WebGL技術(shù)可以構(gòu)建功能強(qiáng)大的裝配模型虛擬展示平臺(tái)，使得用戶在瀏覽器中無(wú)須安裝插件即可瀏覽和操作產(chǎn)品裝配數(shù)字模型，大大促進(jìn)了產(chǎn)品三維數(shù)字化展示和互聯(lián)網(wǎng)+技術(shù)的應(yīng)用。

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

[1] 邵寶倉(cāng).基于WebGL的礦山數(shù)字化應(yīng)用平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)[D].天津：天津大學(xué)，2018.

[2] 寧?kù)o.基于WebGL實(shí)物交互技術(shù)及其實(shí)現(xiàn)的研究[D].武漢：華中科技大學(xué)，2014.

[3] 戴秀海，姚震，仲梁維，等.基于Three.js的鍍膜機(jī)展示平臺(tái)的設(shè)計(jì)[J].軟件工程，2019，22（02）：26-28.

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

[5] SUN F， ZHANG Z C， LIAO D M， et al. A lightweight and cross-platform Web3D system for casting process based on virtual reality technology using WebGL[J]. The International Journal of Advanced Manufacturing Technology， 2015， 80（5）：801-816.

[6] ZHOU X P， WANG J， GUO M， et al. Cross-platform online visualization system for open BIM based on WebGL[J]. Multimedia Tools and Applications， 2019， 78（20）：28575-28590.

[7] DIRKSEN J. Three.js開(kāi)發(fā)指南[M].李鵬程，譯.北京：機(jī)械工業(yè)出版社，2015：23-60.

[8] 張應(yīng)中，謝馥香，羅曉芳，等.采用半邊編碼的三角網(wǎng)格拓?fù)鋽?shù)據(jù)結(jié)構(gòu)[J].計(jì)算機(jī)輔助設(shè)計(jì)與圖形學(xué)學(xué)報(bào)，2016，28（02）：?328-334.

[9] SUNIL V B， PANDE S S. Automatic recognition of features from freeform surface CAD models[J]. Computer-Aided Design， 2008， 40（4）：502-517.

[10] LANGEDAHL L T， OLEKSANDR S， IVANNA B， et al. Extracting shape features from a surface mesh using geometric reasoning[J]. Procedia CIRP， 2020（93）：544-549.

作者簡(jiǎn)介：

韓欣雨（1996-），女，碩士生.研究領(lǐng)域：基于WebGL機(jī)械產(chǎn)品虛擬裝配展示.

張應(yīng)中（1961-），男，博士，教授.研究領(lǐng)域：產(chǎn)品智能幾何建模與特征建模，工程語(yǔ)義信息的知識(shí)表示與處理，可持續(xù)（綠色）設(shè)計(jì)與制造.