Vue与UnityWebGl交互通信(vue-unity-webgl的使用)
最近项目需要在可视化界面内添加unity3D文件并进行交互展示效果,特此整理如下:1.Vue 中自带 Unity3D的依赖包 vue-unity-webgl,进行安装npm install vue-unity-webgl --save//或使用 yarn add vue-unity-webgl --save2.将unity导出文件放在vue项目本地文件static下3.添加相应组件信息<te
·
最近项目需要在可视化界面内添加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)
}
},
更多推荐
已为社区贡献21条内容
所有评论(0)