vue與unity交互最終版本 不需要安裝任何第三方插件

請大家安心看完，寫的比較詳細，并且絕對有效，所以篇幅比較大，也可以直接看圖解，看不懂圖解后再看文檔也可

因為之前我使用的vue-unity-webgl 后來發(fā)現(xiàn)使用過程中容易出現(xiàn)各種問題，也可能是我們菜吧，沒弄懂插件如何使用，下面先說一下我遇見的問題

問題1：unity為了解決無法輸入中文問題，使用了網(wǎng)上的解決方案，因為vue-unity-webgl會將unity的東西完全融入到vue，所以unity的操作也會導(dǎo)致vue頁面出現(xiàn)異常，例如我的el-input無法正常輸入

問題2：unity引入hls，為了解決視頻播放問題，因為vue-unity-webgl不支持引入其他js，導(dǎo)致unity無法正常播放視頻（我還傻呵呵的改了三方源碼，打了補丁，現(xiàn)在血虧）

綜合以上2個原因，我決定從根本上解決此問題，也為了避免不再背鍋，想出了以下解決方案，這個方案比較簡單但卻非常有效；

思路：

1. 在vue中依然使用iframe引入unity文件，原因：iframe是另外一個window，即使unity程序出現(xiàn)了使用了全局的方法來進行操作，也不行影響到vue程序
2. unity編輯后的index.html被iframe引入，然后再index.html中追加幾行代碼，進行unity的方法接受和vue傳遞，詳情見圖解

好處：
unity存在于iframe的獨立window中，可以避開好多非常規(guī)操作引起的問題，并且此方法可以適用于任何前端和unity的交互場景，不要求一定是vue

tip：
不用擔心iframe層級無限高導(dǎo)致布局困難的問題，新版unity即使在iframe中引入，也是可以被定位元素覆蓋住的

unity文件寫法：

1、定義一個jslib文件，名字隨意起，但是一定要放在Plugins文件夾，代碼示例如下

這里定義了一個sayHello和一個ReportReady，簡單解釋下：
sayHello是unity自己測試用的方法；

ReoprtReady是unity加載完成后，觸發(fā)window對象下的ReportReaddy事件，這個事件明顯不存在，是對于window對象的自定義方法；

至于前端需要調(diào)用的方法存在于第二步中；

2、新建一個測試文件，創(chuàng)建一個物體名為JsTalker

此文件的寫法相信unity小伙伴都知道意思，不過多贅述，簡要描述下就是，此物體引用過來第一步寫的2個方法（SayHello、RepoetReady），暴露出去一個方法（SetToken），這個暴露出來的方法就是前端需要調(diào)用的

此時運行表現(xiàn)形式應(yīng)該會提示window下無ReportReady方法，所以需要在unity打包后生產(chǎn)的index.html中加入一行代碼 window.ReportReady=function(){} 此時不會報錯；

接下來就是unity加載完畢執(zhí)行ReportReady，然后input按下指定按鍵，觸發(fā)SayHello，前端如果調(diào)用SetToken會使unity中text變量變動

vue文件寫法

1、在index.html頁面中定義的RepoetReady中，按照下列方式進行書寫

解釋：當unity觸發(fā)window.ReportReady的時候，向頂層window傳遞事件，然后調(diào)用定義好的send；

表現(xiàn)形式：unity加載完畢，觸發(fā)ReportReady，前端接收到后執(zhí)行send，同時向上層傳遞事件，進行交互；

send寫法為固定api，解釋見上圖

2、在使用iframe引入unity的vue組件中書寫

當index.html使用window.top.dispatchEvent的時候，此處可以監(jiān)聽到；

提問：為啥監(jiān)聽的是fn，因為unity調(diào)用window.ReportReady的時候，攜帶的參數(shù)是（‘fn',…），這里是我和unity工程師定義的，第一個參數(shù)是事件名字，第二個參數(shù)為攜帶參數(shù)

當vue程序出發(fā)send事件的時候，實際上是觸發(fā)index.html中定義的send方法，然后攜帶參數(shù)，index.html接受到后，會將參數(shù)發(fā)送給unity

此時，雙向交互完成。

總結(jié)：

window.ReportReady 是自定義事件，是由unity掛載到window的，當unity需要給vue發(fā)送事件的時候，會調(diào)用window.ReportReady()，然后帶有2個參數(shù)，一個是事件名字，一個是攜帶參數(shù)，這個示例中，攜帶事件名字為fn；
前端接受到后，通過dispatch來派發(fā)到頂層window，頂層window就是咱們的vue，然后vue中通過事件監(jiān)聽來獲?。?br /> 發(fā)送事件的話就是通過send，通過contentWindow來調(diào)用iframe中（unity打包后的index.html）的方法，方法為固定api寫法，其中貼圖中有注釋

到此這篇關(guān)于unity與vue交互(無第三方插件）的文章就介紹到這了,更多相關(guān)unity與vue交互內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論