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新建一个脚本文件

unity3d前端架构 unity3d和前端_html

2.vue部分

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

unity3d前端架构 unity3d和前端_发送消息_02

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

打包之后的目录结构为

unity3d前端架构 unity3d和前端_发送消息_03

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

unity3d前端架构 unity3d和前端_unity_04

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


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


在mounted()里面监听


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


unity3d前端架构 unity3d和前端_unity_05


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里面定义好的

unity3d前端架构 unity3d和前端_web_06

注意:

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

unity3d前端架构 unity3d和前端_unity3d前端架构_07

unity的设置请参考以下

unity3d前端架构 unity3d和前端_unity_08

unity3d前端架构 unity3d和前端_unity_09

unity3d前端架构 unity3d和前端_unity3d前端架构_10

unity3d前端架构 unity3d和前端_unity_11