基于WebGL的焊接構(gòu)架質(zhì)量控制點(diǎn)三維可視化管理研究

孫可心，鐘宏遠(yuǎn)，呂光宙，商 浩

(中車青島四方機(jī)車車輛股份有限公司，山東 青島 266111)

0 引言

隨著中國高速軌道交通事業(yè)的飛速發(fā)展，鐵路高速客車提速降耗不斷深入，作為客車的走行部分，轉(zhuǎn)向架綜合性能的優(yōu)劣對客車運(yùn)行的安全性、穩(wěn)定性、可靠性影響頗深。焊接構(gòu)架是轉(zhuǎn)向架的關(guān)鍵承重部分，是制約轉(zhuǎn)向架運(yùn)行速度和承重能力的重要影響因素。焊接構(gòu)架在結(jié)構(gòu)上大體相似，由側(cè)梁、橫梁、縱向連接梁、空氣彈簧支承梁、制動(dòng)吊座、定位臂座、增壓缸安裝座、垂向止擋、電機(jī)吊座、齒輪箱吊座等組成。

質(zhì)量控制點(diǎn)指在質(zhì)量管理活動(dòng)中為了保證生產(chǎn)作業(yè)過程質(zhì)量而指定的重要管控對象、核心部位或問題頻發(fā)環(huán)節(jié)。質(zhì)量控制點(diǎn)以重點(diǎn)管理為原則，通過對生產(chǎn)線中重點(diǎn)對象的管控，保證生產(chǎn)線產(chǎn)品質(zhì)量的穩(wěn)定性。

轉(zhuǎn)向架焊接構(gòu)架質(zhì)量控制點(diǎn)因項(xiàng)目、車型差異而數(shù)量較多。傳統(tǒng)質(zhì)量控制點(diǎn)管理媒介多為紙質(zhì)表單或電子表單，不便于數(shù)據(jù)的信息化查詢、存儲(chǔ)、統(tǒng)計(jì)分析。傳統(tǒng)媒介僅能以文字或圖片描述相關(guān)質(zhì)量控制點(diǎn)對應(yīng)的位置信息，難以對其進(jìn)行精確和直觀的描述。以焊接構(gòu)架質(zhì)量控制點(diǎn)為管理對象，控制點(diǎn)三維可視化管理為目標(biāo)，基于WebGL 3D繪圖協(xié)議，利用Tomcat輕量型服務(wù)器和mysql數(shù)據(jù)庫技術(shù)，開發(fā)了焊接構(gòu)架質(zhì)量控制點(diǎn)三維可視化管理Web應(yīng)用，實(shí)現(xiàn)了焊接構(gòu)架質(zhì)量控制點(diǎn)的數(shù)字化查詢、存儲(chǔ)、統(tǒng)計(jì)分析與三維可視化管理。

1 設(shè)計(jì)與分析

1.1 需求分析

研究對象為焊接構(gòu)架質(zhì)量控制點(diǎn)，Web應(yīng)用主要使用者為質(zhì)量管理人員、技術(shù)人員、一線操作員工、實(shí)習(xí)人員等。質(zhì)量管理人員、技術(shù)人員亟需能夠?qū)崿F(xiàn)控制點(diǎn)數(shù)字化存儲(chǔ)、查詢和統(tǒng)計(jì)分析的輕量級(jí)Web應(yīng)用。一線操作員工、實(shí)習(xí)人員亟需能夠?qū)崿F(xiàn)控制點(diǎn)三維可視化展示、瀏覽、學(xué)習(xí)的平臺(tái)。

Web應(yīng)用采用B/S架構(gòu)，通過系統(tǒng)瀏覽器查看焊接構(gòu)架質(zhì)量控制點(diǎn)在其三維模型中的分布情況和詳細(xì)內(nèi)容。質(zhì)量管理人員、技術(shù)人員可通過點(diǎn)擊焊接構(gòu)架三維模型中的某一空間位置，添加或刪除質(zhì)控點(diǎn)。一線操作員工、實(shí)習(xí)人員可通過鼠標(biāo)或觸摸屏對模型進(jìn)行旋轉(zhuǎn)、平移、放縮等對模型進(jìn)行瀏覽，通過點(diǎn)擊標(biāo)記點(diǎn)實(shí)現(xiàn)質(zhì)量控制項(xiàng)點(diǎn)的實(shí)時(shí)在線查看。Web應(yīng)用可通過企業(yè)內(nèi)部網(wǎng)絡(luò)部署，具備固定、移動(dòng)設(shè)備各平臺(tái)兼容性和控制點(diǎn)數(shù)據(jù)保密性。

1.2 數(shù)據(jù)設(shè)計(jì)

Web應(yīng)用主要數(shù)據(jù)呈現(xiàn)類型為三維模型、文本及圖片，并且在查看、添加新質(zhì)控點(diǎn)模塊使用數(shù)據(jù)庫實(shí)現(xiàn)了質(zhì)控點(diǎn)信息查詢、新建功能。

1.3 數(shù)據(jù)庫設(shè)計(jì)

