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

Posted 2023-04-11 阿西，能不能快点！

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue项目接入unity3D模块并进行数据通信相关的知识，希望对你有一定的参考价值。

一、添加unity工程

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

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

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

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

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

四、在引入unity的vue文件中监听接收unity发送事件，因为我使用了页面缓存所以在`activated()`生命周期中监听，根据业务需要也可以在`mounted()`生命周期中监听

  activated() 
    window.addEventListener('UIClick', this.unityWatch)
  ,
  // 或者
  mounted() 
    window.addEventListener('UIClick', this.unityWatch)
  ,
  
  methods: 
    // unity发送事件执行
    unityWatch(obj) 
      console.log(obj.detail); // 这里写需要的后续js逻辑
    ,

五、vue发送事件给unity

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

六、销毁监听

  deactivated() 
    window.removeEventListener('UIClick', this.unityWatch)
  
  // 或者
  destroyed() 
    window.removeEventListener('UIClick', this.unityWatch)

七、完整代码

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

<script>
export default
  activated() 
    // 监听unity发送事件
    window.addEventListener('UIClick', this.unityWatch)
  ,

  methods: 

    // 调用unity内部事件
    unitySendMessage() 
      /** 参数：
       * 1. unity定义的对象（每个unity工程师喜欢的名字不一样）
       * 2. 调用unity的方法名字
       * 3. unity接收的参数
      */
      this.$refs.iframe.contentWindow.unityInstance.SendMessage('WebInvoker', 'Unity_InsertNaviPoint', this.nodeList.length)
    ,

    // unity发送事件执行
    unityWatch(obj) 
      console.log(obj.detail); // 这里写需要的后续js逻辑
    ,

  ,

  deactivated() 
    window.removeEventListener('UIClick', this.unityWatch)
  

</script>