详解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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 解决vant中 tab栏遇到的坑 van-tabs

    解决vant中 tab栏遇到的坑 van-tabs

    这篇文章主要介绍了解决vant中 tab栏遇到的坑 van-tabs,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue.set 全局操作简单示例

    Vue.set 全局操作简单示例

    这篇文章主要介绍了Vue.set 全局操作,结合简单实例形式分析了Vue.set 全局操作相关使用技巧与注意事项,需要的朋友可以参考下
    2019-09-09
  • el-form中的rules未生效的解决方法

    el-form中的rules未生效的解决方法

    本文主要介绍了el-form中的rules未生效的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02
  • vue实现数字加逗号分隔

    vue实现数字加逗号分隔

    在Vue项目中,对数字进行格式化,实现带小数的数字三位一分隔的效果,可以通过自定义过滤器来实现,使用JavaScript的toLocaleString方法可以方便地将数字转换成带逗号的格式
    2024-10-10
  • vue中引入高德地图并多点标注的实现步骤

    vue中引入高德地图并多点标注的实现步骤

    这篇文章主要介绍了vue中引入高德地图并多点标注,实现步骤是通过vue的方法引入地图,初始化地图,设置宽和高,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • Vue3如何解决路由缓存问题(响应路由参数的变化)

    Vue3如何解决路由缓存问题(响应路由参数的变化)

    这篇文章主要介绍了Vue3如何解决路由缓存问题(响应路由参数的变化),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 前端vue3 setup使用教程

    前端vue3 setup使用教程

    这篇文章主要为大家介绍了前端vue3架构setup使用教程,详细介绍 setup 的用法,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-02-02
  • element-ui tree 异步树实现勾选自动展开、指定展开、指定勾选功能

    element-ui tree 异步树实现勾选自动展开、指定展开、指定勾选功能

    这篇文章主要介绍了element-ui tree 异步树实现勾选自动展开、指定展开、指定勾选,项目中用到了vue的element-ui框架,用到了el-tree组件,由于数据量很大,使用了数据懒加载模式,即异步树,需要的朋友可以参考下
    2022-08-08
  • 使用vue插件axios传数据的Content-Type及格式问题详解

    使用vue插件axios传数据的Content-Type及格式问题详解

    这篇文章主要介绍了使用vue插件axios传数据的Content-Type以及格式问题,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-09-09
  • vue实现画笔回放canvas转视频播放功能

    vue实现画笔回放canvas转视频播放功能

    这篇文章主要介绍了vue实现画笔回放,canvas转视频播放功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2024-01-01

最新评论