ue5.2 数字孪生(11)——Web_UI插件网页通信

news/2024/12/15 1:30:22/
Web_UI插件下载安装:
  • https://github.com/tracerinteractive/UnrealEngine/releases
    下载对应Ue版本的Web_UI插件以及相关的Json、Http库;
  • 将插件安装到引擎根目录
Ue链接Web:
  • 在项目中启用插件并重启项目;

  • 创建基于Web的用户界面Umg_Web;
    添加Web_Interface网页控件,提升为变量并设置不透明度;

  • 在玩家控制器中创建Umg_Web控件并添加到视口;
    获取控件中的Web_Interface变量绑定On Interface 事件;
    加载网页;

  • 测试用的网页代码:

    <html>
    <head><!--网页编码方式-->
    <meta charset="UTF-8"><!--前端和Ue通信-->
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"> </script><!--Ue和前端通信JS代码-->
    <script>"object" != typeof ue && (ue = {}), uuidv4 = function () { return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, function (t) { return (t ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> t / 4).toString(16) }) }, ue5 = function (r) { return "object" != typeof ue.interface || "function" != typeof ue.interface.broadcast ? (ue.interface = {}, function (t, e, n, o) { var u, i; "string" == typeof t && ("function" == typeof e && (o = n, n = e, e = null), u = [t, "", r(n, o)], void 0 !== e && (u[1] = e), i = encodeURIComponent(JSON.stringify(u)), "object" == typeof history && "function" == typeof history.pushState ? (history.pushState({}, "", "#" + i), history.pushState({}, "", "#" + encodeURIComponent("[]"))) : (document.location.hash = i, document.location.hash = encodeURIComponent("[]"))) }) : (i = ue.interface, ue.interface = {}, function (t, e, n, o) { var u; "string" == typeof t && ("function" == typeof e && (o = n, n = e, e = null), u = r(n, o), void 0 !== e ? i.broadcast(t, JSON.stringify(e), u) : i.broadcast(t, "", u)) }); var i }(function (t, e) { if ("function" != typeof t) return ""; var n = uuidv4(); return ue.interface[n] = t, setTimeout(function () { delete ue.interface[n] }, 1e3 * Math.max(1, parseInt(e) || 0)), n });
    </script><!--前端To UE-->
    <script>//前端传数据给UE     接口事件:fun01function callUEFunc() {ue5("fun01", "雷猴啊");}
    </script><!-- UE to前端 -->
    <script>//显示游戏帧率ue.interface.Show_Fps = function (fps) {$("#fpsMeter").text(fps.toFixed(2)+"FPS");};//显示命中Actorue.interface.Click_Actor = function (str) {$("#fa").text("被点击的物体名称:"+str);};
    </script>
    </head><body>
    <button id="button" onclick="callUEFunc()">Web To UE</button>
    <br/>-------------------------------<br/>
    <p id="fpsMeter">00  FPS</p>
    <p id="fa">被点击的物体名称:</p>
    </body>
    </html>
    
  • Ue接收网页消息:

  • Ue发消息给网页:


http://www.ppmy.cn/news/1555168.html

相关文章

解决前后端发送验证码手机号登陆的sessionId不一致问题

前端&#xff1a;鸿蒙开发ArkTs语言 后端&#xff1a;spring boot mybatis-plus框架 后端代码 PostMapping("/sendMsg")public R<String> sendMsg(RequestBody User user, HttpServletRequest request, HttpServletResponse response) {// 从User对象中提取用…

BERT:用于语言理解的深度双向 Transformer 的预训练。

文章目录 0. 摘要1. 介绍2. 相关工作2.1 无监督的基于特征的方法2.3 无监督微调方法2.3 从受监督数据中迁移学习 3. BERT3.1 预训练 BERT3.2 微调 BERT 4. 实验4.1 GLUE4.2 SQuAD v1.14.3 SQuAD v2.04.4 SWAG 5. 消融研究5.1 预训练任务的影响5.2 模型大小的影响5.3 使用 BERT …

游戏引擎学习第42天

仓库: https://gitee.com/mrxiao_com/2d_game 简介 目前我们正在研究的内容是如何构建一个基本的游戏引擎。我们将深入了解游戏开发的每一个环节&#xff0c;从最基础的技术实现到高级的游戏编程。 角色移动代码 我们主要讨论的是角色的移动代码。我一直希望能够使用一些基…

go build command

文章目录 1.简介2.格式3.选项4.示例5.小结参考文献 1.简介 go build 是 Go 语言工具链中的一个命令&#xff0c;它用于编译 Go 源代码并生成可执行文件。 2.格式 go build [-o output] [build flags] [packages]可选的 -o 选项强制 build 将生成的可执行文件或对象写入指定的…

Linux 如何设置特殊权限?

简介 通过使用 setuid、setgid 、sticky&#xff0c;它们是 Linux 中的特殊权限&#xff0c;可以对文件和目录的访问和执行方式提供额外的控制。 命令八进制数字功能setuid4当执行文件时&#xff0c;它以文件所有者的权限运行&#xff0c;而不是执行它的用户的权限运行。setg…

mac下flutter开发环境的配置

mac下flutter开发环境的配置 通过flutter中文网下载flutter安装包 flutter中文网 这里着重记录环境变量的配置 mac下我默认使用的是zsh&#xff0c;根据文档提示&#xff0c;在电脑中并未找到zshenv这个文件&#xff0c;而且手动创建后&#xff0c;也并未生效。最后的解决方案…

JavaScript 中的 Map方法

JavaScript 中的 Map方法 在 JavaScript 中&#xff0c;Map 是一种用于存储键值对的数据结构&#xff0c;相较于传统的对象&#xff08;Object&#xff09;&#xff0c;Map 提供了更高效的键值对操作方式适合处理需要频繁操作键值对的场景。 1. 创建 Map const map new Map…

深拷贝详解:特点、实现方法、循环引用处理及性能评估

文章目录 深拷贝的特点实现深拷贝的方法1. 使用 JSON 方法2. 使用 lodash 库3. 手动实现4. 结构化克隆算法 深拷贝与循环引用性能评估解决对象引用问题的其他方法手动实现深拷贝处理循环引用 深拷贝的特点 深拷贝创建了一个全新的对象&#xff0c;并递归复制原对象内部的所有属…