基于WebGL的焊接構架質量控制點三維可視化管理研究

孫可心，鐘宏遠，呂光宙，商 浩

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

0 引言

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

質量控制點指在質量管理活動中為了保證生產作業過程質量而指定的重要管控對象、核心部位或問題頻發環節。質量控制點以重點管理為原則，通過對生產線中重點對象的管控，保證生產線產品質量的穩定性。

轉向架焊接構架質量控制點因項目、車型差異而數量較多。傳統質量控制點管理媒介多為紙質表單或電子表單，不便于數據的信息化查詢、存儲、統計分析。傳統媒介僅能以文字或圖片描述相關質量控制點對應的位置信息，難以對其進行精確和直觀的描述。以焊接構架質量控制點為管理對象，控制點三維可視化管理為目標，基于WebGL 3D繪圖協議，利用Tomcat輕量型服務器和mysql數據庫技術，開發了焊接構架質量控制點三維可視化管理Web應用，實現了焊接構架質量控制點的數字化查詢、存儲、統計分析與三維可視化管理。

1 設計與分析

1.1 需求分析

研究對象為焊接構架質量控制點，Web應用主要使用者為質量管理人員、技術人員、一線操作員工、實習人員等。質量管理人員、技術人員亟需能夠實現控制點數字化存儲、查詢和統計分析的輕量級Web應用。一線操作員工、實習人員亟需能夠實現控制點三維可視化展示、瀏覽、學習的平臺。

Web應用采用B/S架構，通過系統瀏覽器查看焊接構架質量控制點在其三維模型中的分布情況和詳細內容。質量管理人員、技術人員可通過點擊焊接構架三維模型中的某一空間位置，添加或刪除質控點。一線操作員工、實習人員可通過鼠標或觸摸屏對模型進行旋轉、平移、放縮等對模型進行瀏覽，通過點擊標記點實現質量控制項點的實時在線查看。Web應用可通過企業內部網絡部署，具備固定、移動設備各平臺兼容性和控制點數據保密性。

1.2 數據設計

Web應用主要數據呈現類型為三維模型、文本及圖片，并且在查看、添加新質控點模塊使用數據庫實現了質控點信息查詢、新建功能。

1.3 數據庫設計

根據質控點的實體屬性圖，創建質控點分布表，包括如下字段：ID(標識)、Title(質控點名稱)、Content(質控點內容)、Point(空間點坐標)、Index(質控點序號)。

2 功能設計與實現

2.1 主要功能

根據用戶主要需求Web應用設計并開發了以下功能模塊。

1)FPS(每秒傳輸幀數)統計模塊。主要用于實時顯示動態畫面的每秒傳輸幀數，以衡量三維模型顯示的流暢度。

2)三維模型瀏覽模塊。主要用于展示焊接構架的三維模型，當用戶點擊或觸摸時可實現平移、旋轉、放縮功能。

3)質控點查看模塊。當用戶點擊模型中質控標記點時，展示該質控點的名稱和詳細內容。

4)質控點添加模塊。當用戶點擊模型上某點時，可彈出質控點名城管及詳細內容添加界面。

2.2 功能實現

2.2.1 三維模型瀏覽模塊

三維模型是質量控制點的呈現載體，三維模型瀏覽模塊是Web應用的核心模塊。該模塊功能實現的主要代碼如下:

1)創建基本組件。

//創建相機

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

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

//創建光源

var lights=[]；

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

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

2)人機交互控制器設置。

function initControl(){

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

//設置構架模型旋轉速度

controls.rotateSpeed=0.25；

//設置相機平移

controls.enablePan=true；}

2.2.2 質量控制點添加模塊

質量控制點添加模塊應實現鼠標雙擊(或觸屏雙擊)后彈出質量控制點添加提示框，信息添加后保存至數據庫。

質量控制點添加模塊功能實現的邏輯為：鼠標雙擊某處后，記錄相機位置，定義一個注解。在頁面創建標簽并綁定，再添加樣式和事件。

1)獲取鼠標點擊點的位置坐標。

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

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

2)添加質控點名稱及詳細信息。

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)保存質控點相關信息。

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

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

else{

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

initAnnotation(title，content)；

alert("保存失敗")；}

3 結語

使用three.js框架，運用HTML及CSS網頁開發語言，利用Tomcat輕量型服務器和mysql數據庫技術，開發了基于WebGL 3D繪圖協議的轉向架焊接構架質量控制點三維可視化Web應用，且具備數據實時性、高級渲染性、人機交互性和模型可擴展性，實現了質量控制點的數字化查詢、存儲、統計分析與三維可視化管理。