工业数据可视化：使用活字格 AIcoding + Three.js 构建轻量化三维设备监控大屏

一份给制造业 IT/OT 负责人的「三维设备监控大屏」落地指南。 一、为什么我们又开始重新做监控大屏过去十年制造业砸过太多钱做数字化大屏一个 SCADA 看板动辄几十万项目周期3-6 个月上线即落后——UI 是冰冷的方块图设备和数据是两张皮改一个字段要走变更流程新接入一台设备要写一摞协议文档领导只想问一句“这台电机现在到底健不健康”——你却要花半天翻报表。到了 2026 年工厂老板要的不再是大屏而是一块能看见设备生命体征的活地图。一个设备 → 一个 3D 模型 → 一组实时流式数据 → 一目了然的健康度。当这件事从「软件项目」变成「一张活字格页面」整个行业的玩法就变了。这篇文章就用一个真实案例活字格 AIcoding Three.js带你把这条路走通。 二、整体架构从现场 PLC 到浏览器像素的完整链路下面是这套方案的真实落地架构活字格原生支持从设备采集到三维大屏的完整链路三层五段串起来就是一条「数据怎么从车间跑进大屏」的故事线一句话总结活字格把网关 ​ 数据库 ​ 队列 ​ 时序库 ​ 大屏整合到了同一个平台里。 三、成品长什么样直接上案例截图活字格构建 · 三维设备监控中心一眼能看到的 7 块价值顶部态势栏接入设备、正常、异常、通讯——一行字把现场净度交代完3D 主体区电机 联轴器 负载设备的完整建模视角可旋转、可聚焦、可剖切浮动数据标签转速、转矩、绕组温度、电机输出温度直接钉在模型对应位置——所见即所测设备列表卡底部 5 台设备一键跳转定位到对应 3D 模型设备状态卡设备状态 / 告警代码一眼可查实时参数卡6 个核心参数大字呈现超过阈值自动变红位置指令卡14 行遥测数据电压、电流、位置、扭矩、励磁……按字段分组排布。绿色 正常、红色 异常、超阈值自动闪烁——这是工厂老师傅最熟悉、也最买账的色彩语言。 四、技术实现拆解给开发者4.1 大屏前端React AI 单元格跑 Three.js大屏页面用的是活字格的 React AI 单元格——直接在单元格里写 React 组件内部嵌 Three.js 渲染 3D 场景。代码长这样关键点useDataSource(设备信息表)直接绑活字格业务库设备档案WebSocket 推 JSON 进props.pointUpdateJson触发局部刷新不需要整页轮询数据标签用anchorMap在 3D 模型上钉位置模型旋转时标签自动跟随。完整源码含 5 类设备的 Three.js 建模、漂浮标签、状态着色、OrbitControls请见文末获取方式。4.2 数据推送WebSocket不是 Ajax为什么用 WebSocket 而不是 AjaxAjax 轮询每秒打一次请求 → 100 台设备 × 20 个点位 每秒 2000 次查询数据库先扛不住WebSocket 长连接一次连接、持续推送延迟从秒级降到 100ms 以内设备掉线、告警触发时主动推前端永远拿到的都是最新心跳。4.3 设备采集活字格直接支持 OPC UA / Modbus TCP同样的逻辑换 Modbus TCP 也行活字格就是网关——不需要单独买 SCADA 软件 / 网关盒子 / Kepware。4.4 时序数据写 InfluxDB历史点位走 InfluxDB趋势、回看、OEE 报表全靠它4.5 队列MQTT 解耦设备和大屏设备 ↔ 后端用 MQTT 解耦设备只管发、谁爱消费谁消费设备协议变更不影响大屏新增大屏消费者不需要动采集端EMQX 自带历史回放新接入设备的历史数据一拉就到。4.6 告警服务端命令 阈值规则告警逻辑全在活字格服务端命令里实现规则可配置、可热改 五、这套方案的 6 个隐性优势协议兼容OPC UA / Modbus TCP / Modbus RTU / MQTT原生打通现场设备双写存储业务库给大屏用、InfluxDB 给时序分析用互不干扰实时推送WebSocket 长连接延迟 100ms前端再也不卡轻量化单台 NUC 跑 200 设备没问题GPU 占用 8%可演进今天 3D 模型明天数字孪生今天写的所有数据绑定代码一行不动权限可控活字格自带的角色/行级权限直接管到设备和字段可被 AI 持续优化下一轮让 AIcoding 自动生成健康度评分、预测性维护逻辑。 六、谁适合用什么时候该上判断标准就一句话如果你现在还在用 Excel 拼图表这套就值得换。 七、写在最后工业数据可视化的下半场不是谁的大屏更炫而是谁能把看得见这件事变得更快、更便宜、更可被现场工程师自己改。活字格 AIcoding Three.js 这条路本质上把这件原本软件项目级的事降维成了搭表格级。这意味着IT 不用排半年的开发计划现场工程师不用等外包改字段老板想看新指标下午就能加。当一个工具的能力溢出到「人人都能改」的时候真正的数字化才刚开始。