vue使用iframe内嵌unity模型,并且向模型传递信息,接受信息

张开发
2026/4/16 20:20:43 15 分钟阅读

分享文章

vue使用iframe内嵌unity模型,并且向模型传递信息,接受信息
1 静态模型地址放在跟src同级的static里边testHtml就是需要嵌的网页2 TestHtml文件内容bodydividunity-containercanvasidunity-canvas/canvas/divscriptsrcBuild/KEIPER_12_18.loader.js/scriptscriptletunityInstancenull;createUnityInstance(document.querySelector(#unity-canvas),{dataUrl:Build/KEIPER_12_18.data,frameworkUrl:Build/KEIPER_12_18.framework.js,codeUrl:Build/KEIPER_12_18.wasm,streamingAssetsUrl:StreamingAssets,companyName:DefaultCompany,productName:KEIPER_2025_1211,productVersion:1.0,}).then(instance{unityInstanceinstance;console.log(Unity loaded);window.addEventListener(message,(event){console.log(模型收到来自父窗口的消息,event.data)if(event.data.typecall-callUnity){callUnity(JSON.stringify(event.data.data));}})});functioncallUnity(msg){if(!unityInstance){console.warn(Unity not ready);return;}//进行切片发送constjsonStrtypeofmsgstring?msg:JSON.stringify(msg);constsize1024;consttotalMath.ceil(jsonStr.length/size);for(leti0;itotal;i){constchunkjsonStr.substr(i*size,size);strNewi/total|chunk;unityInstance.SendMessage(WebGLSendAndReceiver,OnReceiveMessage,i/total|chunk);//alert(strNew);}}// Unity → HTML给 Unity 调用functionOnReceiveFromUnity(message){/* alert(Unity 传来的参数是\n\n message); */console.log(从Unity接收到的消息:,message);constmsgObject{type:unity-message,data:message};try{window.top.postMessage(msgObject,*);}catch(error){console.error(发送消息失败:,error);}}/script/body主要就是两个方法1、监听unity发来的消息然后包装一下等待发给vuefunctionOnReceiveFromUnity(message){/* alert(Unity 传来的参数是\n\n message);*/ console.log(从Unity接收到的消息:, message);const msgObject{type:unity-message, data: message};try{window.top.postMessage(msgObject,*);}catch(error){console.error(发送消息失败:, error);}}2、监听来自vue的消息切片发送给unitywindow.addEventListener(message,(event){console.log(模型收到来自父窗口的消息, event.data)if(event.data.typecall-callUnity){callUnity(JSON.stringify(event.data.data));}})3 vue文件代码iframestylewidth: 1920px;height:1080px;idmodelRefrefmodelRefsrcstatic/KEIPER_12_18/TestHtml.htmlframeborder0loadonModelLoad/iframeload方法是模型加载后会执行监听来自unity发送的消息onModelLoad(){window.addEventListener(message,function(event){if(event.data.typeunity-message){console.log(收到来自unity的消息, event.data);this.testIdevent.data.data this.getDialogData(this.testId)}}.bind(this));},4 给unity传信息sendMessageToIframe(message){const iframethis.$refs.modelRef;if(!iframe){console.error(无法获取iframe引用);return;}letnewMessage{type:call-callUnity, data:message};//console.log(向unity发送消息---------------vue, newMessage);iframe.contentWindow.postMessage(newMessage,*);},

更多文章