【乐吾乐3D可视化组态编辑器】3D场景与大屏通信

乐吾乐大屏可视化可以实现大屏页面与内嵌2d/3d场景相互通信,底层原理是利用了iframe通过postMessage发送消息。

3D组态编辑器地址:3D可视化组态 - 乐吾乐Le5le

大屏组态编辑器地址:大屏可视化设计器 - 乐吾乐Le5le

下面以3d场景为例,实现步骤如下:

一、3D场景设置

1.为对象设备新建交互事件

2.类型选择"接受窗口消息后",消息名可以自己定(不要过于简单,以免和内置的消息冲突),这里叫做"3d-message"。

3.配置好交互后保存场景方案

二、大屏设置

1.将保存好的3D方案拖入大屏编辑器舞台中

2.进入系统资源-控件模块,选择按钮控件拖入场景内

注:要将按钮控件放置在大屏中可操作区域(毛玻璃模糊部分)

3.选中按钮控件右侧新建交互事件,动作类型选择向场景发送消息,场景对象为保存好的3D场景对象"iframe",消息名为3d-message"

4.设置完毕后,锁定场景退出编辑模式,点击按钮,完成跨屏通信交互

相关推荐
GISer_Jing1 天前
Agent架构师详解:Skill是什么?附CSDN博客撰写可复用Skill示例
前端·ai·aigc
liucan20121 天前
nginx服务器实现上传文件功能_使用nginx-upload-module模块
服务器·前端·nginx
x-cmd1 天前
[x-cmd] 一切 Web、桌面应用和本地工具皆可 CLI -opencli
前端·ai·github·agent·cli·x-cmd
南山love1 天前
spring-boot项目实现发送qq邮箱
java·服务器·前端
F1FJJ1 天前
Shield CLI:MySQL 插件 vs phpMyAdmin:轻量 Web 数据库管理工具对比
前端·网络·数据库·网络协议·mysql·容器
李明卫杭州1 天前
JavaScript 严格模式下 arguments 的区别
前端·javascript
swipe1 天前
向量数据库实战:为什么 AI Agent 离不开 Milvus
前端·面试·agent
小锋学长生活大爆炸1 天前
【教程】Edge浏览器中可以提升性能的flags
前端·edge
苍舒墨1 天前
如何借助Github pages部署React+vite静态前端项目
前端
曹牧1 天前
JSON 数组的正确使用方式
java·服务器·前端