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

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

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判断事件名称
  }
},

  • 9
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
UnityWebGLVue.js是两个不同的技术栈,但它们可以在一定程度上进行交互。UnityWebGL是一个基于WebGL游戏引擎,主要用于构建高性能的3D游戏和交互内容,而Vue.js是一个流行的前端JavaScript框架,用于构建可复用的组件式单页应用(SPA)。 要让UnityWebGLVue.js交互,通常的做法是: 1. **数据绑定**:Unity可以通过JavaScript API(例如`UnityMessage`系统)来暴露一些数据,Vue.js可以监听这些数据的变化,并更新UI。反之,Vue.js也可以触发数据变化,通知Unity执行相应的操作。 2. **事件处理**:Vue提供了事件系统,可以用来触发Unity内部的逻辑,如动画、场景切换等。Unity可以通过监听特定的DOM事件来响应Vue的指令或组件行为。 3. **Web Workers**:当涉及到计算密集型任务时,可以使用Web Workers将部分工作放到后台运行,减少阻塞主线程,这时Vue.js可以在主线程上更新UI,而Unity在Worker执行计算。 4. **前端API调用**:Vue.js可以调用Unity提供的JavaScript插件,来进行跨域通信,比如发送数据到服务器或请求Unity进行特定操作。 尽管如此,这种交互不是直接的,而是依赖于一些网络通信机制(如WebSocket或POST请求),并且可能需要对两者的技术特性有深入的理解。 **相关问题:** 1. UnityWebGL如何在浏览器运行并提供JavaScript API? 2. Vue.js如何利用Event Emitter处理与Unity的交互事件? 3. 如何通过Web Workers在VueUnity之间异步传递数据?
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@Moment

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值