UE5功能-与网页交互

这篇具有很好参考价值的文章主要介绍了UE5功能-与网页交互。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一.下载插件

        首先下载WebUI插件,Releases · tracerinteractive/UnrealEngine (github.com).

ue5嵌入web页面交互,UE5功能,ue5,交互,vue
插件页面

        选择相应引擎版本下载,我这里选择的5.1.(ps:如果无法打开相应界面,需要先把Epic账号与Git账号关联,首先登录Epic官网,然后点击头像,点击个人信息,选择左边的连接按钮,在连接页面选择Git,最后在弹出的新界面登录Git账号,选择同意就可以了.)

ue5嵌入web页面交互,UE5功能,ue5,交互,vue
下载这三个

 二.解压

        1.解压到引擎目录(我解压之后,项目编辑失败,所以我用了第二种方法)

        2.解压到项目目录,新建一个文件夹(Plugins)

ue5嵌入web页面交互,UE5功能,ue5,交互,vue

 ue5嵌入web页面交互,UE5功能,ue5,交互,vue

三.使用插件 

        

ue5嵌入web页面交互,UE5功能,ue5,交互,vue
插件界面

         点击编辑按钮,选择插件,选择插件页面的WebUI(提示需要重启引擎,选择重启).

        然后新建一个用户界面,控件蓝图,在下面图片的红框位置,就可以找到WebUi插件.

ue5嵌入web页面交互,UE5功能,ue5,交互,vue
UI蓝图

         鼠标左键选中,拖进来,就可以直接使用了.

        

ue5嵌入web页面交互,UE5功能,ue5,交互,vue
输入网址

 运行以来就可以打开网页了.

四,web交互ue5

网页背景透明相关代码

<style> /*Put the CSS here */ body{ background: transparent; } .button{ background-color: aqua; } </style>

     

<!--
	此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=bar-background
-->
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
  <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>
 
  
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
  <!-- Uncomment this line if you want to dataTool extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.0/dist/extension/dataTool.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use gl extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
  -->
  <!-- Uncomment this line if you want to echarts-stat extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use map
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/china.js"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/world.js"></script>
  -->
  <!-- Uncomment these two lines if you want to use bmap extension
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.0/dist/extension/bmap.min.js"></script>
  -->
 
  <script type="text/javascript">
    "object"!=typeof ue||"object"!=typeof ue.interface?("object"!=typeof ue&&(ue={}),ue.interface={},ue.interface.broadcast=function(e,t){if("string"==typeof e){var o=[e,""];void 0!==t&&(o[1]=t);var n=encodeURIComponent(JSON.stringify(o));"object"==typeof history&&"function"==typeof history.pushState?(history.pushState({},"","#"+n),history.pushState({},"","#"+encodeURIComponent("[]"))):(document.location.hash=n,document.location.hash=encodeURIComponent("[]"))}}):function(e){ue.interface={},ue.interface.broadcast=function(t,o){"string"==typeof t&&(void 0!==o?e.broadcast(t,JSON.stringify(o)):e.broadcast(t,""))}}(ue.interface),(window.ue5=ue.interface.broadcast);
 
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};
    
    var option;
 
    option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
};
 
    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }
 
    ue.interface.ue2js = function(ueData){

      var jsonObj = JSON.parse(ueData);
      myChart.setOption(jsonObj);

    };
 
    ue5("js2ue","hello");
    ue5("js2ue",   {des : "hello"});
    window.addEventListener('resize', myChart.resize);
  </script>
</body>
</html>

          这是示例代码,

ue5嵌入web页面交互,UE5功能,ue5,交互,vue

第一个参数是ue5的函数名,第二个参数是传给ue5函数的参数(可以是json,字符串).

 文章来源地址https://www.toymoban.com/news/detail-517743.html

ue5嵌入web页面交互,UE5功能,ue5,交互,vue
相关蓝图

 五.UE5交互网页

        相关蓝图

ue5嵌入web页面交互,UE5功能,ue5,交互,vue
按钮点击事件

 

ue5嵌入web页面交互,UE5功能,ue5,交互,vue
网页读取

 六.其他

        在细节面板上启动,透明和穿透(如果网页全屏运行) Enable Transparency

        ue5嵌入web页面交互,UE5功能,ue5,交互,vue

 

