【乐吾乐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.设置完毕后,锁定场景退出编辑模式,点击按钮,完成跨屏通信交互

相关推荐
wenzhangli72 小时前
OneCode 图表组件核心优势解析
数据可视化
小小小小宇4 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊4 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习5 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
hero_heart5 小时前
vscode中c_cpp_properities.cpp文件生成和作用
ide·vscode·编辑器
涛哥码咖5 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖5 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水6 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐6 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06276 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html