【数字孪生】UE4虚幻引擎与前端Web页面的结合
目录
- 介绍
- 基础准备
- 鼠标穿透设置
- 备注
介绍
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标签无法正常播放视频；
【数字孪生】UE4虚幻引擎与前端Web页面的结合相关推荐
- UE4虚幻引擎开发手机游戏
该文章来自用户转载 点击阅读原文 UE4虚幻引擎作为游戏开发引擎之一,在很多项目中都会使用到.下面就给大家分享下如何使用UE4开发高品质的手机游戏. 作者介绍 大纲 •介绍 •UE4 针对3A级手游的 ...
- UE4虚幻引擎UI界面动画制作！
UE4虚幻引擎UI界面动画制作! 创建一个动画 然后选择某个控件! 找到某些属性!然后key帧! 关于怎么播放动画呢! 这样子呢!当你开始 可以自定义函数,外部MainUI调用!
- UE4 虚幻引擎，3D数学(二)，3D嵌套坐标系。Relative相对位置与World世界位置，Relative相对旋转与World世界坐标旋转。
在UE4虚幻引擎中,常见的嵌套坐标系有Skeletal骨骼,以及嵌套多节点(子节点,父节点)Actor.本文中,以嵌套多节点Actor为例. Skeletal骨骼,嵌套坐标系. 1.Relative相 ...
- UE4虚幻引擎 LiveLink Face连接不上的问题
PS:IphoneX以上的手机型号才可以连接Live Link. LiveLinkFace连接不上的几个原因. 1.IP地址不对 设置IP地址捕捉,设置-->Live Link-->添加目 ...
- ue4怎么用虚幻商城场景_【更新】UE4虚幻引擎野外场景制作零基础入门教程
原标题:[更新]UE4虚幻引擎野外场景制作零基础入门教程 作为一套零基础入门教程,可以帮助虚幻4引擎的新手了解到环境制作流程和相关软件的配合.本教学适合零基础入门用户,不适合有一定经验的UE使用者. ...
- UE4虚幻引擎关于小地图制作教程
UE4虚幻引擎关于小地图制作教程 首先,要做一个这样子的效果! 怎么做呢! 首先,我们要准备UI! 小地图,我们的分辨率是512x512 记住参数! 然后在MainUI当中!我们就可以这么设置! 一个 ...
- UE4虚幻引擎，怎么更改视图，场景中的图标大小
UE4虚幻引擎中,视图界面的图标,如SkyLight,Player Start的图标.默认缩放为1 一.打开编辑器偏好设置 二.打开Viewports视口,找到Billboard Scale公告板缩放 ...
- UE4虚幻引擎关于事件分发器的使用！
UE4虚幻引擎关于事件分发器的使用! 首先,这次就讲一下,事件分发器,在UI,Pawn,子actor如何进行事件传递! 首先!我们如果要使用事件分发器的原因是什么! 第一,肯定是方便,快! 第二,为了 ...
- 关于 UE4 (虚幻引擎4) 4.25.1版本提示“无法定位程序输入点 DXGIGetDebugInterface1 于动态链接库dxgi.dll上”的错误的解决办法
关于 UE4 (虚幻引擎4) 4.25.1版本提示"无法定位程序输入点 DXGIGetDebugInterface1 于动态链接库dxgi.dll上"的错误的解决办法: 1.原因: ...
- 使用js在前端web页面调用打印机
使用js在前端web页面调用打印机 最近参与了一个比较老的项目改造,需要使用到打印机相关的技术. 由于打印机也是比较老旧,所以没有SDK相关的应用,虽然有桌面的插件,但是需要集成到web中来,最终找到 ...
最新文章
- 微型计算机字,在微型计算机的汉字系统中，一个汉字的内码占 – 手机爱问
- Errors were encountered while processing 解决方法
- Java 调用 Caffe_解决 free(): invalid pointer: 0x00000000019ff700 运行时报错（caffe）（libtool使用）...
- access ole 对象 最大长度_Redis 数据结构和对象系统，有这 12 张图就够了！
- oracle 11.2.0.3.4 psu 14275605 下载,Oracle RAC 11.2.0.3.2 升级 11.2.0.3.4
- [四川金信石招人]技术总监架构师测试工程师
- Vue+ElementUI项目使用webpack输出MPA【华为云分享】
- 学python有前途吗-Python前景好不好？
- 深入理解计算机操作系统（六）
- DOTween Sequence的使用
- 数字通信原理笔记(一)---概述
- 【07】processing-字体（中文）
- 从网易云音乐看新媒体内容运营法则
- 共模电感 | 关键参数的计算步骤
- 计算机毕业设计之疫情防疫信息化管理系统
- java输入输出流_Java学习之输入输出流
- EPICS记录参考--sub-Array记录(subArray)
- pandas取出符合条件的某单元格的值
- ESP32学习笔记（9）——TCP服务端
- 用python画数学函数图像教程_你知道哪些用计算机画数学函数图象的方法？