到了这里,关于UE5功能-与网页交互的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【UE5】交互式展厅数字博物馆交互是开发实战课程

    长久以来,我们总是不断被初学者问到类似这样的问题:如何从头到尾做一个交互式程序开发项目?本套课程尝试对这个问题进行解答。 课程介绍视频如下 【UE5】数字展厅交互式开发全流程 【谁适合学习这门课】 本套课程面向初学者,满足学习需求包括但不仅限于以下:

    2024年01月18日
    浏览(48)
  • UE5 运行时捕捉外部窗口并嵌入到主窗口

    UE5 运行时捕捉外部窗口并嵌入到主窗口的一种方法 创建一个Slate类用于生成一个窗口 创建一个Actor类,用于调用Slate类中的方法

    2024年02月11日
    浏览(28)
  • UE5 Motion Warping功能学习

    MotionWarping(运动扭曲)可对角色根运动进行修改,从而让角色根运动动画结束时准确停在某一点,如图: 此外UE5还提供移动步幅、转向的Warping功能(防滑步),之前写过一个简单的介绍可参考: https://blog.csdn.net/grayrail/article/details/131434689 使用该功能后,对于翻越障碍物这类

    2024年02月11日
    浏览(71)
  • 【虚幻引擎UE】UE4/UE5 功能性插件推荐及使用介绍 1

    实现POST/GET基本方法,并支持HEAD带信息。 使用案例:【虚幻引擎UE】UE5 三种模式调用API详解(案例基于免费Varest插件) 能够快速实现打开对话框获取数据的导入、导出路径。 某月限免插件,比较方便的地图插件,可以改改样式直接用。 http下载数据到指定路径 按空格可以切

    2023年04月11日
    浏览(102)
  • 【虚幻引擎UE】UE4/UE5 功能性插件推荐及使用介绍 2

    (基于UE5 的Python支持插件) 支持Python语言基于UE5进行开发 GIT地址:https://github.com/mamoniem/UnrealEditorPythonScripts (基于UE5 的Haxe支持插件) Haxe是一门新兴的开源编程语言,是一种开源的编程语言。支持Haxe语言基于UE5进行开发。 GIT地址:https://github.com/RobertBorghese/Haxe-UnrealEngine

    2024年02月06日
    浏览(89)
  • UE5 C++ UGameInstance 功能、作用及应用

    网上有很多文章介绍,例如在游戏中只有一个实例,换关卡不会丢失等。暂时省略。 UWebSocketGameInstance.h里的定义 说明:  Init()方法是在UGameInstance.h里定义的。源码里的注解是允许在这里自定义一些实现 Shutdown()方法是在UGameInstance.h里定义的。源码里的注解是允许在这里自定义

    2024年02月10日
    浏览(42)
  • UE5、CesiumForUnreal实现多边形压平地形、3DTiles功能

    之前的文章在材质中基于顶点位置偏移实现了 StaticMesh 模型的 压平 效果,并解决了 闪面 的问题。 本文这里基于 CesiumForUnreal 插件加载在线的地形 CesiumWorldTerrain ,并实现了 任意多边形 对地形的 压平 效果,支持UE的 Editor 和 Runtime 环境,GIF动图如下: 与之前的文章“ UE5实现

    2024年02月03日
    浏览(133)
  • UE5学习笔记(一)——界面功能梳理&第一天知识点记录

    学习UE5的第一步,是软件安装。 默认是安装好的,由于安装没有太多技术含量,所以就没有专门做记录。 这里有个注意点,虚幻引擎是整合在Epic games launcher中的,也就是说开发引擎内嵌在游戏平台上,打个比方,就是如果你要下unity你必须先下一个steam的感觉。 当然,在完

    2024年02月04日
    浏览(48)
  • 如何使用UE5新功能 “打包型关卡Actor” 实现场景的性能优化

    内容分为: 简介 实操 优化结果展示 看不懂原理看看实操就大概就能明白 “打包型关卡蓝图”是UE5新功能 世界分区(World Partition) 的一部分 但 不依赖于项目是否启用了世界分区 官方文档有关世界分区中 关卡实例化 的内容 官方文档: 这个功能的原理是将场景中的 静态网

    2024年02月12日
    浏览(99)
  • 实现Vue3和UE5.2进行通信(Pixel Streaming)

    这篇文章简单讲解一下如何实现vue3和UE5进行数据的通信。 如果有同学还不清楚如何在Vue3中实现Pixel Streaming的播放器,请查看这篇文章 Vue3中集成Unreal 5.2 像素流(Pixel Streaming插件)。 1. 从UE5.2到前端页面的通信 现在我们想让UE5.2也就是后端发送给前端一些消息,然后前端接收到

    2024年02月08日
    浏览(75)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包