找回密码
 立即注册
查看: 253|回复: 8

UE4 WebUI插件使用指南

[复制链接]
发表于 2024-1-19 17:07 | 显示全部楼层 |阅读模式
在开发数字孪生应用法式的时候,除了三维场景展示之外,也需要开发丰硕和酷炫的2D页面。 使用UE4的UMG开发图表显得斗劲笨拙。 而通过Web插件允许开发者创建丰硕的基于Web HTML5的用户界面,它由内置在UE4中的web浏览器提供撑持,包罗对Windows、Mac、Linux、Android和iOS的撑持。 基于这种插件技术,普通的前端开发人员也可以开发UE4界面上丰硕的2d页面效果。
下面分享我们UE4做的数字孪生的几个案例,此中的2d页面是通过Vue结合html5技术和echart图表插件进行开发的:







下面我们介绍WebUI插件的使用
下载插件

插件的下载地址是:
https://tracerinteractive.com/plugins/webui https://github.com/tracerinteractive/UnrealEngine/releases
如果你发现这个地址打开是404. 需要关联github和epic账号,才能显示,关联账号参考官方文档:
https://www.unrealengine.com/zh-CN/ue-on-github
需要相关的插件的,也可以查看文章末尾的公众号,进行存眷 阅读本篇文章获取。
安装插件

有两种方式可以安装WebUI插件,一种是安装到引擎,一种是安装到指定的项目。
安装到项目

如果不想安装到引擎,那么把插件放到项目地址的目录下的Plugins目录,如果项目下没有Plugins目录,可以手动创建。 如下图所示



WebUI插件依赖JsonLibrary和HttpLibrary,所以也需要这两个依赖的插件。
安装到引擎

若要安装WebUI插件到引擎,请将下载的文件解压到以下引擎文件中:



需要注意已下载的插件版本要与引擎版本对应。
PS:安装之后,需要重启UE编纂器。
启用插件

开启UE4 打开或者新开一个项目之后,打开菜单编纂->插件,然后在插件窗口右上角的搜索栏中搜索 Web UI。确保WebUI插件的已启用复选框已勾选。启用插件后,从头启动虚幻引擎。



至此WebUI插件的下载,安装和启用完成。
使用WebUI插件

在内容浏览器中,点击右键,创建一个控件蓝图。
创建WebUI





然后点击进入创建的控件蓝图:



把Web Interface 拖入到画布中:


选择锚点:


把偏移量等全部设置为零:



设置透明穿透

设置透明穿透之后,网页透明的处所,可以操作下面的三维,勾选上”Enable Transparency”选项既可:



加载网页

可以通过蓝图加载控件、以及设置控件加载的URL地址或者URL文件。
筹备网页文件

此处不赘述
加载网页URL或者文件

首先把编纂器从设计器切换到图表:



然后添加下面蓝图加载一个当地html文件:



添加控件到界面

在关卡蓝图下添加下面的蓝图代码,可以把创建的控件蓝图添加到界面:



总结

最终的运行效果如下,可以看出加载了网页的内容:



本文介绍了了WebUI的基础使用,后续会介绍通过WebUI,网页与UE4之间的通信。
存眷公号“ITMan彪叔” 可以添加作者微信进行交流,及时收到更多有价值的文章。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

×
发表于 2024-1-19 17:07 | 显示全部楼层
打包后加载的网页字体出现与原字体不一致的问题
发表于 2024-1-19 17:08 | 显示全部楼层
支不支持 React 和 Vue 啊?
发表于 2024-1-19 17:08 | 显示全部楼层
ue4貌似不行,ue5可以
发表于 2024-1-19 17:09 | 显示全部楼层
你好,请问你打包之后可以正常显示网页吗?我在UE4里面调试可以,但是打包之后不能显示网页了,希望大佬回复一下,感谢感谢
发表于 2024-1-19 17:10 | 显示全部楼层
打包怎么设置包含web下的文件
发表于 2024-1-19 17:10 | 显示全部楼层
支持 Android 平台吗
发表于 2024-1-19 17:11 | 显示全部楼层
ue4我测试了,可以支持vue,但是vue打包的时候需要将publicPath改为'./'
发表于 2024-1-19 17:11 | 显示全部楼层
同时路由模式需要使用hash模式
懒得打字嘛,点击右侧快捷回复 【右侧内容,后台自定义】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Unity开发者联盟 ( 粤ICP备20003399号 )

GMT+8, 2024-3-1 05:06 , Processed in 0.113400 second(s), 27 queries .

Powered by Discuz! X3.5 Licensed

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表