iNeuOS工业互联网,Web组态增加三维(3D)模型渲染、标注、巡检、预警功能

iNeuOS工业互联网,Web组态增加三维(3D)模型渲染、标注、巡检、预警功能

目 录

1..... 概述... 2

2..... 适用场景... 2

3..... 视图建模(Web 组态)功能特点... 3

3.1 编辑器与工作流... 3

3.2 资源库(四类可拖拽资源)... 3

3.3 双渲染内核与图层能力(技术亮点)... 3

3.4 数据接入... 4

3.5 交互与联动... 4

3.6 报警与动效... 4

3.7 画布/容器配置... 4

3.8 编辑效率... 5

4..... 3D 渲染功能特点... 5

4.1 模型接入... 5

4.2 场景交互... 6

4.3 模型变换... 6

4.4 3D模型部件标注(绑定数据点)... 6

4.5 部件巡检(自动巡游)... 7

4.6 实时预警... 8

4.7 实现效果... 8

5..... 2D 与 3D 的融合特性... 8


1. 概述

iNeuOS工业互联网的视图建模(Web 组态):浏览器端可视化画面编辑器,用"拖拽组态 + 属性配置 + 数据绑定 "的方式,把工业现场数据、设备状态、工艺流程等组装成监控画面,并一键发布到监控页/预览窗/分享链接。

3D 渲染 :作为组态体系中的一类"元件",支持接入真实三维模型(设备/产线/站房),并叠加部件级标注、巡检巡游、实时预警三类业务能力,实现"2D 画面 + 3D 数字孪生"的混合组态。

技术底座:前端 Vue3 +(2D 内核+ 3D 内核),数据侧与平台实时数采、编辑器与运行端同一套渲染内核,"所见即所得",发布后画面与编辑时一致。编辑界面,如下图

2. 适用场景

工业监控大屏 / 中控室看板;设备状态可视化与故障预警;产线/站房数字孪生;工艺流程组态画面;领导驾驶舱与分享页面。

3. 视图建模(Web 组态)功能特点

3.1 编辑器与工作流

四大区域:顶部菜单(文件/编辑/选择/视图/帮助)、左侧资源与工具、中部画布、右侧属性面板。

保存体系:保存组态(按菜单树挂载、菜单即权限)、保存组件(把选中元件存为可复用组件)、导入/导出 .ineuview 工程文件。

运行端形态:编辑 → 预览(新窗口)→ 监控页 / 弹窗 / 分享链接,多端同一画面。

3.2 资源库(四类可拖拽资源)

资源 内容
素材 系统素材库有5600多个SVG图元(按目录管理、素材选择入库)+ 自定义素材(png/jpg/jpeg/gif/svg,单文件<1M,批量上传)
元件 标题、数据点、按钮、最新时间、视频、Iframe、3D 渲染
绘图 选择 / 画笔 / 箭头 / 直线 / 虚线 / 圆 / 椭圆 / 方形 / 直角 / 等边三角形(边框、填充、线宽可调)
图表 折线图、时序柱状图、饼图、仪表图、进度图、液位图(支持实时 / 历史数据、预警值与预警线颜色)
组件 用户自存的可复用组合件

3.3 双渲染内核与图层能力(技术亮点)

编辑器采用双渲染体系:普通元件(标题/数据点/按钮/绘图/素材/图表)绘制于 Canvas 内;视频/网页/3D 等富交互元件以 DOM 层叠加渲染。两套体系在置顶/置底、层级调整上做了统一抽象,可相互叠放。

图层操作:置顶层 / 置底层 / 置上一级 / 置下一级;上下左右对齐、水平/垂直居中、垂直/水平翻转;成组/解组。

3.4 数据接入

数据点绑定:从物联网数据点和业务数据点树中选点,支持小数位等显示格式;数据值实时刷新到画面。

容器级自定义接口:可为每个画布容器替换数据来源,按接口规范提供当前值 / 历史值 / 数据点三类接口地址,并以"刷新频率"轮询;默认走平台数据服务。

运行端数据链路:按容器统一收集画面全部数据点 → 周期性请求最新值 → 分发刷新所有绑定元件(同一轮请求、统一刷新节拍)。

3.5 交互与联动

单击事件三类:打开连接(自定义地址 / 监测页面,页内弹窗或新标签,宽高 px/% 可设)、远程控制指令(布尔值 / 固定值 / 自定义输入值)、请求接口(GET)。

视频元件:平台摄像机直播列表选择,或自定义源(rtmp / hls / websocket / mp4 / webm / ogv / m3u8)。

3.6 报警与动效

数据点报警规则可挂动画动作:变色、变色+闪烁、旋转、隐藏(引擎同时支持跳动、抖动、移动等动作类型),报警触发即执行、恢复即还原。支持自定义报警脚本扩展(函数式判定)。

