基于Three.js 的智能制造車間數(shù)字孿生系統(tǒng)的網(wǎng)頁編程設(shè)計

韓慧彥

（山西省財政科學(xué)研究院，山西 太原 030006）

引言

目前，現(xiàn)代化機加工車間已廣泛應(yīng)用各類數(shù)控車床、鏜銑床、磨床、沖床、加工中心等先進精密設(shè)備實現(xiàn)各類零部件的自動化生產(chǎn)制造[1-2]。同時，通過自動導(dǎo)航小車（Automated Guided Vehicle，AGV）、送料料機器人、視覺定位系統(tǒng)、全自動換刀裝置等設(shè)備實現(xiàn)機加工生產(chǎn)整線的全自動高質(zhì)量連續(xù)不間斷生產(chǎn)[3-4]。隨著工業(yè)物聯(lián)網(wǎng)、智能感知、大數(shù)據(jù)、云計算、機器學(xué)習(xí)等人工智能技術(shù)的迅猛發(fā)展[5-6]，在以機器代人的基礎(chǔ)上實現(xiàn)信息化、網(wǎng)絡(luò)化和智能化的高精尖制造，能夠進一步提升生產(chǎn)效能和產(chǎn)品質(zhì)量，打造簡單靈活、高效柔性的智能制造體系。

在工業(yè)物聯(lián)網(wǎng)（cyber-physical system,CPS）的基礎(chǔ)上，數(shù)字孿生系統(tǒng)（digital twin system,DTS）通過在網(wǎng)頁構(gòu)建設(shè)備實體的虛擬鏡像模型，并借助各類帶網(wǎng)絡(luò)接口的傳感器采集并傳遞設(shè)備的實時工況、狀態(tài)和位置等數(shù)據(jù)，將實體的真實表現(xiàn)通過孿生體進行動態(tài)可視化[7-8]。DTS 不僅可以替代裝備實體實現(xiàn)網(wǎng)絡(luò)可視化監(jiān)控，并通過機器學(xué)習(xí)等智能數(shù)據(jù)分析技術(shù)，提出設(shè)備工藝參數(shù)和產(chǎn)線整體架構(gòu)的優(yōu)化、診斷等方案[9-10]。盡管目前DTS 已在國內(nèi)眾多行業(yè)得到應(yīng)用，但大部分集中在外觀和動畫的改進，由2D 組態(tài)變換為3D動態(tài)顯示等[11-12]。較少涉及從幾何模型、物理模型到數(shù)據(jù)模型的精細化構(gòu)建、分析和優(yōu)化，尤其對于高速數(shù)控機床、高端鍛壓成形設(shè)備、全自動產(chǎn)線等復(fù)雜高端裝備制造領(lǐng)域。

本文對數(shù)控機床設(shè)備及其智能產(chǎn)線的DTS 網(wǎng)頁編程設(shè)計方法進行研究。首先對數(shù)控加工中心、六軸機械臂等設(shè)備，運用基于WebGL 的Three.js 引擎庫，建立設(shè)備的網(wǎng)頁3D 可視化孿生體模型，并為模擬設(shè)備的實際運行提供動態(tài)數(shù)據(jù)接口。在此基礎(chǔ)上，基于Node.js 搭建的網(wǎng)頁后臺服務(wù)器，存儲物聯(lián)網(wǎng)存儲設(shè)備傳感器實時發(fā)送的各項狀態(tài)數(shù)據(jù)。然后前端網(wǎng)頁通過Ajax.js 調(diào)用后臺服務(wù)器中的JSON 數(shù)據(jù)，由動態(tài)數(shù)據(jù)接口驅(qū)動3D 模型，同時實時顯示在網(wǎng)頁數(shù)據(jù)面板模塊中對各設(shè)備的運行數(shù)據(jù)。

1 DTS 網(wǎng)頁編程技術(shù)

網(wǎng)頁編程通常分為前端和后端兩部分。前端指網(wǎng)頁的顯示界面；后端服務(wù)器為前端提供各類應(yīng)用程序接口（Application Program Interface，API）和存儲數(shù)據(jù)庫；前端頁面通過調(diào)用API 進行事件程序響應(yīng)和數(shù)據(jù)交互。構(gòu)建制造裝備及產(chǎn)線的DTS，在前端開發(fā)中，需要在網(wǎng)頁上顯示裝備的3D 虛擬模型以代表制造車間中實際設(shè)備。在后端開發(fā)中，需要在后臺服務(wù)器接收并存儲設(shè)備傳感器實時采集的狀態(tài)數(shù)據(jù)。下面先介紹前后端的各種編程技術(shù)。

1.1 Three.js 3D 引擎

Three.js 是在WebGL 基礎(chǔ)上的Javascript 開源框架，將WebGL 的API 抽象封裝，使模型拆解為網(wǎng)格和材質(zhì)，場景拆解為相機和光源，并優(yōu)化了渲染的方法、順序和性能。Three.js 服務(wù)器設(shè)置在本地，跨平臺使用者只需安裝瀏覽器即可運行系統(tǒng)。

