unity项目打包为webgl后应用于vue项目中（iframe模式）的数据交互 ...

参考文章：
1.Unity打包WebGL: 导入Vue
2.unity文档-WebGL：与浏览器脚本交互
3.unity与vue交互(无第三方插件）

  
一、前期工作

1.新建.jslib文件

操作步骤：

• 在unity项目标Assets/Plugins 文件夹下新建一个txt文本文档，保存并关掉文档；
  
• 将文档命名为 communication.jslib ，保存；
  
• 双击 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脚本

操作步骤

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

   当 Unity 项目导出为 WebGL 时，Unity 引擎会生成一些 JavaScript 文件，这些文件用于与浏览器进行交互。.cs 脚本可以与这些 JavaScript 文件集成，答应我们通过 Unity 的 C# 代码来调用 JavaScript 函数，大概从 JavaScript 函数中吸取消息
  3. 新建一个Text对象和button按钮对象

操作步骤

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

4.添加脚本空对象UIEvent

操作步骤

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

5.导出unity为webgl

操作步骤
1. 打开构建立置

• 在 Unity 编辑器中，点击顶部菜单栏的 File。
  
• 选择 Build Settings，这将打开构建立置窗口。
  

2.选择平台

• 在构建立置窗口中，会看到一个平台列表。在这个列表中选择 WebGL。
  
• 如果 WebGL 平台尚未安装，可以点击 Add Open Scenes 大概在右下角点击 Switch Platform 进行切换。Unity 会自动下载和安装 WebGL 支持的须要组件。
  
  
  
  3. 设置 Player 设置
  
• 在 Build Settings 窗口中，点击 Player Settings 按钮。这会打开 Inspector 面板中的 Player 设置。
  
• 在 Player Settings 面板中，我们可以配置 WebGL 特有的设置，如分辨率、质量、图标等。
  
  
  
  • Resolution and Presentation：设置 WebGL 输出的分辨率和全屏模式。
    
  • Other Settings：配置 WebGL 的各种参数，例如内存巨细、脚本运行时等。
    
  • Publishing Settings：设置压缩和加密选项，以便优化构建的巨细和性能。
    
    
    
    
  
  

4. 设置构建目标 - 之后每次修改unity内容都要做此打包操作

• 确保在 Build Settings 窗口中选择了 WebGL 作为目标平台。
  
• 点击 Build 按钮，选择一个保存位置，然后 Unity 会开始构建过程。
  

构建过程

• Unity 会将我们的项目打包为一个 WebGL 兼容的格式，并生成一个包罗 HTML、JavaScript 和数据文件的文件夹。构建过程可能需要一些时间，具体取决于项目标复杂性和你的盘算机性能。生成的文件如下：
  
  
  
  

6.vue项目中引入unity打包的文件

操作步骤

• 在 Vue 项目根目录的public文件夹 或 static文件夹下创建 unity 文件夹。
  
• 将unity刚刚打包的文件复制到public/unity 文件夹或 static/unity 文件夹下。
  之后每次修改unity内容打包后都要做此复制操作
  

public 文件夹
   用途：用于存放不会被 Webpack 处理的静态资源，如 HTML 文件、favicon、直接引用的图像等。
路径：文件在 public 文件夹中的路径将直接映射到构建后的根目录。例如，public/favicon.ico 在构建后的项目中会变成 /favicon.ico。
处理：这些文件不会经过 Webpack 处理，因此在开辟和生产环境中都保持不变。
  static文件夹（通常在 Vue CLI 3.x 及更早版本中利用）
   用途：重要用于存放静态资源，Webpack 会将这些资源复制到构建输出目录中。
路径：static 文件夹中的资源将被 Webpack 处理并优化。在构建过程中，这些文件会被移动到构建输出目录的 static 子目录中，路径会自动处理文件名的哈希值以便缓存优化。
处理：这些文件会经过 Webpack 的处理，比如版本控制和优化。
  二、从unity脚本调用js函数（vue发起，unity吸取）：

(全部代码在背面可直接粘贴利用，这里针对重要模块)
焦点代码

• 编辑JsTalker.cs脚本
  
  1. //public TextMeshProUGUI uiText;//这个是新版的Text组件对象，用这个就要确保引用了 TextMeshPro 的命名空间using TMPro;
  2. public Text text;//这个是旧版的Text对象
  3. public void SetToken(string token)
  4. {
  5.     Debug.Log("token"+ token);
  6.     text.text = token;//改变Text对象的文本内容
  7.     // 强制更新 UI
  8.     Canvas.ForceUpdateCanvases();
  9. }

  复制代码
• 编辑打包后的index.html文件
  
  1.         // unity调用函数
  2.     // vue发起 unity接收
  3.     window.ReportReady = () => {
  4.         send({
  5.           id: 1,
  6.           value: 2
  7.         })
  8.       }
  9.     function send(obj) {
  10.       unityInstance.SendMessage('modelButton1', 'SetToken', JSON.stringify(obj))
  11.     }

  复制代码

SendMessage方法
SendMessage(objectName, methodName, value);
   其中，objectName 是场景中的对象名称；methodName 是当前附加到该对象的脚本中的方法名称；value 可以是字符串、数字，也可为空。
  三、从js调用unity脚本函数（unity发起，vue吸取）：

(全部代码在背面可直接粘贴利用，这里针对重要模块)
焦点代码

• unity中的.jslib定义方法GetButtonNameReady(string str)，利用以下方法跨文档通报，将参数发送到父窗口并定义type；
  
  1. GetButtonNameReady: function (string) {
  2.             console.log("Click-buttondata:",string);
  3.                 // 发送消息到父窗口
  4.                 window.parent.postMessage({ type: 'UNITY_BUTTON_NAME', data: UTF8ToString(string) }, '*');
  5. }

  复制代码

window.parent.postMessage(message, targetOrigin, [transfer]);
   message: 要发送的消息，可以是字符串、对象或其他支持的数据类型。需要注意的是，发送的消息将会被序列化为 JSON 格式。
targetOrigin: 表示你希望消息发送到的目标窗口的泉源。这是一个安全机制，用于确保消息不会发送到不受信托的窗口。你可以指定特定的域（如 “https://example.com”）大概利用 “*” 作为通配符，表示答应全部泉源。
transfer (可选): 一个可选的 Transferable 对象数组，用于将某些对象的全部权从当前窗口转移到目标窗口。例如，MessagePort 对象可以用来在多个窗口之间通报消息。
  

• unity中的按钮点击事故里利用JsTalker.cs组件，脚本中添加点击按钮后传按钮名称参数;
  1. using System.Runtime.InteropServices;
  2. [DllImport("__Internal")]
  3. private static extern void GetButtonNameReady(string str);
  4. public void OnButtonClick(Button clickedButton)
  5. {
  6.     // 获取被点击按钮的名称
  7.     string buttonName = clickedButton.gameObject.name;
  8.     Debug.Log("被点击的按钮名称是: " + buttonName);
  9.     GetButtonNameReady(buttonName);//为什么在页面console里返回的是 48730928 ?
  10. }

  复制代码
• unity中选中modelButton1，设置其onClick添加UIEvent事故，并选择GetButtonNameReady方法
  
  
  
  
• vue页面中利用监听message获取按钮名称
  'UNITY_BUTTON_NAME'是在.jslib文件中自定义的。
  1. export default {
  2.   mounted() {
  3.     window.addEventListener('message', this.handleMessage, false);
  4.   },
  5.   methods: {
  6.     handleMessage(event) {
  7.       // 检查消息类型
  8.       if (event.data.type === 'UNITY_BUTTON_NAME') {
  9.         console.log('Received button name from Unity:', event.data.data);
  10.         // 在此处理按钮名称
  11.       }
  12.     }
  13.   },
  14.   beforeDestroy() {
  15.     window.removeEventListener('message', this.handleMessage, false);
  16.   }
  17. }

  复制代码

四、结果展示

在vue页面的控制台中能得到如下信息：

五、全部代码

JsTalker.cs

1. using System.Collections;
2. using System.Collections.Generic;
3. using UnityEngine;
4. using UnityEngine.UI;
5. using System.Runtime.InteropServices;
7. public class JsTalker : MonoBehaviour
8. {
9.     [DllImport("__Internal")]
10.     private static extern void SayHello();
11.     [DllImport("__Internal")]
12.     private static extern string ReportReady();
15.     [DllImport("__Internal")]
16.     private static extern void GetButtonNameReady(string str);
18.     //public TextMeshProUGUI uiText;
19.     public Text text;
21.     // Start is called before the first frame update
22.     void Start()
23.     {
24.         ReportReady();
26.     }
28.     // Update is called once per frame
29.     void Update()
30.     {
31.         if (Input.GetKeyUp(KeyCode.H))
32.         {
33.             SayHello();
35.         }
36.     }
38.     public void SetToken(string token)
39.     {
40.         Debug.Log("token"+ token);
41.         text.text = token;
42.         // 强制更新 UI
43.         Canvas.ForceUpdateCanvases();
44.     }
46.     // 这个方法会在按钮点击时被调用
47.     public void OnButtonClick(Button clickedButton)
48.     {
49.         // 获取被点击按钮的名称
50.         string buttonName = clickedButton.gameObject.name;
51.         Debug.Log("被点击的按钮名称是: " + buttonName);
52.         GetButtonNameReady(buttonName);//为什么在页面console里返回的是 48730928 ?
53.     }
54. }

复制代码

communication.jslib

1. mergeInto(LibraryManager.library, {
3.     SayHello: function () {
4.         window.alert("hello vue");
5.     },
7.     ReportReady: function() {
8.         window.ReportReady();
9.     },
10.        
11.         GetButtonNameReady: function (string) {
12.             console.log("Click-buttondata:",string);
13.                 // 发送消息到父窗口
14.                 window.parent.postMessage({ type: 'UNITY_BUTTON_NAME', data: UTF8ToString(string) }, '*');
15.         }
16. })

复制代码

打包后的index.html

1. <!DOCTYPE html>
2. <html lang="en-us">
4. <head>
5.   <meta charset="utf-8">
6.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7.   <title>Unity WebGL Player</title>
8.   <link rel="shortcut icon" href="TemplateData/favicon.ico">
9.   <link rel="stylesheet" href="TemplateData/style.css">
10. </head>
12. <body>
13.   <div id="unity-container" class="unity-desktop" style="width:100%;height: 100%;">
14.     <canvas id="unity-canvas" width=auto height=auto tabindex="-1"></canvas>
15.     <div id="unity-loading-bar">
16.       <div id="unity-logo"></div>
17.       <div id="unity-progress-bar-empty">
18.         <div id="unity-progress-bar-full"></div>
19.       </div>
20.     </div>
21.     <div id="unity-warning"> </div>
22.     <div id="unity-footer">
23.       <div id="unity-webgl-logo"></div>
24.       <div id="unity-fullscreen-button"></div>
25.       <div id="unity-build-title">HzevtSystem</div>
26.     </div>
27.   </div>
28.   <script>
30.     // var UnityToJs = {
31.     //   /// <summary>
32.     //   /// JS的监听方法，
33.     //   /// 点击 xxxx 时，回传默认值。
34.     //   JS_OnReceiveView: function (fovMin, fovMax, angleMin, angleMax) {
35.     //     // console.log(fovMin, fovMax, angleMin, angleMax);
36.     //     window.top.dispatchEvent(new CustomEvent('getFovDef', { detail: { 'fovMin': fovMin, 'fovMax': fovMax, 'angleMin': angleMin, 'angleMax': angleMax } }))//自定义事件，然后获取相应的数据
37.     //   }
38.     // }
40.     var container = document.querySelector("#unity-container");
41.     var canvas = document.querySelector("#unity-canvas");
42.     var loadingBar = document.querySelector("#unity-loading-bar");
43.     var progressBarFull = document.querySelector("#unity-progress-bar-full");
44.     var fullscreenButton = document.querySelector("#unity-fullscreen-button");
45.     var warningBanner = document.querySelector("#unity-warning");
47.     // Shows a temporary message banner/ribbon for a few seconds, or
48.     // a permanent error message on top of the canvas if type=='error'.
49.     // If type=='warning', a yellow highlight color is used.
50.     // Modify or remove this function to customize the visually presented
51.     // way that non-critical warnings and error messages are presented to the
52.     // user.
53.     function unityShowBanner(msg, type) {
54.       function updateBannerVisibility() {
55.         warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
56.       }
57.       var div = document.createElement('div');
58.       div.innerHTML = msg;
59.       warningBanner.appendChild(div);
60.       if (type == 'error') div.style = 'background: red; padding: 10px;';
61.       else {
62.         if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
63.         setTimeout(function () {
64.           warningBanner.removeChild(div);
65.           updateBannerVisibility();
66.         }, 5000);
67.       }
68.       updateBannerVisibility();
69.     }
71.     var buildUrl = "Build";
72.     var loaderUrl = buildUrl + "/unityweb.loader.js";
73.     var config = {
74.       dataUrl: buildUrl + "/unityweb.data",
75.       frameworkUrl: buildUrl + "/unityweb.framework.js",
76.       codeUrl: buildUrl + "/unityweb.wasm",
77.       streamingAssetsUrl: "StreamingAssets",
78.       companyName: "DefaultCompany",
79.       productName: "HzevtSystem",
80.       productVersion: "1.0",
81.       showBanner: unityShowBanner,
82.     };
84.     // By default, Unity keeps WebGL canvas render target size matched with
85.     // the DOM size of the canvas element (scaled by window.devicePixelRatio)
86.     // Set this to false if you want to decouple this synchronization from
87.     // happening inside the engine, and you would instead like to size up
88.     // the canvas DOM size and WebGL render target sizes yourself.
89.     // config.matchWebGLToCanvasSize = false;
91.     if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
92.       // Mobile device style: fill the whole browser client area with the game canvas:
94.       var meta = document.createElement('meta');
95.       meta.name = 'viewport';
96.       meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
97.       document.getElementsByTagName('head')[0].appendChild(meta);
98.       container.className = "unity-mobile";
99.       canvas.className = "unity-mobile";
101.       // To lower canvas resolution on mobile devices to gain some
102.       // performance, uncomment the following line:
103.       // config.devicePixelRatio = 1;
105.       canvas.style.width = window.innerWidth + 'px';
106.       canvas.style.height = window.innerHeight + 'px';
107.       unityShowBanner('暂不支持移动端');
108.     } else {
109.       // Desktop style: Render the game canvas in a window that can be maximized to fullscreen:
111.       canvas.style.width = "100%";
112.       canvas.style.height = "100%";
113.     }
115.     loadingBar.style.display = "block";
117.     var script = document.createElement("script");
118.     script.src = loaderUrl;
119.     script.onload = () => {
120.       createUnityInstance(canvas, config, (progress) => {
121.         progressBarFull.style.width = 100 * progress + "%";
122.       }).then((unityInstance) => {
123.         console.log('unityInstance', unityInstance);
124.         console.log('window', window);
125.         // 绑定unityInstance
126.         window.unityInstance = unityInstance;
127.         console.log('window.unityInstance', window.unityInstance);
129.         loadingBar.style.display = "none";
130.         fullscreenButton.onclick = () => {
131.           unityInstance.SetFullscreen(1);
132.         };
133.       }).catch((message) => {
134.         alert(message);
135.       });
136.     };
138.     document.body.appendChild(script);
139.    
140.     // unity调用函数
141.     // vue发起 unity接收
142.     window.ReportReady = () => {
143.         // window.top.dispatchEvent(new CustomEvent())
144.         send({
145.           id: 1,
146.           value: 2
147.         })
148.       }
149.     function send(obj) {
150.       unityInstance.SendMessage('modelButton1', 'SetToken', JSON.stringify(obj))
151.     }
153.   </script>
154. </body>
156. </html>

