详解Unity webgl 嵌入Vue实现过程

 更新时间:2024年01月26日 12:02:18   作者:只会写BUG的小白~  
Unity webgl嵌入到前端网页中,前端通过调用Unity webgl内方法实现需要展示的功能,前端点击Unity webgl内的交互点,Unity webgl返回给前端一些需要的数据,这篇文章主要介绍了Unity webgl 嵌入Vue实现过程,需要的朋友可以参考下

需求分析:

Unity webgl嵌入到前端网页中,前端通过调用Unity webgl内方法实现需要展示的功能,前端点击Unity webgl内的交互点,Unity webgl返回给前端一些需要的数据。

例如:当我们需要在三维场景中展示库区中一些监控设备的部署位置,通过点击三维场景中的监控按钮打开当前监控设备的实时画面,一般情况下打开监控需要传递当前监控的IP或者通道号,这时Unity webgl向前端返回数据就用到了。

实现过程:

1、Unity webgl向Vue发送数据

首先,Unity webgl向前端发送数据需要定义一个.jslib格式文件作为转接,文件名自取(建议不要用中文)文件内容如下:

mergeInto(LibraryManager.library, {
 UnitySendMessage: function (eventname, data)
{
    window.ReportReady(UTF8ToString(eventname), UTF8ToString(data));
 } //如果多个方法需要使用逗号结尾(在此大括号后加逗号),只有一个方法不需要使用逗号
});

到此,转接文件已经定义好了

接着在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);//方法名及参数和转接的.jslib文件中的一样
    private Button button;
    private void Awake()
    {
        button.onClick.AddListener(SendMessage);
    }
    private void SendMessage()
    {
       UnitySendMessage("getbuttonname",GetButtonName());//事件名自己命名即可,前端在监听时使用
    }
   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对应Unity内定义的事件名

2、Vue向Unity发送数据

首先,Vue调用Unity的方法就比较简单了,在Unity内定义带参数的方法如:

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

接着打开打包后的index.html文件,在里面加入供前端调用的方法:

  function GetVueMessage(obj) {
            UnityInstanceV.SendMessage('MainSenceScript', 'GetVueData', JSON.stringify(obj))
//对应的参数分别为:"Unity场景内挂载脚本的物体名字","方法名",最后一个参数复制粘贴即可
        }

最后只需Vue调用此方法并传递参数就可以了,如果这篇文章帮助到你,就点个赞吧!

到此这篇关于Unity webgl 嵌入Vue实现过程的文章就介绍到这了,更多相关Unity webgl 嵌入Vue内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue静态配置文件不进行编译的处理过程(在public中引入js)

    vue静态配置文件不进行编译的处理过程(在public中引入js)

    这篇文章主要介绍了vue静态配置文件不进行编译的处理过程(在public中引入js),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • vue+el-table实现合并单元格

    vue+el-table实现合并单元格

    这篇文章主要为大家详细介绍了vue+el-table实现合并单元格,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 通过vue.extend实现消息提示弹框的方法记录

    通过vue.extend实现消息提示弹框的方法记录

    这篇文章主要给大家介绍了关于通过vue.extend实现消息提示弹框的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • Vue之读取并解析ini文件中的内容

    Vue之读取并解析ini文件中的内容

    这篇文章主要介绍了Vue之读取并解析ini文件中的内容,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue3父子同信的双向数据的项目实现

    vue3父子同信的双向数据的项目实现

    我们知道的是,父传子的通信,和子传父的通信,那如何实现父子相互通信的呢,本文就来详细的介绍一下,感兴趣的可以了解一下
    2023-08-08
  • vue更多筛选项小组件使用详解

    vue更多筛选项小组件使用详解

    这篇文章主要为大家详细介绍了vue更多筛选项小组件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • Vue 使用计时器实现跑马灯效果的实例代码

    Vue 使用计时器实现跑马灯效果的实例代码

    这篇文章主要介绍了Vue 使用计时器实现跑马灯效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-07-07
  • vue中实时监听div元素盒子的宽高方法

    vue中实时监听div元素盒子的宽高方法

    这篇文章主要给大家介绍了关于vue中如何实时监听div元素盒子的宽高的相关资料,在Vue中你可以使用Vue的计算属性和侦听器来动态监测元素的高度,文中给出了简单代码示例,需要的朋友可以参考下
    2023-09-09
  • Vue父子组件之间的通信实例详解

    Vue父子组件之间的通信实例详解

    在vue组件通信中其中最常见通信方式就是父子组件之中的通信,而父子组件的设定方式在不同情况下又各有不同。这篇文章主要介绍了Vue---父子组件之间的通信,需要的朋友可以参考下
    2018-09-09
  • vue实现上传图片添加水印(升级版)

    vue实现上传图片添加水印(升级版)

    这篇文章主要为大家详细介绍了vue实现上传图片添加水印的升级版,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09

最新评论