1.2 Node.js 框架和工具

Node.js 是運行在服務(wù)端的JavaScript，通過其中包管理器npm 提供的數(shù)量龐大第三方軟件包，能大大簡化開發(fā)過程。

1.3 JSON 數(shù)據(jù)

前端網(wǎng)頁實時更新設(shè)備信息以及動畫化顯示，需要獲取存儲在服務(wù)器的設(shè)備狀態(tài)數(shù)據(jù)。JavaScript 對象表示法（JavaScript Object Notation，JSON）是一種儲存交互文本信息的語法，用于與服務(wù)器端交互數(shù)據(jù)，類似于可擴展標記語言（eXtensible Markup Language，XML），但比XML 更小更快更易解析。

2 基于Three.js 的車間設(shè)備3D 網(wǎng)頁建模

采用Three.js 構(gòu)建網(wǎng)頁3D 模型的整體步驟如圖1 所示。首先創(chuàng)建場景，在場景中添加光源，創(chuàng)建或?qū)胪獠磕Ｐ?，并為模型配置材質(zhì)。然后為場景配置模擬相機進行投影，最后利用渲染器將相機投影出的場景渲染到網(wǎng)頁中。

2.1 創(chuàng)建場景

Three.js 首先需要創(chuàng)建虛擬場景，作為相機、燈光、模型、渲染器等其他元素的載體。需要創(chuàng)建場景變量及初始化構(gòu)造函數(shù)，同時可配置坐標、網(wǎng)格等元素。

2.2 設(shè)置虛擬光源

為了更好的渲染場景和顯示模型，通常需要設(shè)置不同的光源和及其強度參數(shù)。Three.js 可設(shè)置環(huán)境光、點光源、平行光等多種光源。環(huán)境光沒有特定光照方向，以整體改變場景明暗為主，但強度較弱。點光源從某一個點向外均勻發(fā)散，在不同位置接收的光照強度不同。平行光是一組設(shè)置在無限遠的平行光線。本文采用三種光源相互配合創(chuàng)建虛擬光源，能夠使模型在網(wǎng)頁中顯示的更加真實明亮。

2.3 導(dǎo)入3D 模型

Three.js 以Mesh 型式構(gòu)建模型，包含幾何體Geometry 和材質(zhì)Material 兩部分，Geometry 由一系列頂點構(gòu)成模型骨架，Material 定義了附著在骨架上的皮膚。數(shù)控機床設(shè)備結(jié)構(gòu)復(fù)雜，直接在three.js 由頂點構(gòu)建其3D 模型難度較高。為此，可通過三維軟件進行建模，并轉(zhuǎn)換為.stl,.obj,.gltf 等Three.js 支持導(dǎo)入的文件格式，由對應(yīng)格式加載器（Loader）把模型文件轉(zhuǎn)化為Three.js 對象結(jié)構(gòu)。本文采用Pro/Engineering 分別構(gòu)建車間設(shè)備的3D 模型，并統(tǒng)一轉(zhuǎn)化為.obj 頂點文件，同時會導(dǎo)出一個.mtl 材質(zhì)文件，分別OBJLoader 和MTLLoader 由進行加載。如圖2-1 所示為數(shù)控加工中心的.obj 模型，圖2-2 所示為加載到網(wǎng)頁的three.js模型。

2.4 設(shè)置虛擬相機

Three.js 模型要在網(wǎng)頁上顯示，采用的是照相機的原理。設(shè)置了場景、模型和燈光后，就需要一臺虛擬相機將場景元素投影到網(wǎng)頁上。除了設(shè)置相機位置及其投影角度外，還需要設(shè)置投影方式。常用的Three.js投影方式有正投影相機OrthographicCamera 和透視投影相機PerspectiveCamera。正投影的投影模型大小與距離無關(guān)，更能表現(xiàn)模型的真實結(jié)構(gòu)尺寸；透視投影的模型大小除了與角度有關(guān)，還和距離相關(guān)。圖3 比較了數(shù)控加工中心系列產(chǎn)線的兩種相機投影效果，可見采用正投影相機更能真實展現(xiàn)制造車間設(shè)備的運行工況。

2.5 渲染器渲染圖像

渲染器的作用類似于拍照和沖印動作。首先初始化設(shè)置渲染到網(wǎng)頁上的尺寸和位置、范圍背景顏色等。網(wǎng)頁上執(zhí)行渲染需要動態(tài)更新，因此除了初始化構(gòu)造函數(shù)外，還需要一個可作為Animate 部分的渲染構(gòu)造函數(shù)。

