韩慧彦
（山西省财政科学研究院，山西 太原 030006）
引言目前，现代化机加工车间已广泛应用各类数控车床、镗铣床、磨床、冲床、加工中心等先进精密设备实现各类零部件的自动化生产制造[1-2]。同时，通过自动导航小车（Automated Guided Vehicle，AGV）、送料料机器人、视觉定位系统、全自动换刀装置等设备实现机加工生产整线的全自动高质量连续不间断生产[3-4]。随着工业物联网、智能感知、大数据、云计算、机器学习等人工智能技术的迅猛发展[5-6]，在以机器代人的基础上实现信息化、网络化和智能化的高精尖制造，能够进一步提升生产效能和产品质量，打造简单灵活、高效柔性的智能制造体系。
在工业物联网（cyber-physical system,CPS）的基础上，数字孪生系统（digital twin system,DTS）通过在网页构建设备实体的虚拟镜像模型，并借助各类带网络接口的传感器采集并传递设备的实时工况、状态和位置等数据，将实体的真实表现通过孪生体进行动态可视化[7-8]。DTS 不仅可以替代装备实体实现网络可视化监控，并通过机器学习等智能数据分析技术，提出设备工艺参数和产线整体架构的优化、诊断等方案[9-10]。尽管目前DTS 已在国内众多行业得到应用，但大部分集中在外观和动画的改进，由2D 组态变换为3D动态显示等[11-12]。较少涉及从几何模型、物理模型到数据模型的精细化构建、分析和优化，尤其对于高速数控机床、高端锻压成形设备、全自动产线等复杂高端装备制造领域。
本文对数控机床设备及其智能产线的DTS 网页编程设计方法进行研究。首先对数控加工中心、六轴机械臂等设备，运用基于WebGL 的Three.js 引擎库，建立设备的网页3D 可视化孪生体模型，并为模拟设备的实际运行提供动态数据接口。在此基础上，基于Node.js 搭建的网页后台服务器，存储物联网存储设备传感器实时发送的各项状态数据。然后前端网页通过Ajax.js 调用后台服务器中的JSON 数据，由动态数据接口驱动3D 模型，同时实时显示在网页数据面板模块中对各设备的运行数据。
1 DTS 网页编程技术网页编程通常分为前端和后端两部分。前端指网页的显示界面；后端服务器为前端提供各类应用程序接口（Application Program Interface，API）和存储数据库；前端页面通过调用API 进行事件程序响应和数据交互。构建制造装备及产线的DTS，在前端开发中，需要在网页上显示装备的3D 虚拟模型以代表制造车间中实际设备。在后端开发中，需要在后台服务器接收并存储设备传感器实时采集的状态数据。下面先介绍前后端的各种编程技术。
1.1 Three.js 3D 引擎Three.js 是在WebGL 基础上的Javascript 开源框架，将WebGL 的API 抽象封装，使模型拆解为网格和材质，场景拆解为相机和光源，并优化了渲染的方法、顺序和性能。Three.js 服务器设置在本地，跨平台使用者只需安装浏览器即可运行系统。
1.2 Node.js 框架和工具Node.js 是运行在服务端的JavaScript，通过其中包管理器npm 提供的数量庞大第三方软件包，能大大简化开发过程。
1.3 JSON 数据前端网页实时更新设备信息以及动画化显示，需要获取存储在服务器的设备状态数据。JavaScript 对象表示法（JavaScript Object Notation，JSON）是一种储存交互文本信息的语法，用于与服务器端交互数据，类似于可扩展标记语言（eXtensible Markup Language，XML），但比XML 更小更快更易解析。
2 基于Three.js 的车间设备3D 网页建模采用Three.js 构建网页3D 模型的整体步骤如图1 所示。首先创建场景，在场景中添加光源，创建或导入外部模型，并为模型配置材质。然后为场景配置模拟相机进行投影，最后利用渲染器将相机投影出的场景渲染到网页中。
2.1 创建场景Three.js 首先需要创建虚拟场景，作为相机、灯光、模型、渲染器等其他元素的载体。需要创建场景变量及初始化构造函数，同时可配置坐标、网格等元素。
2.2 设置虚拟光源为了更好的渲染场景和显示模型，通常需要设置不同的光源和及其强度参数。Three.js 可设置环境光、点光源、平行光等多种光源。环境光没有特定光照方向，以整体改变场景明暗为主，但强度较弱。点光源从某一个点向外均匀发散，在不同位置接收的光照强度不同。平行光是一组设置在无限远的平行光线。本文采用三种光源相互配合创建虚拟光源，能够使模型在网页中显示的更加真实明亮。
2.3 导入3D 模型Three.js 以Mesh 型式构建模型，包含几何体Geometry 和材质Material 两部分，Geometry 由一系列顶点构成模型骨架，Material 定义了附着在骨架上的皮肤。数控机床设备结构复杂，直接在three.js 由顶点构建其3D 模型难度较高。为此，可通过三维软件进行建模，并转换为.stl,.obj,.gltf 等Three.js 支持导入的文件格式，由对应格式加载器（Loader）把模型文件转化为Three.js 对象结构。本文采用Pro/Engineering 分别构建车间设备的3D 模型，并统一转化为.obj 顶点文件，同时会导出一个.mtl 材质文件，分别OBJLoader 和MTLLoader 由进行加载。如图2-1 所示为数控加工中心的.obj 模型，图2-2 所示为加载到网页的three.js模型。
2.4 设置虚拟相机Three.js 模型要在网页上显示，采用的是照相机的原理。设置了场景、模型和灯光后，就需要一台虚拟相机将场景元素投影到网页上。除了设置相机位置及其投影角度外，还需要设置投影方式。常用的Three.js投影方式有正投影相机OrthographicCamera 和透视投影相机PerspectiveCamera。正投影的投影模型大小与距离无关，更能表现模型的真实结构尺寸；透视投影的模型大小除了与角度有关，还和距离相关。图3 比较了数控加工中心系列产线的两种相机投影效果，可见采用正投影相机更能真实展现制造车间设备的运行工况。
2.5 渲染器渲染图像渲染器的作用类似于拍照和冲印动作。首先初始化设置渲染到网页上的尺寸和位置、范围背景颜色等。网页上执行渲染需要动态更新，因此除了初始化构造函数外，还需要一个可作为Animate 部分的渲染构造函数。
重复上述Three.js 程序模块分别对数控车床、磨床、冲床、送料机械臂、AGV 小车等设备进行建模，并根据实际空间和运行工况对其位置等参数进行设置。通过网页访问其整体场景，如下页图4 所示。可见通过three.js 可构建完成智能制造车间的整体DTS 模型。
3 基于Node.js 的车间设备数据服务器3.1 Node.js 数据交互DTS 除了模型孪生，为了实时监测车间设备运行工况，还需要由设备数据驱动网页模型实现动态化并实时显示数值指标。因此在设备端，实现CPS 升级的方式是在设备上增加各类传感器，实时采集设备的运行状态数据。通过高速宽带网络链接，将状态数据存储在服务器数据库中，并在网页端实时显示。本文采用node.js 提供的Express 工具框架快速简洁的搭建本地静态服务器。
Node.js 可通过npm 安装mysql 驱动与sql 数据库进行连接，存在和读取车间设备的各项数据。对mysql 的数据库操作本文不在赘述。在前后端JSON数据交互中，采用AJAX（Asynchronous JavaScript and XML）技术，实现可以在不重新加载网页的情况下更新部分网页内容。通过AJAX 的XMLHttpRequest对象，能够在满足HTTP 情况下，向远程服务器发送请求。服务器端响应就绪时返回JSON 数据，使用JSON.parse()将数据转换为JavaScript 对象直接载入网页中；在向服务器发送数据时，采用JSON.stringify()将JavaScript 对象转换为JSON 数据。
3.2 网页前端数据表单在网页前端分别对车间各设备的运行状态数据进行显示。通过HTML 创建网页数据表格并写入实时采集的数据，再使用CSS 层叠样式表调整表格属性。例如对数控加工中心在各驱动电机及各轴进给位置进行实时显示，如图5 所示。
4 智能制造车间DTS 的网页布局本文中将页面分为三部分，如图6 所示，左半部分为可视化界面，展示了构建的锻压设备的基本运行状况；右半部分为一般数据和报表界面，与后台服务器交互更新车间整体数据；页面下半部分为设备运行状况监测界面，实时接收后台服务器的数据，显示设备的运行状况。
5 结语建立智能制造车间生产线的数字孪生系统，通过实时远程监控和数据分析预测，有利于提高设备产线的生产效率、降低生产成本、优化产线结构。本文在网页编程技术的基础上，通过Three.js 引擎导入锻压设备的3D 网页模型，并对投影光源、相机、渲染器等要素进行设置，使锻压设备的孪生模型3D 实时可视化显示。在此基础上搭建的DTS 的后台数据库，利用Node.js 创建了前后端的连接，用Ajax 实现不刷新页面更新服务器端数据功能。从而创建了较为完整的Web 前端页面3D 显示、后端数据库以及前后端的交换。由于数控机床设备结构复杂，状态自由度多，目前只能实现较为简单的动画模拟设备实际运行工况。在后续开发升级中，将逐步完善设备three.js 模型的数据驱动动态化运行。并对数据面板等模块进行优化和丰富。
