最近项目需要在可视化界面内添加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)
   }
 },
Logo

前往低代码交流专区

更多推荐