重復(fù)上述Three.js 程序模塊分別對數(shù)控車床、磨床、沖床、送料機械臂、AGV 小車等設(shè)備進行建模，并根據(jù)實際空間和運行工況對其位置等參數(shù)進行設(shè)置。通過網(wǎng)頁訪問其整體場景，如下頁圖4 所示。可見通過three.js 可構(gòu)建完成智能制造車間的整體DTS 模型。

3 基于Node.js 的車間設(shè)備數(shù)據(jù)服務(wù)器

3.1 Node.js 數(shù)據(jù)交互

DTS 除了模型孿生，為了實時監(jiān)測車間設(shè)備運行工況，還需要由設(shè)備數(shù)據(jù)驅(qū)動網(wǎng)頁模型實現(xiàn)動態(tài)化并實時顯示數(shù)值指標。因此在設(shè)備端，實現(xiàn)CPS 升級的方式是在設(shè)備上增加各類傳感器，實時采集設(shè)備的運行狀態(tài)數(shù)據(jù)。通過高速寬帶網(wǎng)絡(luò)鏈接，將狀態(tài)數(shù)據(jù)存儲在服務(wù)器數(shù)據(jù)庫中，并在網(wǎng)頁端實時顯示。本文采用node.js 提供的Express 工具框架快速簡潔的搭建本地靜態(tài)服務(wù)器。

Node.js 可通過npm 安裝mysql 驅(qū)動與sql 數(shù)據(jù)庫進行連接，存在和讀取車間設(shè)備的各項數(shù)據(jù)。對mysql 的數(shù)據(jù)庫操作本文不在贅述。在前后端JSON數(shù)據(jù)交互中，采用AJAX（Asynchronous JavaScript and XML）技術(shù)，實現(xiàn)可以在不重新加載網(wǎng)頁的情況下更新部分網(wǎng)頁內(nèi)容。通過AJAX 的XMLHttpRequest對象，能夠在滿足HTTP 情況下，向遠程服務(wù)器發(fā)送請求。服務(wù)器端響應(yīng)就緒時返回JSON 數(shù)據(jù)，使用JSON.parse()將數(shù)據(jù)轉(zhuǎn)換為JavaScript 對象直接載入網(wǎng)頁中；在向服務(wù)器發(fā)送數(shù)據(jù)時，采用JSON.stringify()將JavaScript 對象轉(zhuǎn)換為JSON 數(shù)據(jù)。

3.2 網(wǎng)頁前端數(shù)據(jù)表單

在網(wǎng)頁前端分別對車間各設(shè)備的運行狀態(tài)數(shù)據(jù)進行顯示。通過HTML 創(chuàng)建網(wǎng)頁數(shù)據(jù)表格并寫入實時采集的數(shù)據(jù)，再使用CSS 層疊樣式表調(diào)整表格屬性。例如對數(shù)控加工中心在各驅(qū)動電機及各軸進給位置進行實時顯示，如圖5 所示。

4 智能制造車間DTS 的網(wǎng)頁布局

本文中將頁面分為三部分，如圖6 所示，左半部分為可視化界面，展示了構(gòu)建的鍛壓設(shè)備的基本運行狀況；右半部分為一般數(shù)據(jù)和報表界面，與后臺服務(wù)器交互更新車間整體數(shù)據(jù)；頁面下半部分為設(shè)備運行狀況監(jiān)測界面，實時接收后臺服務(wù)器的數(shù)據(jù)，顯示設(shè)備的運行狀況。

5 結(jié)語

建立智能制造車間生產(chǎn)線的數(shù)字孿生系統(tǒng)，通過實時遠程監(jiān)控和數(shù)據(jù)分析預(yù)測，有利于提高設(shè)備產(chǎn)線的生產(chǎn)效率、降低生產(chǎn)成本、優(yōu)化產(chǎn)線結(jié)構(gòu)。本文在網(wǎng)頁編程技術(shù)的基礎(chǔ)上，通過Three.js 引擎導(dǎo)入鍛壓設(shè)備的3D 網(wǎng)頁模型，并對投影光源、相機、渲染器等要素進行設(shè)置，使鍛壓設(shè)備的孿生模型3D 實時可視化顯示。在此基礎(chǔ)上搭建的DTS 的后臺數(shù)據(jù)庫，利用Node.js 創(chuàng)建了前后端的連接，用Ajax 實現(xiàn)不刷新頁面更新服務(wù)器端數(shù)據(jù)功能。從而創(chuàng)建了較為完整的Web 前端頁面3D 顯示、后端數(shù)據(jù)庫以及前后端的交換。由于數(shù)控機床設(shè)備結(jié)構(gòu)復(fù)雜，狀態(tài)自由度多，目前只能實現(xiàn)較為簡單的動畫模擬設(shè)備實際運行工況。在后續(xù)開發(fā)升級中，將逐步完善設(shè)備three.js 模型的數(shù)據(jù)驅(qū)動動態(tài)化運行。并對數(shù)據(jù)面板等模塊進行優(yōu)化和豐富。