草庐IT

【数字孪生】UE4虚幻引擎与前端Web页面的结合

凌 飞 2023-04-18 原文

目录

介绍

UE初学者，非专业UE工程师，在项目中需要使用UE4结合前端页面完成三维场景与前端图表的联动效果，自学总结方法，使用的版本为UE4.26。

基础准备

1. 使用Vue、Echarts创建前端页面（需要前端基础）；
作为Demo演示，可前往echarts官网示例，任意选择一图表并下载：


下载成功后获得一个HTML文件，或任意你自己的页面均可。

2. 使用UE4.26创建一个空项目即可；

3. UE4插件WebUI的使用；

  • 下载
    可前往git官网下载指定版本，本人使用的4.26版本免费下载。
  • 安装插件
    下载解压完包后，需将解压的文件夹放到你安装的UE指定路径下，如:

D:\Program Files\Epic Games\UE_4.26\Engine\Plugins\Runtime



  • 打开上面创建的UE项目，选择编辑菜单下的插件管理，搜索刚安装的WebUI，点击启动并重启UE项目。

  • 在UE内容浏览器界面右击新建选择用户界面下的控件蓝图，命名webInterface。

  • 打开webInterface蓝图，在控制面板搜索web interface，添加到下方控件栏。

  • 点击右边锚点，选择全屏类型的，按ctrl+鼠标左击，将webInterface铺满页面，重命名Browser，保存关闭。

  • 创建一个新的蓝图类，此处选择HUD，并命名为MyHUD。

  • 编辑MyHUD蓝图
    1.创建控件，选择Class为webInterface，将事件开始运行连接到上面，OwningPlayer拖出创建获取拥有玩家控器，return value拖出提升为变量，设置变量名为Widget。

    2.从变量Widget拖出获取变量Browser，从Browser拖出绑定事件到OnInterfaceEvent，将SET连接到绑定事件到OnInterfaceEvent。从事件处拖出添加自定义事件，此处可先默认添加简单的打印事件（后续此处会绑定与前端页面交互的事件）。


    3.再次获取组件Widget，拖出创建添加到视口。并将添加到视口连接到前面的绑定事件。

    4.从Widget拖出获取Browser，在从Browser拖出，创建设置仅输入模式UI，从设置仅输入模式UI的Player Controller拖出获取玩家控制器。

    5.设置鼠标显示光标，加载HTML文件。编译保存。

    这里讲一下LoadFile函数，里面是调用了 WebUI插件里面的Load函数，注意它的HTML文件路径是在Content/HTML下的。

    如在项目的Content文件夹下创建一个HTML文件夹，在HTML文件夹中有一个index.html，则在上面的传入的File字符串为index.html。当然文件夹路径可自取，只需修改下拼接的路径名即可。
  • 为了使用MyHUD蓝图，我们需再创建一个蓝图类，选择GameModeBase。创建并命名MyGameMode。

  • 打开MyGameMode，设置选择HUD类，为刚创建的MyHUD。

  • 选择我们默认的关卡Main或任意你自己创建的关卡，在世界场景设置中，游戏模式重载选择对应的MyGameMode。

  • 点击保存所有文件，点击运行，你自己的HTML页面就展示在UE4上面了。

鼠标穿透设置

由于前端页面铺满整个UE界面，会遮挡鼠标对UE底板模型的操作，使用WebUI插件可以很好的解决这个问题。只需要在创建的WebInterface控件蓝图中，选择webInterface，设置开启Enable Transparency。

备注

在实际操作中还会存在各种需求问题，会在其他文章讲解。
1.两端的接口函数调用如何操作；
2.加载HTML文件的几种方式；
3.UE4.26中HTML的video标签无法正常播放视频；

孪生虚幻xff0cxff0xffue4前端

