Unity项目打包为WebGL后应用于Vue项目中（iframe模式）的数据交互

Unity项目打包为WebGL后应用于Vue项目中（iframe模式）的数据交互

引用

CSDN

1.

https://blog.csdn.net/m0_74823892/article/details/144462093

本文将详细介绍如何将Unity项目打包为WebGL后应用于Vue项目中，并通过iframe模式实现数据交互。文章将从创建.jslib文件、.cs脚本、Text对象和button按钮对象等多个方面进行讲解，帮助开发者实现Unity和Vue之间的数据交互。

一、前期工作

1.新建.jslib文件

操作步骤：

1. 在Unity项目的Assets/Plugins文件夹下新建一个txt文本文档，保存并关掉文档；
2. 将文档命名为communication.jslib，保存；
3. 双击communication.jslib文件，用其它工具打开编辑即可(我这里用的是HBuilder)，编辑内容后面有介绍(三、从js调用unity脚本函数)。

在 Unity 和 Vue 的交互中，jslib插件用于实现 JavaScript 与 Unity 的桥接。它允许你在 JavaScript 中调用 Unity 的 C# 方法，或从 Unity 调用 JavaScript 函数。

以下是为什么需要jslib插件以及文件位置的重要性：

• 桥接功能：jslib插件使得 JavaScript 和 Unity 之间可以进行函数调用，这在处理 WebGL 平台时尤其重要。Unity 的 WebGL 构建运行在浏览器中，而浏览器环境与 Unity 的运行环境（C#）是隔离的，jslib通过定义如何在两者之间传递数据和调用方法来实现桥接。
• 函数调用：通过在jslib中定义的函数，你可以从 JavaScript 直接调用 Unity 的 C# 方法，或者反向操作。这种方式简化了两者之间的通信，使得复杂的数据交换和操作变得可行。
• 文件位置：将jslib文件放置在 Unity 项目的Assets/Plugins文件夹中的WebGL子文件夹下是为了确保 Unity 能够识别和正确加载这些插件文件。Unity 在构建 WebGL 项目时，会自动将Plugins文件夹中的jslib文件包含在内，并按照预期执行其中定义的 JavaScript 代码。

这种结构确保了 JavaScript 与 Unity 之间的高效且可靠的通信。

2.新建.cs脚本

操作步骤：

1. 在Unity项目的Assets文件夹下新建一个script文件夹，在script文件夹中新建一个C# Script脚本，命名为JsTalker.cs；

当 Unity 项目导出为 WebGL 时，Unity 引擎会生成一些 JavaScript 文件，这些文件用于与浏览器进行交互。.cs 脚本可以与这些 JavaScript 文件集成，允许我们通过 Unity 的 C# 代码来调用 JavaScript 函数，或者从 JavaScript 函数中接收消息。

3. 新建一个Text对象和button按钮对象

操作步骤：

1. 在Unity中的Hierarchy工作区中创建一个可回显获取数据的UI对象，这里以Text对象为例；新建button对象同理，并给button对象重命名为modelButton1。
2. 设置Text对象样式为白色，目的是为了显眼些。

4.添加脚本空对象UIEvent

操作步骤：

1. 在Hierarchy工作区中鼠标右键 - Create Empty - 重命名GameObject为UIEvent - 将JsTalker.cs拖拽移入至UIEvent对象里。
2. 给modelButton1添加按钮onClick点击事件，为后面点击按钮传参做准备；并添加JsTalker.cs脚本。