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

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     接口事件：fun01
    function callUEFunc() {

        ue5("fun01", "雷猴啊");
    }
</script>

<!-- UE to前端 -->
<script>
    //显示游戏帧率
    ue.interface.Show_Fps = function (fps) {
        $("#fpsMeter").text(fps.toFixed(2)+"FPS");
    };

    //显示命中Actor
     ue.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发消息给网页：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/936263.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

postman可以通的请求，前端通不了（前端添加Content-type，后端收不到请求）

postman可以通的请求，前端通不了（前端添加Content-type，后端收不到请求）

接口完成之后，自己使用postman测试了一下，没有问题； 可是在和小组前端调试接口的时候，他却说访问不了； 信息如下：（我自己写的一个打印请求信息的拦截器） 发现报错信息是： Content type ‘application/x-www-form-urlencoded;charset=UTF-8’ not supported 也就是说…
阅读更多...
EFAK kafka可视化管理工具部署使用

EFAK kafka可视化管理工具部署使用

简介&#xff1a;EFAK是开源的可视化和管理软件。它允许您查询、可视化、提醒和探索您的指标&#xff0c;无论它们存储在何处。简单来说&#xff0c;它为您提供了将 Kafka 集群数据转换为漂亮的图形和可视化效果的工具。 环境&#xff1a;①操作系统&#xff1a;CentOS7.6&…
阅读更多...
MySQL生产环境备份脚本

MySQL生产环境备份脚本

全量备份脚本&#xff0c;其中BakDir&#xff0c;ZlbakDir&#xff0c;LogFile需要自己创建 #!/bin/bash export LANGen_US.UTF-8# 指定备份目录 BakDir/root/beifen/data/mysqlbak/data/allbak # 指定增量备份目录 ZlbakDir/root/beifen/data/mysqlbak/data/zlbak # 备份日志…
阅读更多...
快速搭建express

快速搭建express

一、 安装express-generator npm i -g express-generator二、创建项目 express -e 项目名三、安装依赖 npm install四、运行项目 cd 项目名npm start 五、打开网页http://localhost:3000/ 六、实时更新 1、安装nodemon npm i -g nodemon2、修改package.json 改成nodemon …
阅读更多...
网络编程 01：计算机网络概述，网络的作用，网络通信的要素，以及网络通信协议与分层模型

网络编程 01：计算机网络概述，网络的作用，网络通信的要素，以及网络通信协议与分层模型

一、概述 记录时间 [2024-12-13] 本文讲述网络编程相关知识&#xff0c;例如&#xff0c;什么是计算机网络&#xff0c;网络有什么作用&#xff0c;网络通信的要素是什么&#xff0c;以及网络通信协议与分层模型。 网页编程 / 网络编程区别&#xff1a; 网页编程&#xff1a;J…
阅读更多...
亚信安全DeepSecurity完成与超云超融合软件兼容性互认

亚信安全DeepSecurity完成与超云超融合软件兼容性互认

近日&#xff0c;亚信安全与超云数字技术集团有限公司&#xff08;以下简称“超云”&#xff09;联合宣布&#xff0c;亚信安全成功完成与超云超融合软件的产品兼容性互认证。经严格测试&#xff0c;亚信安全云主机安全DeepSecurity与超云FS5000增强型融合系统&#xff08;简称…
阅读更多...
【工业机器视觉】基于深度学习的水表盘读数识别（3-数据标注与转换）

【工业机器视觉】基于深度学习的水表盘读数识别（3-数据标注与转换）

【工业机器视觉】基于深度学习的仪表盘识读&#xff08;2&#xff09;-CSDN博客 数据标注 标注扩展 Labelme 和 LabelImg 都是用于创建机器学习和计算机视觉项目所需标注数据的工具。它们都允许用户通过图形界面手动标注图像&#xff0c;但各自有其特点和适用场景。 Labelme…
阅读更多...
【硬件测试】基于FPGA的4ASK调制解调通信系统开发与硬件片内测试,包含信道模块,误码统计模块,可设置SNR

【硬件测试】基于FPGA的4ASK调制解调通信系统开发与硬件片内测试,包含信道模块,误码统计模块,可设置SNR

目录 1.算法仿真效果 2.算法涉及理论知识概要 3.Verilog核心程序 4.开发板使用说明和如何移植不同的开发板 5.完整算法代码文件获得 1.算法仿真效果 本文是之前写的文章: 《基于FPGA的4ASK调制解调系统,包含testbench,高斯信道模块,误码率统计模块,可以设置不同SNR》 的…
阅读更多...
ubuntu20.04复现 Leg-KILO

ubuntu20.04复现 Leg-KILO

这里写目录标题 opencv版本问题下载3.2.0源代码进入解压后的目录创建构建目录运行 CMake 配置 配置时指定一个独立的安装目录&#xff0c;例如 /opt/opencv-3.2&#xff1a;出错&#xff1a; 使用多线程编译错误1&#xff1a; stdlib.h: 没有那个文件或目录错误2&#xff1a;er…
阅读更多...
kubeadm部署1.20集群版

kubeadm部署1.20集群版

