Unity3D（2021版）打包成webgl和前端vue交互

1.unity部分

在assets目录的Plugins文件夹新建一个文档文字随便命名，后缀名改为xxxx.jslib

在里面写入这样一段代码

mergeInto(LibraryManager.library, {
    SendMsgToVue: function (msg) {
        TestSend(Pointer_stringify(msg)) //新的unity版本Pointer_stringify，改为UTF8ToString
        console.log("SendMsgToVue msg=="+msg)
    },
 
    ReportReady: function () {
        window.ReportReady()
    },
})

SendMsgToVue这是需要在unity里面调用的，用来unity给vue发送消息

TestSend需要在打包生成webgl后在index.html里面调用的

然后，在unity新建一个脚本文件

2.vue部分

以下是unity打包成webgl后生成的index.html

 红色框部分是我后面根据需要加进去的，其它是打包生成的代码

打包之后的目录结构为

 根据需要可放在public目录下，例如

 然后在vue代码里面引入index.html

<iframe ref="unityIframe" src="/unity3D/index.html" frameborder="0"></iframe>

在mounted()里面监听

window.addEventListener('message', this.unityWatch)

unityWatch(e) {
    console.log('unityWatch方法调用 e==' + e.data.guid + '    event=' + e.data.event)
  if (e.data.event == 'ReportReady') {

  }
  if (e.data.guid != null&& e.data.event == 'guid') {

  }
  if (e.data.event == 'modelLoadingFinish') {

  }
},

unityWatch这方法里面监听来自unity发送过来的消息

最后vue里面调用

this.$refs.unityIframe.contentWindow.VueSendToUnity(data)

向unity发送消息。VueSendToUnity方法是我自己定义的，此方法先得在index.html里面定义好，才能调用。

以下是unity脚本接收的函数，SetGuid对应之前在index.html里面定义好的

注意：

unity打包成webgl时得注意下设置，设置不对可能会报以下错误

unity的设置请参考以下

demo下载链接：

https://download.csdn.net/download/qq_29194615/85214479