基于Unity+Vue通信交互的WebGL项目实践

unity-webgl 是无法直接向vue项目进行通信的,需要一个中间者 jslib 文件
jslib当作中间者,unity与它通信,前端也与它通信,在此基础上三者之间进行了通信对接

看过很多例子:介绍的都不是很详细,不如自己写, 注意看箭头走向

共同点:unity 打包项目都放 在 public 里面

方式一:通过 ifram 引入 到vue 项目

csharp 复制代码
<iframe ref="iframecc" src="./model/index.html" frameborder="0" allowfullscreen></iframe>

1、unity 通过 jslib 向 html 传递数据:

复制代码
1、jslib 先传给 ifram

其实就是调用html 里面的方法,回调给我们数据,我们只要写好方法名给jslib即可(unity开发者去写进去),就能收到信息

csharp 复制代码
// 接收来自 jslib 的方法 = >传给vue
function getUnityMessage(str) {
    // 注意格式-一般是string 
    let message = JSON.parse(str)
    if(message.id && message.id>=0) {
        // 向ifram父元素发送数据
        window.parent.postMessage(message, '*');
    }else {
        
    }
    
}
复制代码
 2、ifram再传给vue,vue 再接收ifram传递的数据
csharp 复制代码
// 接受来自ifram 的数据
window.addEventListener('message', function(event) {
    // 确保消息来源可靠,可选
    // if (event.origin !== 'http://iframepage.com') return;
    console.log('来自ifram', event.data);
    // 根据接收到的数据执行相应操作
}, false);

2、vue 向 unity 传递数据

复制代码
1、先传给ifram 发送消息
csharp 复制代码
let iframecc = ref(null) // ifram -dom
let sendMessage = ()=>{
  const iframeWindow = iframecc.value.contentWindow;
  iframeWindow.postMessage('messgae', '*');
}

2、ifram 再传给 jslib

csharp 复制代码
/*
  SendMessage方法的三个参数依次是
  @param1 - unity程序中挂载c#脚本的物体的name
  @param2 - c#脚本实现的接收前段传参的中的函数
  @param3 - 实际传的参数
*/
window.addEventListener('message', function(event) {
    // if (event.origin !== 'http://parentpage.com') return;
    console.log('888:', event.data);
    window.unityInstance.SendMessage("sendPanel","recvmsg",event.data)
}, false);

备注:SendMessage方法 的来源,我们直接用就行

csharp 复制代码
const script = document.createElement("script");
script.src = loaderUrl;
script.onload = () => {
  createUnityInstance(canvas, config, (progress) => {
    spinner.style.display = "none";
    progressBarEmpty.style.display = "";
    progressBarFull.style.width = `${100 * progress}%`;
  }).then((unityInstance) => {
    // 此处html中, 已经将发送信息的 SendMessage 挂载到了 window 上: window.unityInstance.SendMessage()
    window.unityInstance = unityInstance;
    loadingCover.style.display = "none";
    
    if (canFullscreen) {
      if (!hideFullScreenButton) {
        fullscreenButton.style.display = "";
      }
      fullscreenButton.onclick = () => {
        unityInstance.SetFullscreen(1);
      };
    }
  }).catch((message) => {
    alert(message);
  });
};

方式二: vue+通过插件

链接:参考

相关推荐
康康的幸福生活1 天前
webgl2 方法解析: shaderSource()
webgl
魂断蓝桥6661 天前
如何基于three.js(webgl)引擎架构,实现3D医院、3D园区导航,3D科室路径导航
webgl·数字孪生·threejs·3d定位、三维室内定位、3d建筑·three.js路径规划、三维a*算法、javascript三维导航,·3d医院·3d导航·园区导航
康康的幸福生活11 天前
webgl2 方法解析: SCISSOR_TEST
javascript·webgl
魂断蓝桥66613 天前
如何基于three.js(webgl)引擎架构,实现3D机房园区,数据中心消防系统
webgl·数字孪生·three.js·物联网3d·3d机房·、3d工厂、3d工业园区、智慧制造、智慧工业、智慧工厂·bim管理系·3d消防·消防演习模拟
康康的幸福生活15 天前
webgl2 方法解析: colorMask()
webgl
Mapmost15 天前
全新升级!3DTiles加载速度Mapmost完胜Cesium
性能优化·webgl·cesium
康康的幸福生活15 天前
webgl2 方法解析: texImage2D()
webgl
点量云实时渲染-小芹16 天前
UE/Unity/Webgl云渲染推流网址,如何与外部网页嵌套和交互?
unity·webgl·webgl云渲染网页交互·点量云流
小old弟18 天前
🚀🚀🚀WebGL 加载 glTF 模型
前端·webgl
放逐者-保持本心,方可放逐22 天前
webgl(three.js 与 cesium 等实例应用)之浏览器渲染应用及内存释放的关联与应用
开发语言·javascript·webgl·顶点着色器·three.js 释放·cesium 释放·片元着色器