機台 3D 模擬動畫系統

背景

在自動化設備公司裡，機台的動作流程通常只存在於 PLC 程式碼和工程師的腦中。當產線出問題時，操作員只能看到 HMI 上的警報代碼，無法直覺地理解機台當前的實際狀態。業務人員在向客戶展示機台能力時，也只能靠靜態的規格書和現場參觀。

這個專案的目標是建立一套 Web-based 的 3D 模擬系統，讓機台的動作可以在瀏覽器中即時視覺化呈現。

架構

後端：ASP.NET Blazor Server

選擇 Blazor Server 而非 Blazor WASM，因為需要即時存取工廠內部的機台資料。透過 SignalR 的雙向連線，後端持續推送機台狀態到前端。

資料來源：

• TwinCAT ADS：直接讀取 PLC 變數（軸位置、IO 狀態、程序步序）
• OPC UA：作為通用的工業資料介面備案

前端：Three.js 3D 場景

機台的 3D 模型從 Blender 匯出為 GLB 格式。每個可動部件（滑台、夾爪、旋轉軸）都是獨立的 mesh，透過命名約定與 PLC 變數對應。

動畫邏輯：

• 後端推送軸位置數值（例如 X 軸 = 125.3mm）
• 前端將數值映射為 Three.js 物件的 position/rotation
• 使用 requestAnimationFrame 進行插值平滑化，避免因為資料更新頻率（約 100ms）造成的跳動

運鏡與互動

• 預設自動運鏡：根據當前執行步序自動切換到最佳觀察角度
• 自由模式：使用者可以用 OrbitControls 自由旋轉、縮放
• 點選部件高亮：點擊某個部件時顯示其對應的 PLC 變數名稱和即時數值

技術挑戰

即時性與視覺平滑的取捨

PLC 資料的更新週期是 1ms，但透過 TwinCAT ADS over TCP 傳到 Web 端後，實際可用的更新頻率約 50-100ms。直接套用會造成明顯的動作不連續。

解法是在前端做線性插值：每次收到新的目標位置後，用 lerp 在幾個 frame 內平滑過渡到目標值。代價是引入約 100ms 的視覺延遲，但對於監控和展示用途來說可以接受。

模型與 PLC 變數的對應

建立了一套命名約定：Blender 中的物件名稱以 PLC_ 前綴加上 ADS symbol 路徑。例如 PLC_MAIN.Axis[1].ActPos 對應 X 軸的當前位置。載入 GLB 後自動解析所有 PLC_ 開頭的物件，建立映射表。

成果

• 操作員可在 iPad 上即時查看機台 3D 動態，問題排查效率提升約 40%
• 業務展示從「帶客戶到工廠」變成「打開瀏覽器就能看」，縮短了銷售流程
• 後續被三條產線採用，成為標準監控介面的一部分