【乐吾乐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 分钟前
基于 Lowcode Engine 的低码平台“编码效率”提升实践
前端·低代码
就是我2 分钟前
开发“业务组件库”,该从哪里入手?
前端·javascript·面试
Mintopia4 分钟前
在数字画布上雕刻曲线:NURBS 的奇幻冒险之旅
前端·javascript·计算机图形学
Hacker_seagull9 分钟前
Chrome安装代理插件ZeroOmega(保姆级别)
前端·chrome
石小石Orz12 分钟前
因为没有使用路由懒加载,产生了一个难以寻找的bug
前端
Mintopia12 分钟前
Three.js 力导向图:让数据跳起优雅的华尔兹
前端·javascript·three.js
墨渊君28 分钟前
React Native 跨平台组件库实践: GlueStack UI 上手指南
前端
晓得迷路了35 分钟前
栗子前端技术周刊第 84 期 - Vite v7.0 beta、Vitest 3.2、Astro 5.9...
前端·javascript·vite
独立开阀者_FwtCoder38 分钟前
最全301/302重定向指南:从SEO到实战,一篇就够了
前端·javascript·vue.js
Moment1 小时前
给大家推荐一个超好用的 Marsview 低代码平台 🤩🤩🤩
前端·javascript·github