根據(jù)質(zhì)控點(diǎn)的實(shí)體屬性圖，創(chuàng)建質(zhì)控點(diǎn)分布表，包括如下字段：ID(標(biāo)識(shí))、Title(質(zhì)控點(diǎn)名稱)、Content(質(zhì)控點(diǎn)內(nèi)容)、Point(空間點(diǎn)坐標(biāo))、Index(質(zhì)控點(diǎn)序號(hào))。

2 功能設(shè)計(jì)與實(shí)現(xiàn)

2.1 主要功能

根據(jù)用戶主要需求Web應(yīng)用設(shè)計(jì)并開發(fā)了以下功能模塊。

1)FPS(每秒傳輸幀數(shù))統(tǒng)計(jì)模塊。主要用于實(shí)時(shí)顯示動(dòng)態(tài)畫面的每秒傳輸幀數(shù)，以衡量三維模型顯示的流暢度。

2)三維模型瀏覽模塊。主要用于展示焊接構(gòu)架的三維模型，當(dāng)用戶點(diǎn)擊或觸摸時(shí)可實(shí)現(xiàn)平移、旋轉(zhuǎn)、放縮功能。

3)質(zhì)控點(diǎn)查看模塊。當(dāng)用戶點(diǎn)擊模型中質(zhì)控標(biāo)記點(diǎn)時(shí)，展示該質(zhì)控點(diǎn)的名稱和詳細(xì)內(nèi)容。

4)質(zhì)控點(diǎn)添加模塊。當(dāng)用戶點(diǎn)擊模型上某點(diǎn)時(shí)，可彈出質(zhì)控點(diǎn)名城管及詳細(xì)內(nèi)容添加界面。

2.2 功能實(shí)現(xiàn)

2.2.1 三維模型瀏覽模塊

三維模型是質(zhì)量控制點(diǎn)的呈現(xiàn)載體，三維模型瀏覽模塊是Web應(yīng)用的核心模塊。該模塊功能實(shí)現(xiàn)的主要代碼如下:

1)創(chuàng)建基本組件。

//創(chuàng)建相機(jī)

camera=new THREE.PerspectiveCamera(55，window.innerWidth / window.innerHeight，1，5 000)；

camera.position.set(500，500，1 200)；

//創(chuàng)建光源

var lights=[]；

lights[0].position.set(1 000，2 000，1 000)；

lights[1].position.set(-1 000，-2 000，-1 000)；

2)人機(jī)交互控制器設(shè)置。

function initControl(){

controls=new THREE.OrbitControls(camera，renderer.domElement)；

//設(shè)置構(gòu)架模型旋轉(zhuǎn)速度

controls.rotateSpeed=0.25；

//設(shè)置相機(jī)平移

controls.enablePan=true；}

2.2.2 質(zhì)量控制點(diǎn)添加模塊

質(zhì)量控制點(diǎn)添加模塊應(yīng)實(shí)現(xiàn)鼠標(biāo)雙擊(或觸屏雙擊)后彈出質(zhì)量控制點(diǎn)添加提示框，信息添加后保存至數(shù)據(jù)庫。

質(zhì)量控制點(diǎn)添加模塊功能實(shí)現(xiàn)的邏輯為：鼠標(biāo)雙擊某處后，記錄相機(jī)位置，定義一個(gè)注解。在頁面創(chuàng)建標(biāo)簽并綁定，再添加樣式和事件。

1)獲取鼠標(biāo)點(diǎn)擊點(diǎn)的位置坐標(biāo)。

mouse.x=(event.clientX/renderer.domElement.clientWidth)*2-1；

mouse.y=-(event.clientY/renderer.domElement.clientHeight)*2+1；

2)添加質(zhì)控點(diǎn)名稱及詳細(xì)信息。

pointList.push(div)；

var particle=new THREE.Sprite()；

meshList.push(particle)；

particle.position.copy(m_tpoint)；

particle.scale.x=particle.scale.y=5；

scene.add(particle)；

pointIndex++；

3)保存質(zhì)控點(diǎn)相關(guān)信息。

if(parseInt(msg.code)==1)

{$(′#myModal′).modal(′hide′)；alert("保存成功")；initAnnotation(title，content)；}

else{

$('#myModal′).modal(′hide′)；

initAnnotation(title，content)；

alert("保存失敗")；}

3 結(jié)語

使用three.js框架，運(yùn)用HTML及CSS網(wǎng)頁開發(fā)語言，利用Tomcat輕量型服務(wù)器和mysql數(shù)據(jù)庫技術(shù)，開發(fā)了基于WebGL 3D繪圖協(xié)議的轉(zhuǎn)向架焊接構(gòu)架質(zhì)量控制點(diǎn)三維可視化Web應(yīng)用，且具備數(shù)據(jù)實(shí)時(shí)性、高級(jí)渲染性、人機(jī)交互性和模型可擴(kuò)展性，實(shí)現(xiàn)了質(zhì)量控制點(diǎn)的數(shù)字化查詢、存儲(chǔ)、統(tǒng)計(jì)分析與三維可視化管理。