部署说明 步骤1&#xff5e;4 master和node都需执行步骤 5.1 三台master都执行&#xff0c;步骤 5.2 随便一台机器执行步骤5.3根据需要选择部署etcd&#xff1b;堆叠etcd更简单部署更快&#xff0c;外部etcd部署麻烦方便管理&#xff1b;步骤5.4 根据选择部署的etcd方式选择k8…
阅读更多...
【电力负荷预测实例】采用新英格兰2024年最新电力负荷数据的XGBoost电力负荷预测模型

【电力负荷预测实例】采用新英格兰2024年最新电力负荷数据的XGBoost电力负荷预测模型

与小编上篇文章介绍的基于BPNN神经网络的电力负荷预测相比较&#xff0c;两种模型的负荷预测方法各有优势&#xff0c;神经网络能够自动提取特征并处理非线性关系&#xff0c;而XGBoost则具有预测精度高、运行速率快和可解释性强的特点。在实际应用中&#xff0c;可以根据具体需…
阅读更多...
6_Sass 选择器函数 --[CSS预处理]

6_Sass 选择器函数 --[CSS预处理]

Sass 提供了一系列的选择器函数&#xff0c;用于操作和组合CSS选择器。这些函数可以帮助你更灵活地创建样式规则&#xff0c;并且可以减少重复代码。以下是几个常用的选择器函数及其用法&#xff1a; 1. selector-append($selector1, $selector2...) selector-append($select…
阅读更多...
List【Redis对象篇】

List【Redis对象篇】

&#x1f3c6; 作者简介&#xff1a;席万里 ⚡ 个人网站&#xff1a; 文章目录 LIst1.简介2.使用场景3.常用操作1.写操作2.读操作 4.底层实现5.压缩列表的优化1.ZIPLIST结构2.ziplist更新数据3.LISTPACK优化 6.总结&#xff08;重点&#xff09; LIst 1.简介 Redis List是一组…
阅读更多...
心情追忆- SEO优化提升用户发现率

心情追忆- SEO优化提升用户发现率

之前&#xff0c;我独自一人开发了一个名为“心情追忆”的小程序&#xff0c;旨在帮助用户记录日常的心情变化及重要时刻。我从项目的构思、设计、前端&#xff08;小程序&#xff09;开发、后端搭建到最终部署。经过一个月的努力&#xff0c;通过群聊分享等方式&#xff0c;用…
阅读更多...
.NET 技术系列 | 通过CreatePipe函数创建管道

.NET 技术系列 | 通过CreatePipe函数创建管道

01阅读须知 此文所提供的信息只为网络安全人员对自己所负责的网站、服务器等&#xff08;包括但不限于&#xff09;进行检测或维护参考&#xff0c;未经授权请勿利用文章中的技术资料对任何计算机系统进行入侵操作。利用此文所提供的信息而造成的直接或间接后果和损失&#xf…
阅读更多...
springboot425滑雪场管理系统(论文+源码)_kaic

springboot425滑雪场管理系统(论文+源码)_kaic

摘要 近年来&#xff0c;信息化管理行业的不断兴起&#xff0c;使得人们的日常生活越来越离不开计算机和互联网技术。首先&#xff0c;根据收集到的用户需求分析&#xff0c;对设计系统有一个初步的认识与了解&#xff0c;确定滑雪场管理系统的总体功能模块。然后&#xff0c;详…
阅读更多...
Dubbo的应用及注册和SPI机制

Dubbo的应用及注册和SPI机制

Dubbo的应用及注册和SPI机制 Dubbo 的服务注册中应用级注册优化 Dubbo 的注册中心 Dubbo 支持很多种注册中心&#xff0c;支持的主流注册中心包括&#xff1a;ZooKeeper、Nacos、Redis Dubbo 需要引入注册中心依赖&#xff0c;并且配置注册中心地址&#xff0c;这里以 ZooK…
阅读更多...
【从零开始入门unity游戏开发之——C#篇05】转义字符、@处理多行文本或者不使用转义字符、随机数

【从零开始入门unity游戏开发之——C#篇05】转义字符、@处理多行文本或者不使用转义字符、随机数

文章目录 一、转义字符1、什么是转义字符&#xff1f;2、常见的转义字符3、总结 二、使用处理多行文本或者不使用转义字符1、多行字符串2、不使用转义字符 三、随机数1、Random.Next()生成随机整数示例&#xff1a;生成一个随机整数生成指定范围内的随机整数 2、Random.NextSin…
阅读更多...
【Python】使用Selenium的find_element模块获取网页上的大段文字和表格的方法（建议收藏！）

【Python】使用Selenium的find_element模块获取网页上的大段文字和表格的方法（建议收藏！）

发现了一个使用Selenium的find_element模块&#xff0c;快速获取文字和表格的方法&#xff0c;很实在&#xff0c;以后爬网的时候&#xff0c;就不用beautifulSoup 和 pandas的read_html 混起来用了&#xff01; 文字部分&#xff1a;实现网络节点下&#xff0c;某个节点下的其…
阅读更多...
Windows环境基于ecplise的spring boot框架新建spring start project

Windows环境基于ecplise的spring boot框架新建spring start project

SpringToolSuite4 新建项目实例 前言Windows基于ecplise 工具的spring boot 架构 前言 使用Spring boot 框架向前端传输数据 Windows基于ecplise 工具的spring boot 架构 spring-tool-suite-4官网下载链接spring tool&#xff0c;下载太慢的话可以使用迅雷加速&#xff0c;右…
阅读更多...
最新文章

Copyright @ 2022~2023