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

相关推荐
PILIPALAPENG几秒前
gh:终端里的GitHub总控台,AI时代的开发者神器
前端·人工智能·后端
用户059540174466 分钟前
Redis持久化踩坑实录:RDB+AOF混合持久化,竟会悄无声息丢数据?我用pytest+Docker复现了30次故障场景
前端·css
浮游本尊8 分钟前
项目全景 + 第一条完整后端链路
java·前端
小新11013 分钟前
vue架的网站修改端口
前端·javascript·vue.js
特立独行的猫a15 分钟前
鸿蒙 PC 移植记:将微软的 `edit` 轻量级终端编辑器带到 OpenHarmony
microsoft·rust·编辑器·harmonyos·鸿蒙pc·edit
暗不需求15 分钟前
从零实现一个 Vue Todos 任务清单:深入响应式编程与组合式 API
前端·vue.js·面试
超绝大帅哥16 分钟前
TTFB, FP, FCP, LCP, CLS, INP,TBT, TTI性能指标
前端
用户17335980753719 分钟前
纯前端 PDF 处理避坑指南:5 个线上真实问题的解决方案
前端·javascript
Csvn21 分钟前
前端项目管理:需求拆解、排期与风险控制
前端
陈_杨24 分钟前
鸿蒙APP开发-带你走近分构App的分子数据
前端·javascript