介绍
在数字孪生大屏开发中，使用UE集成场景和数据图表是一个常见需求。为了实现这个目标，有两种做法：一种是在UE游戏实例里嵌入html内容，打包成可执行文件；另一种是将UE导出为html模块，嵌入到web工程里。本文将探讨第一种做法，即如何在UE中加载html，我搜罗了互联网上开发者们的做法，然后自己实践了一遍形成这个记录。
准备工作
1.安装UE，本文使用版本为UE4.26；
2.安装UE4插件 WebUI ，安装教程见文末的链接“UE4 WebUI插件使用指南”，这里建议直接将插件安装到游戏引擎目录中。在实际安装中发现WebUI是需要依赖JsonLibrary的，因此需要以下两个包都下载安装，否则启动时会报错。
3.开启或新建项目时启用插件，打开“编辑-插件”，在右侧栏目中搜到WebUI和JsonLiberay两个插件，勾选”已启用”，然后重启引擎。
加载html
1.打开或新建一个项目后，在底部面板内容浏览器中右键创建控件蓝图，然后双击控件进入编辑
2.把Web Interface拖入后稍微编辑一下尺寸
修改透明穿透以便鼠标点击底部场景，这个透明穿透也可以不勾选，可以切换状态看看区别。
3.准备网页内容，这里只要写一些基础html就行了，我们把UE和js的交互放到后面，放到工程目录${工程名}\Content\中，如图所示是即将在UE中加载的html页面。
4.回到UE工程刚刚新建的控件蓝图，右上角切换到图表模式，编辑控件加载网页的部分。
5.接下来需要将控件添加到主界面，回到主编辑区域，打开关卡蓝图，每个关卡只会有一个关卡蓝图。
通过右键添加一个事件监听，根据你新建项目类型的不同，这个“事件开始运行”节点可能一开始就存在，如何没有的话就右键添加一个即可。拖动方向图标创建节点，搜“create w” 找到“创建Web UI控件”，Class选我们自己刚刚创建的控件；添加到视口。
6.以上几步顺利做完，点击保存运行，应该能够看到以下画面。
UE和JS的交互
重点来了，敲黑板！实现UE和JS的交互需要几步？
在html中加入WebUI插件脚本
1.我们来看一下html中脚本内容，以下是支持UE和JS通讯的基础脚本，可以在WebUI的文档中复制。
// 加入WebUI插件脚本
// 声明了html可以用变量ue.interface声明方法,
// 可以用ue4(fnName,param, callback)调用UE中的方法
"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),ue4=ue.interface.broadcast;
- html中声明UE可调用方法，以及使用js调用UE方法（必须是已声明过的方法）
// 从UE中可以调用以下方法
ue.interface.sayHello = function(msg){
alert(`hello, ${msg}`)
}
ue.interface.ue2js = function(ueData){
const jsonObj = JSON.parse(ueData)
setChartData(jsonObj)
}
// html可以调用UE中的方法
function callUE(){
//这里声明了调用UE中的console方法，参数为"Hello,Gyrate"
ue4("console","Hello,Gyrate")
}
在UE中调用JS方法
1.在刚刚创建的空间中加入若干按钮，注意按钮和文本是分开的
2.UE调用JS。切换到图表模式，编辑蓝图，下图的意思是UE里点击button时，创建了一个值为“Gyrate”的参数，调用控件Browser里面的sayHello方法并执行。
实现效果如图所示。
JS中调用UE
1.事件声明如图所示，我们通过将自定义事件绑定到Browser控件中，并且与具体的UE内部方法做映射即可。
2.在js中调用UE方法只需触发对应的事件，如下所示。ue4有三个参数，分别是name事件名称（必填）、param参数（支持String和JSON），callback回调函数。
//在视口打印字符串
ue4("console","Hello,World")
//退出游戏
ue4("quit")
注意点
如何调试UE中的浏览器
我们有必要知道当前浏览器支持哪些h5特性，以保证大屏的兼容性。可以使用快捷键Shift + Ctrl + I 打开开发者控制面板。
html中的视频无法正常显示播放
这是因为UE4的WebBrowser自带的cef3为3071版本，默认不支持h264等直播流，导致web里的直播流无法播放。而很流行的WebUI也是基于WebBrowser开发出来的，所以存在一样的问题。解决方法就是找到与当前游戏版本和系统匹配的cef3文替换就可以。具体做法看文末链接。
在console选线面板中输入如下代码，将当前页面定位到h5测试页面。
location.href ="http://html5test.com/"
可以看到WebUI目前视频音频的支持是有一些問題
