vue项目接入unity3D模块并举行数据通信

一、添加unity工程

unity工程师会提供一个前端可使用的包，将其放在vue项目的public下，我这里以unity文件夹定名


二、在项目中创建iframe标签并引入index.html文件

1. <iframe id="iframe" ref="iframe" src="/unity/index.html" width="100%" height="100%" frameborder="0" scrolling="auto" />

复制代码

三、修改public > unity > index.html文件，制定发送到web端变乱

1.   // unity按钮点击发送事件
2.   function UIClick(btnname){
3.     window.top.dispatchEvent(new CustomEvent('UIClick', { detail: { name: btnname } }))
4.   }

复制代码

四、在引入unity的vue文件中监听接收unity发送变乱， 由于我使用了页面缓存以是在activated()生命周期中监听，根据业务必要也可以在mounted()生命周期中监听

1.   activated() {
2.     window.addEventListener('UIClick', this.unityWatch)
3.   },
4.   // 或者
5.   mounted() {
6.     window.addEventListener('UIClick', this.unityWatch)
7.   },
8.   
9.   methods: {
10.     // unity发送事件执行
11.     unityWatch(obj) {
12.       console.log(obj.detail); // 这里写需要的后续js逻辑
13.     },
14.   }

复制代码

五、vue发送变乱给unity

1.   unitySendMessage() {
2.     /** 参数：
3.      * 1. unity定义的对象（每个unity工程师喜欢的名字不一样）
4.      * 2. 调用unity的方法名字
5.      * 3. unity接收的参数
6.     */
7.     this.$refs.iframe.contentWindow.unityInstance.SendMessage('WebInvoker', 'Unity_InsertNaviPoint', '这是参数')
8.   },

复制代码

六、烧毁监听

1.   deactivated() {
2.     window.removeEventListener('UIClick', this.unityWatch)
3.   }
4.   // 或者
5.   destroyed() {
6.     window.removeEventListener('UIClick', this.unityWatch)
7.   }

复制代码

七、完整代码

1. <template>
2.   <div>
3.     <iframe id="iframe" ref="iframe" src="/unity/index.html" width="100%" height="680px" frameborder="0" scrolling="auto" />
4.   </div>
5. </template>
7. <script>
8. export default{
9.   activated() {
10.     // 监听unity发送事件
11.     window.addEventListener('UIClick', this.unityWatch)
12.   },
14.   methods: {
16.     // 调用unity内部事件
17.     unitySendMessage() {
18.       /** 参数：
19.        * 1. unity定义的对象（每个unity工程师喜欢的名字不一样）
20.        * 2. 调用unity的方法名字
21.        * 3. unity接收的参数
22.       */
23.       this.$refs.iframe.contentWindow.unityInstance.SendMessage('WebInvoker', 'Unity_InsertNaviPoint', this.nodeList.length)
24.     },
26.     // unity发送事件执行
27.     unityWatch(obj) {
28.       console.log(obj.detail); // 这里写需要的后续js逻辑
29.     },
31.   },
33.   deactivated() {
34.     window.removeEventListener('UIClick', this.unityWatch)
35.   }
36. }
37. </script>

复制代码

展示结果



来源：https://blog.csdn.net/weixin_43923659/article/details/128864967
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！