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

相关推荐
梦想CAD控件1 天前
在线CAD开发包结构与功能说明
前端·javascript·vue.js
张拭心1 天前
春节后,有些公司明确要求 AI 经验了
android·前端·人工智能
时光不负努力1 天前
typescript常用的dom 元素类型
前端·typescript
小怪点点1 天前
大文件切片上传
前端
时光不负努力1 天前
TS 常用工具类型
前端·javascript·typescript
SuperEugene1 天前
Vue状态管理扫盲篇:Vuex 到 Pinia | 为什么大家都在迁移?核心用法对比
前端·vue.js·面试
张拭心1 天前
Android 17 来了!新特性介绍与适配建议
android·前端
徐小夕1 天前
pxcharts-vue:一款专为 Vue3 打造的开源多维表格解决方案
前端·vue.js·github
Hilaku1 天前
我会如何考核一个在简历里大谈 AI 提效的高级前端?
前端·javascript·面试
青青家的小灰灰1 天前
React 反模式(Anti-Patterns)排查手册:从性能杀手到逻辑陷阱
前端·javascript·react.js