unity webgl与js交互相互调用

网上有几篇文章,但是他们都只写了一半,现在把完整的过程记录于下
unity版本为 2019.4LTS

C#调用JS打开新窗口
我的需求是在当前页面打开一个新的浮动窗口(不是跳转窗口,也不是打开新标签页,而是打开一个iframe)


第一步 先编写一个txt文件,内容为

mergeInto(LibraryManager.library, {
  //打开新窗口  注意js的方法参数没有类型
  OpenNewWindow:function(str) //这个方法名必须和c#中的相同
  {
      //window.alert(Pointer_stringify(str));
      OpenNewWindow(Pointer_stringify(str)); //此处为调用h5页面中的Js方法
  },
  //关闭新窗口
  CloseNewWindow:function()
  {
      CloseNewWindow();
  },
});

将这个文件的后缀名改为.jslib,名字随意,放在unity的Plugins目录下,只要在这个目录下就行,层级无所谓,如果没有这个目录,在Assets下自己建一个

第二步 在Unity中编写脚本

    public string url;
    [DllImport("__Internal")] //internal前是两个下划线  这一步的作用是动态调用dll
    private static extern void OpenNewWindow(string str); //方法的名字要和上一步的jslib中的方法名一致,用起来和普通方法完全一致
    [DllImport("__Internal")]
    private static extern void CloseNewWindow();

    private void OnMouseDown()
    {
        //打开窗口
        OpenNewWindow(url);
        //关闭窗口
        //CloseNewWindow();
    }     

然后打包
在打好的包里的index页面中添加
红色为添加的新代码添加部分的代码如下

      //打开新窗口
      function OpenNewWindow(str) {
	var otherDiv = document.getElementById('youxiguizepu2');
	otherDiv.style.display = "block";
	document.getElementById("iframe").src =str;
      }    
      //关闭新窗口
      function CloseNewWindow() {
	var otherDiv = document.getElementById('youxiguizepu2');
	otherDiv.style.display = "none";
	document.getElementById("iframe").src =
	""
      }      
	<div id="youxiguizepu2" style="display:none;width:1000px;height:600px;top: 50%;left:50%;transform: translate(-50%,-50%);position:absolute;border: 0; margin: 0; padding: 0">	
		<iframe id="iframe" src="" style="width: 100%;height: 100%;"></iframe>   
    </div>

————————————————————————————————————————————————
JS调用C#
通过Unity提供的消息机制实现js调用c#方法
例如
unityInstance.SendMessage(“ScriptManager”,“InitScene”,intiUrl);
说明
untiyInstace即js中第一行创建的unity对象,通过这个对象进行js-c#通信
参数1 游戏里的的对象,我们要调用的方法所在的脚本所挂在的物体,换人话就是,你的脚本在哪个物体上,就填哪个物体的名字,注意如果是主相机,名字中间默认有个空格
参数2 你要调用的c#方法名
参数3 参数,也就是说,第二步对应的c#方法应该有一个string的形参,注意只能有一个参数,如果你要传多个值,可以自定义个一个分隔符分开这些参数

几个注意点
1 必须打包出来才能运行,在编辑器里直接运行会报 EntryPointNotFoundException
2 关于火狐如何打开unity的webgl参考 火狐打开unitywebgl
3 jslib中的方法名不要取Open Close这样的关键字,会出现str无法传值的情况,既无法从Unity中传到jslib,也无法继续传递到网页的Js中,估计是这些方法名已经被占用
4 jslib文件中,每一个方法之间必须用 , 逗号分割,否则打包的时候会失败,并报 python.exe运行失败

  • 7
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
UnityWebGL和Vue.js是两个不同的技术栈,但它们可以在一定程度上进行交互UnityWebGL是一个基于WebGL的游戏引擎,主要用于构建高性能的3D游戏和交互内容,而Vue.js是一个流行的前端JavaScript框架,用于构建可复用的组件式单页应用(SPA)。 要让UnityWebGL与Vue.js交互,通常的做法是: 1. **数据绑定**:Unity可以通过JavaScript API(例如`UnityMessage`系统)来暴露一些数据,Vue.js可以监听这些数据的变化,并更新UI。反之,Vue.js也可以触发数据变化,通知Unity执行相应的操作。 2. **事件处理**:Vue提供了事件系统,可以用来触发Unity内部的逻辑,如动画、场景切换等。Unity可以通过监听特定的DOM事件来响应Vue的指令或组件行为。 3. **Web Workers**:当涉及到计算密集型任务时,可以使用Web Workers将部分工作放到后台运行,减少阻塞主线程,这时Vue.js可以在主线程上更新UI,而Unity在Worker中执行计算。 4. **前端API调用**:Vue.js可以调用Unity提供的JavaScript插件,来进行跨域通信,比如发送数据到服务器或请求Unity进行特定操作。 尽管如此,这种交互不是直接的,而是依赖于一些网络通信机制(如WebSocket或POST请求),并且可能需要对两者的技术特性有深入的理解。 **相关问题:** 1. UnityWebGL如何在浏览器中运行并提供JavaScript API? 2. Vue.js如何利用Event Emitter处理与Unity交互事件? 3. 如何通过Web Workers在Vue和Unity之间异步传递数据?

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值