关于unity发布webgl嵌入vue项目通信方法

关于unity发布webgl嵌入vue项目通信方法

码农世界 2024-05-14 前端 74 次浏览 0个评论

以下总结主要是前端的嵌入方法

1.引入webgl文件

将unity导出的webgl文件包放至vue项目的public下面

2.在webgl下的index.html添加通信方法,如图

附上代码:

var unityInstanceV;
function ReportReady() {//初始化
  window.parent.postMessage({ guid: "", event: "ReportReady" }, "*");
}
function TestSend(data)//unity发消息给vue
{
  window.parent.postMessage(JSON.parse(data), "*");
 }
/**
  * GameManager:unity中绑定方法的物体
  * receiveMsgFromVue:unity中的方法
  * */
function sendMsgToUnity(obj) { //vue发消息给unity
  unityInstanceV.SendMessage('GameManager', 'receiveMsgFromVue', JSON.stringify(obj))
}

3.页面通过iframe引入webgl

4.具体业务功能中给unity发送消息,调用webgl中写的方法

 this.$refs.unityIframe.contentWindow.sendMsgToUnity(data);

5.监听unity给vue发消息,注意需要销毁监听事件

 mounted() {
    window.addEventListener("message", this.getUnityData); //监听unity给vue发消息
  }
getUnityData(e){
  if (e.data.eventName == "初始化" || e.data.eventName == "请求数据") {
       //通过eventName判断事件名称
  }
},

转载请注明来自码农世界,本文标题:《关于unity发布webgl嵌入vue项目通信方法》

百度分享代码,如果开启HTTPS请参考李洋个人博客
每一天,每一秒,你所做的决定都会改变你的人生!

发表评论

快捷回复:

评论列表 (暂无评论,74人围观)参与讨论

还没有评论,来说两句吧...

Top