详解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.js的计算属性computed详解

    Vue.js的计算属性computed详解

    文章介绍了Vue.js中的计算属性(computed properties),解释了它们的基本概念、语法、优势以及应用场景,文章通过有趣的示例展示了计算属性在不同场景下的应用,如计算全名、计算列表的总和和计算对象的属性,感兴趣的朋友一起看看吧
    2025-03-03
  • vue关于点击详情页面keep-alive的缓存问题

    vue关于点击详情页面keep-alive的缓存问题

    这篇文章主要介绍了vue关于点击详情页面keep-alive的缓存问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • vue图片裁剪插件vue-cropper使用方法详解

    vue图片裁剪插件vue-cropper使用方法详解

    这篇文章主要为大家详细介绍了vue图片裁剪插件vue-cropper使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • Vue滚动页面到指定位置的实现及避坑

    Vue滚动页面到指定位置的实现及避坑

    这篇文章主要介绍了Vue滚动页面到指定位置的实现及避坑,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue3路由新玩法useRoute和useRouter详解

    vue3路由新玩法useRoute和useRouter详解

    这篇文章主要介绍了vue3路由新玩法useRoute和useRouter,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • mpvue开发音频类小程序踩坑和建议详解

    mpvue开发音频类小程序踩坑和建议详解

    这篇文章主要介绍了mpvue开发音频类小程序踩坑和建议详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • Vue Element前端应用开发之echarts图表

    Vue Element前端应用开发之echarts图表

    在我们做应用系统的时候,往往都会涉及图表的展示,综合的图表展示能够给客户带来视觉的享受和数据直观体验,同时也是增强客户认同感的举措之一
    2021-05-05
  • vue中使用GraphQL的实例代码

    vue中使用GraphQL的实例代码

    这篇文章主要介绍了vue中使用GraphQL的实例代码,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-11-11
  • 关于在Vue中import和require的用法分析

    关于在Vue中import和require的用法分析

    在Vue项目中,我们经常需要引入外部的模块或文件,这时候就会用到import和require这两个关键字,本文将详细分析它们的用法,并提供具体的代码实例和解释,需要的朋友可以参考下
    2023-06-06
  • vuepress实现自定义首页的样式风格

    vuepress实现自定义首页的样式风格

    这篇文章主要介绍了vuepress实现自定义首页的样式风格,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08

最新评论