vue项目接入unity3D模块并进行数据通信-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue项目接入unity3D模块并进行数据通信。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、添加unity工程

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

unity得到的数据怎么传递给vue,常用技术块,vue.js,javascript,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得到的数据怎么传递给vue,常用技术块,vue.js,javascript,unity

  // 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>