【数字孪生】UE4虚幻引擎WebUI插件与前端JS的函数调用

UE4虚幻引擎与前端Web页面的结合

数据交互

• 前端JS

  <script>
  //第一步：定义帮助函数 可直接复制
   "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);


    // js调用ue4， 参数1：函数名 参数2：json数据对象
    // 该调用可根据具体需求写在对应位置，此处为测试 
    ue4('JScallUE4', {
    
     name: 'xiaoli' });

    // 定义UE可调用的函数UE4CallJS
    // 该调用可根据具体需求写在对应位置，此处为测试 
    ue.interface.UE4CallJS = function(Json)=> {
    
    
      alert('UE4CallJS:  ' + Json);
    };

  </script>

• 蓝图类 JS调用UE4事件
  其中自定义InterfaceEvent事件，在【数字孪生】UE4虚幻引擎与前端Web页面的结合中提到，在加载页面时是需要连接到绑定事件到OnInterfaceEvent上，进行绑定注册。切换名称的添加引脚对应的名称为在JS中调用UE4的函数名（如‘JSCallUE4’）。
  
• 蓝图类 UE4调用JS中定义的函数
  通过WebInterface的Call方法，传入JS中定义的函数名称（如‘UE4CallJS’）和函数参数Data，即可调用JS中的函数进行数据交互。