Vue与UnityWebGl交互通信（vue-unity-webgl的使用）

最近项目需要在可视化界面内添加unity3D文件并进行交互展示效果，特此整理如下：

1.Vue 中自带 Unity3D的依赖包 vue-unity-webgl，进行安装

npm install vue-unity-webgl --save

//或使用 yarn add vue-unity-webgl --save

2.将unity导出文件放在vue项目本地文件static下或者是服务器上可访问资源

3.添加相应组件信息

<template>
	<div>
	<!--<unity src="../../../static/Unity/Build/Unity.json" width="1000" height="600" unityLoader="../../../static/Unity/Build/UnityLoader.js" ref="unityvue" class="main-unity"></unity>--！>
		<unity src="../../../static/Unity/Build/Unity.json" width="1000" height="600" unityLoader="../../../static/Unity/Build/UnityLoader.js" ref="unityvue" class="main-unity"></unity>
	</div>	
</template>

<script>
  import Unity from "vue-unity-webgl";
  export default {
    components: { Unity },
  }
</script>

4.向unity调用方法传参

// 和 Unity 通信
this.$refs.unityPlan.message('JSManager', 'SendData', '发送内容')

5.监听unity方法，需要放在created内

created() {
  // 播放监控（和 unity 交互）
   // unity点击时调用(unity场景)
   window['unityClick'] = (id, value) => {
     alert(id + ":" + value)
   };

   // 播放监控（和 unity 交互）
   // 获取GetClickEvents返回值（web界面与3D场景有对应关系,从场景获取参数值）
   window['GetClickReceive'] = (id) => {
     alert(id)
   }
 },