Unity webgl 嵌入Vue实现过程

原创

已于 2023-11-28 11:16:55 修改 · 2.3k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#unity #webgl #vue.js

于 2023-11-28 11:06:50 首次发布

本文详细描述了如何在前端网页中嵌入Unitywebgl，通过定义.jslib文件实现Unity与Vue之间的数据传输，包括Unity向Vue发送事件数据和Vue调用Unity方法的过程。

需求分析：

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脚本中添加