开场白：为什么要把上位机搬进浏览器

说实话，传统的上位机界面太呆板。

一堆数字和灯泡，操作员盯着眼睛dou要酸。

哈哈，我跟你讲，搬到浏览器里模型Neng动、颜色Neng变，那感觉简直爽翻天。

咱就是说这不光是“好kan”，还是“省事”。

懂的dou懂，远程监控、跨平台、随时随地打开，就是这么香。

整体架构：从 PLC 到 Three.js 的血脉相连

先把整个数据流给理清楚。

PLC → OPC-UA/Modbus → 上位机 → WebSocket 桥接层 → 浏览器← 这条线就是我们的命脉。

别怕，这里没有魔法，只是几段代码和协议的组合。

C# 那边：DigitalTwinBridge

public class DigitalTwinBridge : IDisposable

负责把上位机内部的状态序列化成 JSON，然后塞进 WebSocket。

不对不对，我说错了是把对象转成 string 再发出去。

关键点：

. 反射加载第三方 DLL别硬写全名，用特征匹配防止供应商改名。

. 心跳保活每 5 秒 ping 一下不然浏览器会掉线。

. 错误日志写到本地文件，后期排查神器。

前端那块：useWebSocketBridge.ts

const ws = new WebSocket;

收到消息后直接映射到模型属性：

ws.onmessage =  => {
  const data = JSON.parse;
  if  {
    const model = scene.getObjectByName;
    // 坐标系转换
    model.position.set;
  }
};

这个映射过程hen容易出错——坐标系不统一、单位不匹配。咱们得提前约定好，比如全部用毫米、右手坐标系。

联调坑点大盘点 . “连接成功，却收不到数据”

我第一次碰到这种情况，还以为是防火墙拦了。

结果是上位机在启动时把 WebSocket 服务放在了 Form_Load 之前，导致 DLL 还没加载完就开始推送空数据。

解决办法：

protected override void OnLoad {
    base.OnLoad;
    Bridge.Initialize; // 确保所有管理器准备好
    Bridge.Start;
}

. “模型卡顿，偶尔跳回原点”

害，这个坑真的让人抓狂。

根本原因是前端收到的轴位置是整数，而我们用了浮点运算Zuo平滑插值，却忘了除以缩放因子。

一句话解决：

const mapped = raw / 1000; // 毫米转米
model.position.lerp, 0.1);

. “IO 状态不geng新”

I/O 消息其实是走另一个频道 'io-update'，但我在前端只监听了 'axis-update'。

不对，我应该把两个事件dou挂上去啊！于是加上：

ws.addEventListener('message', ev => {
   const d = JSON.parse;
   if  updateIO;
});

性Neng调优小技巧

. 节流发送频率: 上位机每秒推送 100 条轴数据？太浪费带宽。我们改成每帧Zui多发送一次只推变化的轴。

. 二进制传输: 用 protobuf 或 MessagePack 把 JSON 换成二进制，Ke以省掉约 30% 的流量。咱们项目里暂时用不上，但留个口子以后升级也行。

. 前端渲染批处理: 把所有轴geng新收集进数组，一次性遍历geng新模型，而不是每条消息dou调用一次渲染循环。

真实案例回顾：从“kan表格”到“kan镜子”

某制造企业原来用 WinForms kan PLC 状态，每天要手动记录异常时间戳。我们把它们搬到浏览器里用 Three.js 搭建产线全景模型，一键切换实时视角。

"M2轴异常" 的告警弹出来后系统自动拉取过去两分钟的历史轨迹回放——像行车记录仪一样刷屏。运营人员只需点播放，就kan到气缸提前退回导致夹爪空抓的全过程。说实话，这效率提升直接让维修时间从半天缩短到半小时以内！哈哈，你们想想，这种体验多爽？

联调检查清单

- ✅ DLL 路径正确且可访问；

- ✅ WebSocket 地址与端口一致；

- ✅ 心跳机制开启；

\

- ✅ 数据协议双方同步；

\

- ✅ 坐标系和单位统一；

\

- ✅ 前端错误捕获日志打开；

\

- ✅ 网络环境弱网测试通过；

\

- ✅ 部署环境使用相同 .NET Runtime 与 Node 环境版本。

\

给你的产线装一面会说话的镜子

别再纠结于“上位机只Neng跑 WinForm”，现代工业Yi经Ke以把数字孪生搬进浏览器，让每个人douNeng直观kan到设备“活着”。

"这套系统真的好用"——听到客户这样说我心里那个激动啊！哈哈，你也赶紧去试试吧，别等到明年才后悔错过这波技术红利。你懂的，这可是工业4.0的大趋势呀！ Ru果还有啥疑问或者踩坑经验想聊，咱们随时开聊~祝你联调顺利，模型永远不卡顿！

---