Unity WebGL交互通信

Unity 调用 H5

本文使用的 unity 版本为:2021.3.3

1.在unity中通过c#的特性DllImport导出外部实现函数

csharp 复制代码
    [DllImport("__Internal")]
    private static extern void callJsString(string param);
    [DllImport("__Internal")]
    private static extern void callJsInt(int param);
    [DllImport("__Internal")]
    private static extern void callJsFloat(float param);
    [DllImport("__Internal")]
    private static extern void callJsBoolean(bool param);

2.在unity的Plugins文件夹(没有则创建一个)里面创建一个后缀为.jslib的文件

3.在xxx.jslib文件中实现函数,如下

javascript 复制代码
mergeInto(LibraryManager.library, {

  callJsString: function (param) {
     console.log(Pointer_stringify(param));
  },

  callJsInt: function (param) {
       console.log(param);
  },
  
   callJsFloat: function (param) {
       console.log(param);
  },
   callJsBoolean: function (param) {
       console.log(param);
  },
});

注意: 使用传参字符串的时候,使用Pointer_stringify转下字符串,否则可能会报错或者乱码

4.如果想要调用.js里面的接口或者.html里面的方法,可以通过往window里面注册函数进行调用的方式

例如:在index.html里面注册函数 window.httpPost = httpPost;

javascript 复制代码
<script>
   function httpPost(url, params) {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4 && (xhr.status >= 200 && xhr.status < 300)) {
                let data = xhr.response;
                console.log("Status: " + xhr.status + " " + xhr.statusText + "  data: " +         data);
                success(data);
            }
            else if (xhr.status >= 400) {
                console.log("Status: " + xhr.status + " " + xhr.statusText);
                fail(xhr.status, xhr.statusText)
            }
        }
        console.log("Status: Send Post Request to " + url);
        xhr.open("POST", url, true);
        //xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
        xhr.setRequestHeader("Content-Type", "application/json");
        xhr.timeout = 10000;

        xhr.send(params);
    }

   window.httpPost = httpPost;
</script>

5.可以在xxx.jslib文件中调用index.html里面的httpPost函数,当时也可以直接把函数实现直接放在xxx.jslib文件中

javascript 复制代码
mergeInto(LibraryManager.library, {

  callJsString: function (url,params) {
     window.httpPost(Pointer_stringify(url),Pointer_stringify(params)); 
  },
});

6.上面的方式可以让我们在案例httpPost调用其他位置的.js代码或者其他位置的插件

H5调用 Unity

1.这里的方式主要是在index.html文件中在创建unityInstance的时候通过缓存unityInstance并向unityInstance发送消息的方式实现

2.在index.html中创建unityInstance的时候缓存unityInstance

这里通过:window.unityInstance = unityInstance; 缓存了unityInstance实例

javascript 复制代码
         var script = document.createElement("script");
            script.src = loaderUrl;
            script.onload = () => {
              createUnityInstance(canvas, config, (progress) => {
                progressBarFull.style.width = 100 * progress + "%";
              }).then((unityInstance) => {
                loadingBar.style.display = "none";
                fullscreenButton.onclick = () => {
                  unityInstance.SetFullscreen(1);
                };
                window.unityInstance = unityInstance;
              }).catch((message) => {
                alert(message);
              });
            };

3.向unity发送消息

gameobjectName:接收消息的gameobject名

funcName:方法名

param:参数,字符串,可以传json

javascript 复制代码
 function sendUnityMessage(gameobjectName,funcName,param) 
 {
      if(window.unityInstance)
      {
         window.unityInstance.SendMessage(gameobjectName,funcName,param);
      }
 }
相关推荐
山西第一大怨种5 小时前
我的浏览器下雨了进水了
前端·webgl
阿华的代码王国6 小时前
【Android】适配器与外部事件的交互
android·xml·java·前端·后端·交互
跨界混迹车辆网的Android工程师7 小时前
实现Android图片手势缩放功能的完整自定义View方案,结合了多种手势交互功能
android·交互
wearegogog1237 小时前
C语言中的输入输出函数:构建程序交互的基石
c语言·开发语言·交互
NRatel18 小时前
亚马逊S3的使用简记(游戏资源发布更新)
游戏·unity·amazon s3
SmalBox1 天前
【渲染流水线】[几何阶段]-[屏幕映射]以UnityURP为例
unity·渲染
SmalBox2 天前
【渲染流水线】[几何阶段]-[归一化NDC]以UnityURP为例
unity·渲染
SmalBox3 天前
【渲染流水线】[几何阶段]-[图元装配]以UnityURP为例
unity·渲染
sixgod_h3 天前
Threejs源码系列- Object3D
webgl·three.js
MARS_AI_3 天前
云蝠智能 VoiceAgent:重构物流售后场景的智能化引擎
人工智能·自然语言处理·重构·交互·信息与通信