基于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应用，且具备数据实时性、高级渲染性、人机交互性和模型可扩展性，实现了质量控制点的数字化查询、存储、统计分析与三维可视化管理。