Unity在WebGL与js交互

JamesB · 发表于 2022-11-19 14:01

一、Unity调用js方法

1、新建txt文件，编辑后，修改后缀为. jslib，并放在Assets/Plugins目录下，文件名随便取
mergeInto(LibraryManager.library, { //这个方法名必须和c#中的相同 OpenNewWindow:function(str) { OpenNewWindow(Pointer_stringify(str)); }, //关闭新窗口 CloseNewWindow:function() { CloseNewWindow(); },});

image.png

2、在Unity中绘制2个按钮，用于调用js方法，并添加一个脚本

image.png

3、在该脚本中，添加Unity调用js方法
using System.Runtime.InteropServices;using UnityEngine;using UnityEngine.UI;public class UnityToJsFunc : MonoBehaviour{ public Text text; [DllImport("__Internal")] //internal前是两个下划线这一步的作用是动态调用dll private static extern void OpenNewWindow(string str); //方法的名字要和上一步的jslib中的方法名一致，用起来和普通方法完全一致 [DllImport("__Internal")] private static extern void CloseNewWindow(); //js调用c#方法 public void Open() { //有参数 OpenNewWindow("OpenNewWindow"); } //js调用c#方法 public void Close() { //无参数 CloseNewWindow(); } //js调用c#方法 public void JsToUnity(string str) { text.text = str; }}
4、打包webgl
打包后如有打开有报错，可查看
Unity Mac上打开WebGL本地文件
5、修改打包后的index.html文件
先添加一个div标签

image.png

在添加2个方法

image.png

相关代码如下：

<div id="mywindow" style="display:none;width:100px;height:200px;top: 50%;right:30%;transform: translate(-50%,-50%);position:absolute;border: 0; margin: 0; padding: 0"> <iframe id="iframe" src="" style="width: 100%;height: 100%;"></iframe> </div> function OpenNewWindow(str) { console.log(str); var otherDiv = document.getElementById('mywindow'); otherDiv.style.display = "block"; document.getElementById("iframe").src =str; } function CloseNewWindow() { console.log(CloseNewWindow); var otherDiv = document.getElementById('mywindow'); otherDiv.style.display = "none"; document.getElementById("iframe").src ="" }

具体效果如下：

222.gif

二、js调用Unity方法

1、在Unity中添加一个button，js将调用方法，为button赋值

image.png

2、在导出的index.html文件中添加发送消息代码，特别需要注意三个参数：
第一个参数是场景中的对象名称；第二个参数是当前附加到该对象的脚本中的方法名称；第三个参数 可以是字符串、数字，也可为空。
例如：

unityInstance.SendMessage('MyGameObject', 'MyFunction');unityInstance.SendMessage('MyGameObject', 'MyFunction', 5);unityInstance.SendMessage('MyGameObject', 'MyFunction', 'MyString');

image.png

本demo中调用如下
unityInstance.SendMessage('Canvas','JsToUnity','str');
3、在Unity脚本中添加执行方法

image.png

也可查看官网文档

		自动登录	找回密码
密码			立即注册

Unity在WebGL与js交互

本帖子中包含更多资源