在vue项目中内嵌unity打包出来的webgl文件,一开始我是通过vue-unity-webgl去进行一个页面的内嵌的,在内嵌的过程中我发现vue-unity-wengl有几个问题。
问题一:加载模块路径问题,一开始根据官方文档根本加载不到文件。
1.文件直接放入vue项目的pinlic中。
2.ref中的dome为自定义名字,方便获取该元素节点。
3.路径中的data以unity打包出来的文件名为主。
<unity ref="dome"
src="./data/Build/data.json"
width="1000" height="600"
unityLoader="./data/Build/UnityLoader.js">
</unity>
问题二:通信方法双向传递。
1. vue向unity发送消息:
dome是通过ref获取的元素节点,和上面定义的保持一致。
unity对象,unity方法都需要unity工程师提供
this.$refs.dome.message("unity对象", "unity方法", "要传的参数");
2. unity向vue发送消息:
由于vue-unity-webgl插件没有提供,vue需要定义接受的回调函数。
我的解决方式是通过windows自定义事件去解决通信问题。
unity工程师直接调用window.Conset(data)方法进行传参,data为参数。
Ps:自定义事件的名字避免和vue实例以及window方法重名,导致监听不到unity调用,应该取名规范一些。
window.Conset = (data) => {
// 可以通过bus或者vuex对通信指令做相关处理
console.log('Unity参数', data)
};