Unity WebGL和JS通信

1.Unity调用JS方法

1.1在Assets文件夹下新建Plugins文件夹并在该文件夹下新建.jslib扩展名文件(名称无所谓)

1.2 在.jslib扩展名文件新增以下代码(标准格式)

mergeInto(LibraryManager.library, {


});

1.3 创建JS方法

mergeInto(LibraryManager.library, {
   Test: function () {
    alert("Unity调用JS");
  },
   // 多个方法可用(,)逗号隔开 
   TestArgument: function(str) 
  {
      var message=UTF8ToString(str);
      alert(message);
  },
});

1.4 调用JS方法(新建空物体挂载在脚本)

using System.Collections;
using System.Collections.Generic;
using System.Runtime.InteropServices;
using UnityEngine;

public class TestJS : MonoBehaviour
{
    [DllImport("__Internal")]
    private static extern void Test();
    [DllImport("__Internal")]
    private static extern void TestArgument(string message);
    // Update is called once per frame
    void Update()
    {
        if (Input.GetKeyDown(KeyCode.A))
        {
            Test();
        }
        if (Input.GetKeyDown(KeyCode.B))
        {
            TestArgument("测试Unity调用JS传参方法");
        }
    }
}

1.5 打包并运行(中文乱码问题不用管,运行结果正确)

2. JS调用Unity方法

2.1 在Unity Editor下创建空物体并挂载上调用的脚本

2.2 创建方法(随便创建即可,方法必须为public)

using TMPro;
using UnityEngine;

public class TestJSInvokeUnity : MonoBehaviour
{
    public GameObject cube;
    public TMP_Text infoText;

    public void ShowCube()
    {
        cube.SetActive(true);
    }
    
    public void ShowText(string info)
    {
        infoText.text = info;
    }
}

2.3 上述操作完成后打包

2.4 完成打包后在index.html中查找unityInstance

2.5 使用unityInstance调用Unity方法

unityInstance.SendMessage('场景中挂载脚本的物体名','方法名');
unityInstance.SendMessage('场景中挂载脚本的物体名','方法名','方法对应参数');

2.6 运行查看结果

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Unity WebGL 和 Vue 可以通过以下方式进行通信: 1. 使用 postMessage() 方法 在 Unity WebGL 中,可以使用 Unity 的 SendMessage() 方法将消息发送到 Vue 应用程序中。在 Vue 应用程序中,可以使用 window.addEventListener() 监听消息事件,然后根据消息内容进行相应的操作。 Unity 中的代码示例: ``` function sendMessageToVue(message) { var iframe = window.parent.document.getElementById('your-iframe-id'); iframe.contentWindow.postMessage(message, '*'); } ``` 在 Vue 应用程序中的代码示例: ``` mounted() { window.addEventListener('message', this.handleUnityMessage); }, methods: { handleUnityMessage(event) { if (event.origin !== 'https://your-unity-webgl-domain.com') { return; } const message = event.data; // 根据消息内容进行相应的操作 } } ``` 2. 使用 Vue.js Unity Web Player 插件 Vue.js Unity Web Player 插件提供了一种更方便的方式来在 Vue 应用程序中嵌入 Unity WebGL 游戏,并与之进行通信。该插件可以在 Vue 应用程序中直接使用 Unity API。 首先,需要安装 vue-unity-webgl 插件: ``` npm install vue-unity-webgl --save ``` 然后,在 Vue 应用程序中使用该插件: ``` <template> <div> <unity-webgl :game-width="800" :game-height="600" src="https://your-unity-webgl-domain.com/your-game.json" @unityMessage="handleUnityMessage"></unity-webgl> </div> </template> <script> import UnityWebgl from 'vue-unity-webgl'; export default { components: { UnityWebgl, }, methods: { handleUnityMessage(message) { // 根据消息内容进行相应的操作 }, }, }; </script> ``` 在 Unity 中,需要使用 Unity 的 SendMessage() 方法来发送消息到 Vue 应用程序中: ``` function sendMessageToVue(message) { unityInstance.SendMessage('VueProxy', 'ReceiveMessage', message); } ``` 在 Vue 应用程序中,需要在组件中定义一个名为 ReceiveMessage 的方法来接收 Unity 发送的消息。插件会自动将接收到的消息作为参数传入该方法中: ``` <template> <div></div> </template> <script> export default { methods: { ReceiveMessage(message) { // 根据消息内容进行相应的操作 }, }, }; </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

今天喝水了嘛.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值