有关【数字孪生】UE4虚幻引擎与前端Web页面的结合的更多相关文章

  1. ruby-on-rails - 结合 meta_search 与 acts_as_taggable_on - 2

    我在开发的Rails3网站的一些搜索功能上遇到了一个小问题。我有一个简单的Post模型，如下所示:classPost我正在使用acts_as_taggable_on来更轻松地向我的帖子添加标签。当我有一个标记为“rails”的帖子并执行以下操作时，一切正常:@posts=Post.tagged_with("rails")问题是，我还想搜索帖子的标题。当我有一篇标题为“Helloworld”并标记为“rails”的帖子时，我希望能够通过搜索“hello”或“rails”来找到这篇帖子。因此，我希望标题列的LIKE语句与acts_as_taggable_on提供的tagged_with方法

  2. ruby - 在没有 sass 引擎的情况下使用 sass 颜色函数 - 2

    我想在一个没有Sass引擎的类中使用Sass颜色函数。我已经在项目中使用了sassgem，所以我认为搭载会像以下一样简单:classRectangleincludeSass::Script::FunctionsdefcolorSass::Script::Color.new([0x82,0x39,0x06])enddefrender#hamlengineexecutedwithcontextofself#sothatwithintemlateicouldcall#%stop{offset:'0%',stop:{color:lighten(color)}}endend更新:参见上面的#re

  3. ruby - 查找字符串中的内容类型(数字、日期、时间、字符串等) - 2

    我正在尝试解析一个CSV文件并使用SQL命令自动为其创建一个表。CSV中的第一行给出了列标题。但我需要推断每个列的类型。Ruby中是否有任何函数可以找到每个字段中内容的类型。例如，CSV行:"12012","Test","1233.22","12:21:22","10/10/2009"应该产生像这样的类型['integer','string','float','time','date']谢谢! 最佳答案 require'time'defto_something(str)if(num=Integer(str)rescueFloat(s

  4. ruby-on-rails - Rails 中的推荐引擎 - 2

    我想为我的Rails网络应用程序提供推荐功能。特别是，我想向新注册的用户推荐他可能想要关注的其他用户。Rails中是否有用于此目的的引擎/gem？如果没有，我应该从哪里开始构建它？谢谢。 最佳答案 有Coletivogemhttps://github.com/diogenes/coletivo我试了一下。在MySQL上运行。Neo4jhttp://neo4j.org真的很容易实现一个“跟随谁”。事实上，大多数展示其能力的样本都涉及“跟随谁”。快速提示-只有在JRuby上运行时，Neo4j.rb才会很酷。如果不是-使用Neograph

  5. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD

  6. 叮咚买菜基于 Apache Doris 统一 OLAP 引擎的应用实践 - 2

    导读：随着叮咚买菜业务的发展，不同的业务场景对数据分析提出了不同的需求，他们希望引入一款实时OLAP数据库，构建一个灵活的多维实时查询和分析的平台，统一数据的接入和查询方案，解决各业务线对数据高效实时查询和精细化运营的需求。经过调研选型，最终引入ApacheDoris作为最终的OLAP分析引擎，Doris作为核心的OLAP引擎支持复杂地分析操作、提供多维的数据视图，在叮咚买菜数十个业务场景中广泛应用。作者｜叮咚买菜资深数据工程师韩青叮咚买菜创立于2017年5月，是一家专注美好食物的创业公司。叮咚买菜专注吃的事业，为满足更多人“想吃什么”而努力，通过美好食材的供应、美好滋味的开发以及美食品牌的孵

  7. 区块链之加解密算法&数字证书 - 2

    目录一.加解密算法数字签名对称加密DES(DataEncryptionStandard)3DES(TripleDES)AES(AdvancedEncryptionStandard)RSA加密法DSA(DigitalSignatureAlgorithm)ECC(EllipticCurvesCryptography)非对称加密签名与加密过程非对称加密的应用对称加密与非对称加密的结合二.数字证书图解一.加解密算法加密简单而言就是通过一种算法将明文信息转换成密文信息，信息的的接收方能够通过密钥对密文信息进行解密获得明文信息的过程。根据加解密的密钥是否相同，算法可以分为对称加密、非对称加密、对称加密和非

  8. UE4 源码阅读：从引擎启动到Receive Begin Play - 2

    一、引擎主循环UE版本：4.27一、引擎主循环的位置：Launch.cpp:GuardedMain函数二、、GuardedMain函数执行逻辑：1、EnginePreInit：加载大多数模块int32ErrorLevel=EnginePreInit(CmdLine);PreInit模块加载顺序：模块加载过程：（1）注册模块中定义的UObject，同时为每个类构造一个类默认对象（CDO，记录类的默认状态，作为模板用于子类实例创建）（2）调用模块的StartUpModule方法2、FEngineLoop::Init()1、检查Engine的配置文件找出使用了哪一个GameEngine类（UGame

  9. ruby - 将n维数组的每个元素乘以Ruby中的数字 - 2

    在Ruby中，是否有一种简单的方法可以将n维数组中的每个元素乘以一个数字？这样:[1,2,3,4,5].multiplied_by2==[2,4,6,8,10]和[[1,2,3],[1,2,3]].multiplied_by2==[[2,4,6],[2,4,6]]？(很明显，我编写了multiplied_by函数以区别于*，它似乎连接了数组的多个副本，不幸的是这不是我需要的)。谢谢! 最佳答案 它的长格式等价物是:[1,2,3,4,5].collect{|n|n*2}其实并没有那么复杂。你总是可以使你的multiply_by方法:c

  10. ruby-on-rails - 将 Amazon Simple Notification service SNS 与 ruby​​ 结合使用 - 2

    很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开，visitthehelpcenter.关闭9年前。我需要从基于ruby​​的应用程序使用AmazonSimpleNotificationService，但不知道从哪里开始。您对从哪里开始有什么建议吗？

随机推荐