赞
踩
目录
在UE4中嵌入Web页面,使用WebUI插件加载Web页面并需要支持透明穿透与通信
https://github.com/tracerinteractive/UnrealEnginehttps://github.com/tracerinteractive/UnrealEngine
1. 把下载的插件拷贝到UE4项目的Plugins目录下
- [YourProject]
- Plugins
- HttpLibrary(非必须)
- JsonLibrary(必须)
- WebUI(必须)
- YourProject.uproject
2. 打开UE4项目,并确保WebUI已加载
创建UMG取名WUI,并添加WebInterface控件,Anchors全屏
在关卡蓝图中创建WUI,并连接逻辑
- [YourProject]
- Content
- HTML (必须)
-echarts.js
-Test.html
- YourProject.uproject
1. echarts.jsecharts.js at 5.2.2https://github.com/apache/echarts/blob/5.2.2/dist/echarts.js
2. Test.html
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>ECharts</title>
- <script>
- // create the global ue4(...) helper function
- "object"!=typeof ue&&(ue={}),uuidv4=function(){return"10000000-1000-4000-8000-100000000000".replace(/[018]/g,function(t){return(t^crypto.getRandomValues(new Uint8Array(1))[0]&15>>t/4).toString(16)})},ue4=function(r){return"object"!=typeof ue.interface||"function"!=typeof ue.interface.broadcast?(ue.interface={},function(t,e,n,o){var u,i;"string"==typeof t&&("function"==typeof e&&(o=n,n=e,e=null),u=[t,"",r(n,o)],void 0!==e&&(u[1]=e),i=encodeURIComponent(JSON.stringify(u)),"object"==typeof history&&"function"==typeof history.pushState?(history.pushState({},"","#"+i),history.pushState({},"","#"+encodeURIComponent("[]"))):(document.location.hash=i,document.location.hash=encodeURIComponent("[]")))}):(i=ue.interface,ue.interface={},function(t,e,n,o){var u;"string"==typeof t&&("function"==typeof e&&(o=n,n=e,e=null),u=r(n,o),void 0!==e?i.broadcast(t,JSON.stringify(e),u):i.broadcast(t,"",u))});var i}(function(t,e){if("function"!=typeof t)return"";var n=uuidv4();return ue.interface[n]=t,setTimeout(function(){delete ue.interface[n]},1e3*Math.max(1,parseInt(e)||0)),n});
- </script>
- <!-- 引入刚刚下载的 ECharts 文件 -->
- <script src="echarts.js"></script>
- <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
-
- </head>
- <body>
- <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
- <button id="btn_Print" onclick="Print()"> Print </button>
- <button id="btn_Version" onclick="Version()"> GetVersion </button>
- <p id="fpsMeter">0 FPS</p>
- <div id="main" style="width: 600px;height:400px;"></div>
- <script type="text/javascript">
- // 基于准备好的dom,初始化echarts实例
- var myChart = echarts.init(document.getElementById('main'));
-
- // 指定图表的配置项和数据
- var option = {
- title: {
- text: 'ECharts 入门示例'
- },
- tooltip: {},
- legend: {
- data: ['销量']
- },
- xAxis: {
- data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
- },
- yAxis: {},
- series: [
- {
- name: '销量',
- type: 'bar',
- data: [5, 20, 36, 10, 10, 20]
- }
- ]
- };
-
- // 使用刚指定的配置项和数据显示图表。
- myChart.setOption(option);
-
- // web端发送print事件给ue4,ue4打印msg
- function Print()
- {
- let msg = 'Hello World';
- ue4("print", msg);
- }
-
- // web端发送version事件给ue4,ue4打印msg并回调发送ue4引擎版本号给web端
- function Version()
- {
- let msg = 'version:1.0';
- ue4("version", msg, function(v){
- // 收到ue4的回调消息,打印回调参数信息(参数类型必须是string)
- if(typeof v == "string")
- alert(v);
- });
- }
-
- // 绑定事件
- ue.interface.setFPS = function(fps)
- {
- // set element text
- $("#fpsMeter").text(fps.toFixed(1) + " FPS");
- };
- </script>
- </body>
- </html>
打包时拷贝Content中的非Asset资产
UE4.26 WebBrowser使用的浏览器内核cef3版本是3.3071.1644且默认不支持h264
- //替换全部
- Epic Games\UE_4.26\Engine\Binaries\ThirdParty\CEF3\Win64
-
- //替换libcef.lib
- Epic Games\UE_4.26\Engine\Source\ThirdParty\CEF3\cef_binary_3.3071.1611.g4a19305_windows64\Release
WebBrowser打开网站测试: HTML5test - How well does your browser support HTML5?
UE4打开Web调试窗口:点击web里的任意元素,按键盘 Shift + Ctrl + I
即可弹出console窗口
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。