复制代码

vue页面

1. <template>
2.   <div style="width: 100%; height: 100%">
3.     <div @click="send">给unity发送数据</div>
4.     <iframe ref="iframe" width="100%" height="100%" scrolling="no" src="/static/Unitys/web/index.html" frameborder="0"></iframe>
5.   </div>
6. </template>
8. <script>
9. export default {
10.   name: "testUnityAScene",
11.   data() {
12.     return {
13.       nodeList: [
14.         { id: 11, name: "node1" },
15.         { id: 22, name: "node2" },
16.         { id: 33, name: "node3" },
17.       ],
18.     };
19.   },
20.   mounted() {
21.     console.log('this.$refs.iframe.contentWindow', this.$refs.iframe.contentWindow);
22.     // this.$refs.iframe.contentWindow.unityInstance.SendMessage('WebInvoker', 'Unity_InsertNaviPoint', this.nodeList.length);
24.     window.addEventListener('message', this.handleMessage, false);
25.   },
26.   methods: {
27.     send() {
28.       // 发送数据
29.       this.$refs.iframe.contentWindow.send({
30.           id: 111,
31.           value: 222
32.         })
33.     },
34.     handleMessage(event) {
35.       console.log('event11111111111:',event);
36.       // 检查消息类型
37.       if (event.data.type === 'UNITY_BUTTON_NAME') {
38.         console.log('Received button name from Unity:', event.data.data);
39.         // 在此处理按钮名称
40.       }
41.     }
42.   },
43.   beforeDestroy() {
44.     window.removeEventListener('message', this.handleMessage, false);
45.   },
46. };
47. </script>
49. <style>
50. </style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。