????????在參考網上眾多資料后，終于將Vue與Unity Webgl雙向通信的功能完成。在此過程中遇到了很多問題，故記錄下整體流程。

方案實現(xiàn)：

1.unity端實現(xiàn)一個jslib文件預定義函數(shù)作為橋接。

2.c#使用DllImport引入和調用預定義的函數(shù)。

3.web端使用js定義被調用函數(shù)。

1.Unity Webgl程序嵌入vue

2.Unity -> vue通信

3.vue -> Unity通信

1.Unity Webgl程序嵌入vue

1）在Unity打包生成webgl項目后，將webgl文件夾內容復制到vue項目目錄下的static文件夾中

添加Web.Config文件，內容如下：

<?xml version="1.0" encoding="utf-8"?>
<!--
  有關如何配置 ASP.NET 應用程序的詳細信息，請訪問
  https://go.microsoft.com/fwlink/?LinkId=169433
-->
<configuration>  
  <system.webServer>
    <httpProtocol>
      <!-- 允許跨域配置 -->
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="X-Requested-With,Content-Type,Authorization" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE,OPTIONS" />
        <add name="Access-Control-Allow-Credentials" value="true" />
      </customHeaders>
    </httpProtocol>
        <staticContent>
            <remove fileExtension=".mem" />  
            <remove fileExtension=".data" />  
            <remove fileExtension=".unity3d" />  
            <remove fileExtension=".jsbr" />  
            <remove fileExtension=".membr" />  
            <remove fileExtension=".databr" />  
            <remove fileExtension=".unity3dbr" />  
            <remove fileExtension=".jsgz" />  
            <remove fileExtension=".memgz" />  
            <remove fileExtension=".datagz" />  
            <remove fileExtension=".unity3dgz" />  
            <remove fileExtension=".json" />  
            <remove fileExtension=".unityweb" />  
           
            <mimeMap fileExtension=".mem" mimeType="application/octet-stream" />  
            <mimeMap fileExtension=".data" mimeType="application/octet-stream" />  
            <mimeMap fileExtension=".unity3d" mimeType="application/octet-stream" />  
            <mimeMap fileExtension=".jsbr" mimeType="application/octet-stream" />  
            <mimeMap fileExtension=".membr" mimeType="application/octet-stream" />  
            <mimeMap fileExtension=".databr" mimeType="application/octet-stream" />  
            <mimeMap fileExtension=".unity3dbr" mimeType="application/octet-stream" />  
            <mimeMap fileExtension=".jsgz" mimeType="application/x-javascript; charset=UTF-8" />  
            <mimeMap fileExtension=".memgz" mimeType="application/octet-stream" />  
            <mimeMap fileExtension=".datagz" mimeType="application/octet-stream" />  
            <mimeMap fileExtension=".unity3dgz" mimeType="application/octet-stream" />  
            <mimeMap fileExtension=".json" mimeType="application/json; charset=UTF-8" />  
            <mimeMap fileExtension=".unityweb" mimeType="application/octet-stream" />  
        </staticContent>
  </system.webServer>
</configuration>

2）在vue項目中以iframe的方式調用

<iframe src="/static/Unity/index.html"
     ref="unityvue">
 </iframe>

2.Unity -> vue通信

1）在unity創(chuàng)建好項目后，在Assets目錄下新建Plugins文件夾，創(chuàng)建一個jslib文件，可以用txt創(chuàng)建文件，文件名加后綴名為“xxx.jslib”，切記后綴名更改為jslib

jslib當作中間者，unity與它通信，前端也與它通信，在此基礎上三者之間進行了通信對接

2）在剛剛創(chuàng)建的jslib文件里，添加以下代碼：

mergeInto(LibraryManager.library,{?? 
    //Unity內自定義調用方法名 PostScore(string sceneName)?
?? ?PostScore: function (sceneName) { 
?? ? strs = Pointer_stringify(sceneName);   //字符串需用Pointer_stringify轉換
?? ? GetScore(strs);                        //前端自定義方法名GetScore(strs)
?? ?},?? ?
});

3）在unity中，新建一個腳本，添加命名空間using System.Runtime.InteropServices; 并添加以下C#代碼：

[DllImport("__Internal")]
    private static extern void PostScore(string currentScene);  //當前場景

在unity中調用PostScore()方法，即調用jslib里的PostScore()方法

4）打包時在Player Settings->Player->Publishing Settings中將壓縮格式禁用，平臺選擇Webgl

5）在unity打包程序后，在index.html中添加GetScore()方法

以上是unity基礎的向前端通信方式。

此時我們在網頁嵌入的Unity頁面中點擊交互按鈕時即可觸發(fā)PostScore(str)方法，將數(shù)據(jù)從Unity頁面?zhèn)鬏數(shù)角岸薶tml中。

3.vue -> Unity通信

?官方文檔

前端頁面向unity頁面?zhèn)髦敌栌玫絬nityInstance.SendMessage()函數(shù)，調用格式如下：

SendMessage(unityObject,unityMethodName,value)

unityObject——unity腳本掛載對象名

unityMethodName——unity腳本內調用方法名（需為public方法）

value——前端需要傳出的值

1） 在Unity2022.3版本打包生成的webgl中不能直接找到unityInstance對象，需要在index.html頁面作如下處理，自定義一個myGameInstance對象用于獲取unityInstance

var myGameInstance = null;

createUnityInstance(document.querySelector("#unity-canvas"), {
        ...//省略代碼
      }).then((unityInstance) => {
        myGameInstance = unityInstance;
      });

2）之后就能愉快的在vue頁面調用該方法了~

const refreshAllItem = ()=>{
      console.log('當前unity對象', unityvue.value)
      unityvue.value.contentWindow.myGameInstance.SendMessage('WeatherControl', 'TransToAfternoon', "")
}

參考文檔

在此感謝以下作者的參考資料~

網頁傳遞參數(shù)到Unity WebGL ，WebGL傳遞參數(shù)到網頁_webgl unityinstance_先生沉默先的博客-CSDN博客

WebGL給Unity傳遞參數(shù)問題1： Cannot read properties of undefined (reading ‘SendMessage‘)_先生沉默先的博客-CSDN博客

Unity（WebGL）與JS通訊2022最新姿勢 - 知乎

web通信 - web 調用unity方法_嗶哩嗶哩_bilibili文章來源地址http://www.zghlxwxcb.cn/news/detail-651609.html

到了這里，關于vue項目結合unity webgl通信（親身實踐 Unity2022.3版本）的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！