基于Three.js 的智能制造車間數字孿生系統的網頁編程設計

韓慧彥

（山西省財政科學研究院，山西 太原 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 模型的數據驅動動態化運行。并對數據面板等模塊進行優化和豐富。