Vue如何与Unity打包的webgl通信？

关于这个问题，在一开始接触这种项目内容，其实大部分是网上看有没有现成的解决方案。

找了一圈也只找到vue-unity-webgl这个插件实现，22年做的这个项目，没有看到比较好的其他解决方案。

安装

npm install vue-unity-webgl

使用

// setup 写法
import unity from 'vue-unity-webgl'

问题一：加载不到webgl文件

解决：

1. 文件直接放入Vue项目的public文件夹中

2. ref获取元素dom节点。

3. 路径名data以unity打包出来的文件名为主。

<unity ref="unitydom" 
  src="./data/Build/data.json" 
  width="1000" height="600" 
  unityLoader="./data/Build/UnityLoader.js">
</unity>

// setup 写法
import unity from 'vue-unity-webgl'
import {ref} from 'vue'
// unity加载的dom节点
const unitydom = ref<HTMLElement>()

问题二：通信方法，双向传递。

1. vue向unity发送消息：

unitydom是通过ref获取的元素节点，和上面定义的保持一致。

unity对象，unity方法都需要unity工程师定义提供。

unitydom.vaule.message('unity对象名','unity调用的函数名','传递参数')

2. unity向vue发送消息：

由于vue-unity-webgl插件没有提供，vue需要定义接受的回调函数。

我的解决方式是通过windows自定义事件去解决通信问题。

unity工程师直接调用window.Conset(data)方法进行传参，data为参数。

vue写法：

// Ps:自定义事件的名字避免和vue实例以及window方法重名，导致监听不到unity调用，应该取名规范一些。
window.Conset = (data) => {
        console.log('Unity参数', data)
};

unity写法：

调用方法跟options参数即可,options是自定义参数，看unity传什么都行。

<!-- 定义一个文件，文件中声明一个方法调用window.Conset -->
ConsetSend:function(){
    window.Conset(options)
}

温馨提示

最近看到有更好的插件出来unity-webgl,建议使用这个，各方面功能相对完善，更容易完成业务功能。