3.7 画布/容器配置

画布模式:无限画布(自动扩展)或固定尺寸(网格显示、背景色、背景图)。

缩放:10%~500%,一键"缩放到内容 / 缩放到宽度 / 缩放到画布 / 重置缩放"。

运行方式开关:锁定缩放、锁定平移(控制运行端交互权限;运行端默认锁定平移,避免查看大屏时误拖动画)。

容器级刷新频率、接口地址均随组态保存和导出。

3.8 编辑效率

完整热键体系:Ctrl +/-/0 缩放、Ctrl+方向键移动、Ctrl+R 旋转、Del 删除、Ctrl+C 复制、Shift 保持比例/平行移动、Ctrl+G 组/解组、Ctrl+J/K 隐藏显示 Canvas、Ctrl+D/F 隐藏显示 Dom、置顶/置底层热键等(内置"热键参考"面板)。

元件树:树形列出画面全部元件(含 3D 部件树),支持搜索、点选定位。

4. 3D 渲染功能特点

4.1 模型接入

支持 .glb / .gltf / .fbx / .obj 四类主流格式,单文件 ≤ 100MB,面板内上传(带进度)。

模型加载后自动归一化与取景:统一尺度、居中、自动适配视口,不同来源的模型(导出比例不一)即传即用。导出模型,如下图:

4.2 场景交互

视角操作:左键旋转 / 滚轮缩放 / 右键平移。

部件点选:射线拾取选中模型任意部件,高亮显示并在属性面板展示部件名称与层级路径;支持聚焦部件(一键缩放到该部件)。

编辑态:双击画布上的 3D 元件进入"3D 编辑模式",顶部工具条切换移动 / 旋转 / 缩放手柄,可选显隐控件,完成后退出。

4.3 模型变换

位置偏移(X/Y/Z)、旋转(X/Y/Z,度)、等比缩放精确输入,作为增量叠加在归一化取景位姿之上,随元件配置自动保存/导出;一键"恢复原始位置与视角"。

4.4 3D模型部件标注(绑定数据点)

每个部件可添加标注:自定义文字/数字 或 绑定数据点(实时显示"名称:数值",数字保留两位小数)。

样式可配:字体、字号、背景色;标注标签 + 引导线(线连部件顶部)方式呈现,随模型旋转实时跟随。选择3D模型部件:

部件标注、巡检和预警,如下图:

4.5 部件巡检(自动巡游)

把部件"加入巡检"形成巡游路径(按加入顺序依次飞行),每个部件可设停留时长与飞行速度;全局可设巡检启用开关、巡检周期(分钟)。

运行时相机自动沿部件飞行,适合值班大屏自动浏览设备。

4.6 实时预警

部件预警绑定其标注数据点的实时值:数据点值传入预警判定脚本,返回预警状态时该部件以预警颜色高亮,恢复后自动还原。

脚本支持"脚本校验"(语法 + 函数存在 + 中值试运行)。

高亮优先级:预警高亮 > 选中高亮,互不污染;引擎采用材质克隆 + 自发光叠加层实现,不改动模型原材质,多级高亮可叠加/逐层清除。

4.7 实现效果

5. 2D 与 3D 的融合特性

3D 元件就是画布上的普通元件:可拖拽、缩放、旋转、锁定、参与层级(置顶/置底)与元素树管理。

在同一画面里,2D 图表/数据点/按钮与 3D 场景共享同一数据源、同一交互体系、同一套报警逻辑。

典型用法:3D 设备场景作底图 + 2D 仪表/曲线/按钮叠加;或 3D 侧站房 + 部件标注实时数据 + 部件级预警闪烁。

参考文章

(1)硬件网关:https://mp.weixin.qq.com/s/iKMqn62YIhBlXjGtY2wKXQ

(2)物联网(IOT):https://mp.weixin.qq.com/s/5u4L8fItaFpIbVYOlxbmGg

(3)视觉分析(Vision):https://mp.weixin.qq.com/s/SiiuXTTGplTAERRYyCmGCQ

(4)大模型智库(AiMind):https://mp.weixin.qq.com/s/SH_q2k_zbQ-pcd05zj86-g

(5)大模型智能问数(AiInsight): https://mp.weixin.qq.com/s/A1fIQq_w9c8SW9aEWVIsgw

(6)小i助手:https://mp.weixin.qq.com/s/5UCoYsDAbfFP-ZI2sj_QBg

(7)视觉模型:https://mp.weixin.qq.com/s/Gq74ITDfEwK88jt8b--1PA


物联网&大数据技术 QQ群:54256083

物联网&大数据项目 QQ群:727664080

QQ:504547114