ue5.2 数字孪生（11）——Web_UI插件网页通信
Web_UI插件下载安装：[*]https://github.com/tracerinteractive/UnrealEngine/releases
下载对应Ue版本的Web_UI插件以及相关的Json、Http库；
https://i-blog.csdnimg.cn/blog_migrate/5fd938e12ab34362248f94fbb703ef10.png
[*]将插件安装到引擎根目次
https://i-blog.csdnimg.cn/blog_migrate/8f4362542f43e7661f3d1270af3f03b5.png
Ue链接Web：
[*]在项目中启用插件并重启项目；
https://i-blog.csdnimg.cn/blog_migrate/2fa73de4ed7481ccfcb162e4b0dc9f5c.png
[*]创建基于Web的用户界面Umg_Web;
添加Web_Interface网页控件，提升为变量并设置不透明度；
https://i-blog.csdnimg.cn/blog_migrate/64c055bdf01b5c15b9e3ebfa00dfd70e.png
[*]在玩家控制器中创建Umg_Web控件并添加到视口；
获取控件中的Web_Interface变量绑定On Interface 事件；
加载网页；
https://i-blog.csdnimg.cn/blog_migrate/48728317951c4ab984c2e4444a40199a.png
[*]测试用的网页代码： <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(//g, function (t) { return (t ^ crypto.getRandomValues(new Uint8Array(1)) & 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 = , void 0 !== e && (u = 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 = t, setTimeout(function () { delete ue.interface }, 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">00FPS</p>
<p id="fa">被点击的物体名称：</p>
</body>
</html>
[*]Ue接收网页消息：
https://i-blog.csdnimg.cn/blog_migrate/1f9732717fcb209e31a1341e5f51083a.png
[*]Ue发消息给网页：
https://i-blog.csdnimg.cn/blog_migrate/ffca8ac6684a54c871802f5f9e188256.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]