快捷導(dǎo)航

詳解Unity webgl 嵌入Vue實(shí)現(xiàn)過程

更新時(shí)間：2024年01月26日 12:02:18 作者：只會(huì)寫B(tài)UG的小白~

Unity webgl嵌入到前端網(wǎng)頁中,前端通過調(diào)用Unity webgl內(nèi)方法實(shí)現(xiàn)需要展示的功能,前端點(diǎn)擊Unity webgl內(nèi)的交互點(diǎn),Unity webgl返回給前端一些需要的數(shù)據(jù),這篇文章主要介紹了Unity webgl 嵌入Vue實(shí)現(xiàn)過程,需要的朋友可以參考下

需求分析：

Unity webgl嵌入到前端網(wǎng)頁中，前端通過調(diào)用Unity webgl內(nèi)方法實(shí)現(xiàn)需要展示的功能，前端點(diǎn)擊Unity webgl內(nèi)的交互點(diǎn)，Unity webgl返回給前端一些需要的數(shù)據(jù)。

例如：當(dāng)我們需要在三維場(chǎng)景中展示庫區(qū)中一些監(jiān)控設(shè)備的部署位置，通過點(diǎn)擊三維場(chǎng)景中的監(jiān)控按鈕打開當(dāng)前監(jiān)控設(shè)備的實(shí)時(shí)畫面，一般情況下打開監(jiān)控需要傳遞當(dāng)前監(jiān)控的IP或者通道號(hào)，這時(shí)Unity webgl向前端返回?cái)?shù)據(jù)就用到了。

實(shí)現(xiàn)過程：

1、Unity webgl向Vue發(fā)送數(shù)據(jù)

首先，Unity webgl向前端發(fā)送數(shù)據(jù)需要定義一個(gè).jslib格式文件作為轉(zhuǎn)接,文件名自?。ńㄗh不要用中文）文件內(nèi)容如下：

mergeInto(LibraryManager.library, {
 UnitySendMessage: function (eventname, data)
{
    window.ReportReady(UTF8ToString(eventname), UTF8ToString(data));
 } //如果多個(gè)方法需要使用逗號(hào)結(jié)尾（在此大括號(hào)后加逗號(hào)），只有一個(gè)方法不需要使用逗號(hào)
});

到此，轉(zhuǎn)接文件已經(jīng)定義好了

接著在Unity腳本中添加 using System.Runtime.InteropServices; 引用（用于COM互操作），

代碼如下：

using System.Runtime.InteropServices;
using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;
public class Test: MonoBehaviour
{
    [DllImport("__Internal")]
    private static extern void UnitySendMessage(string eventname, string data);//方法名及參數(shù)和轉(zhuǎn)接的.jslib文件中的一樣
    private Button button;
    private void Awake()
    {
        button.onClick.AddListener(SendMessage);
    }
    private void SendMessage()
    {
       UnitySendMessage("getbuttonname",GetButtonName());//事件名自己命名即可，前端在監(jiān)聽時(shí)使用
    }
   private string GetButtonName()
    {
        string name  = EventSystem.current.currentSelectedGameObject.name;
        return name;
    }
}

打包后打開index.html文件加入此段代碼：

  window.ReportReady = function (eventname, data) {
            var initD = { detail: { data } }
            var evt = new CustomEvent(eventname, initD)
            window.top.dispatchEvent(evt)
        }

如圖：

最后在Vue mounted中加入即可

window.addEventListener('getbuttonname', this.uinityEvent, false)//getbuttonname對(duì)應(yīng)Unity內(nèi)定義的事件名

2、Vue向Unity發(fā)送數(shù)據(jù)

首先，Vue調(diào)用Unity的方法就比較簡(jiǎn)單了，在Unity內(nèi)定義帶參數(shù)的方法如：

using UnityEngine;
public class Test: MonoBehaviour
{
   private void GetVueData(string value)
    {
        Debug.Log(value);
    }
}

接著打開打包后的index.html文件，在里面加入供前端調(diào)用的方法：

  function GetVueMessage(obj) {
            UnityInstanceV.SendMessage('MainSenceScript', 'GetVueData', JSON.stringify(obj))
//對(duì)應(yīng)的參數(shù)分別為："Unity場(chǎng)景內(nèi)掛載腳本的物體名字"，"方法名"，最后一個(gè)參數(shù)復(fù)制粘貼即可
        }