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

相关推荐
上海云盾王帅1 分钟前
WEB业务如何接入安全防护:从零到一的实战指南
前端·安全
用户059540174463 分钟前
AI Agent记忆丢失踩坑实录:这个问题让我排查了3天
前端·css
web行路人6 分钟前
前端对Commands(斜杠命令)一些常用
前端·javascript·vue.js·vue
当时只道寻常7 分钟前
从零到一打造企业级全栈后台管理系统 —— 技术选型、工程化实践与深度思考
前端·全栈·前端工程化
竹林8188 分钟前
用 ethers.js 连 MetaMask 做钱包登录,我踩了三个坑才搞定跨页面状态同步
前端·javascript
饺子不吃醋8 分钟前
深入理解 Vue 3 的 setup(含 Composition API)
前端·vue.js
阿斯加德D9 分钟前
《霍格沃茨之遗》风灵月影修改器下载(已汉化)2026最新版
人工智能·测试工具·游戏·3d·游戏程序
阿星做前端10 分钟前
重度 AI 编程用户的一天:我怎么把 Claude Code / Codex 工作流搬进浏览器工作台
前端·javascript·后端
风止何安啊10 分钟前
手写 URL 解析器,面试官到底想考什么?
前端·javascript·面试
yingyima26 分钟前
踩坑亲历:一次因 JSON 格式问题导致的宕机,及工具救赎
前端