unity发布webgl平台结合vue,并实现事件交互

1.初始化vue项目(以vscode中搭建为例，默认已经安装好vscode和nodejs)

执行以下命令下载依赖包

编辑

输入命令：vue init webpack myvue（初始化项目）

编辑

之后输入命令：cd myvue 定位到项目工程目录

再输入命令：npm run dev 启动项目

如果启动时出现下面的错误

编辑

需要打开webpack.base.conf.js文件注释以下这一行代码，关闭代码规范检测

编辑

然后重新 npm run dev 启动项目就OK了

2.unity打包文件导入vue项目中

打包unity项目，将unity发布出来的文件夹导入到vue项目中的static文件夹下

编辑

然后需要下载vue-unity-webgl组件，否则会报错

编辑

然后在vue中调用unity组件

编辑

调整样式

编辑

事件交互

unity调用vue页面方法：

unity向vue组建发送数据：Application.ExternalCall("enter",param)；

vue组建监听事件：

编辑

vue调用unity内部方法：

编辑

在Unity中新建一个gameobject,命名为JSManager,该物体上挂一个脚本，脚本中定义一个方法名为SendData;

3.自定义vue-unity-webgl组件（不使用vue-unity-webgl插件）

我们可以自己写类似于vue-unity-webgl的组件

<template>
  <div class="webgl-content">
    <div
      id="unityContainer"
      :style="{
        width: width + 'px',
        height: height + 'px',
      }"
    ></div>
    <div
      v-if="showFullScreen"
      class="fullscreen"
      @click="showFullScreenFunc"
    ></div>
  </div>
</template>
<script>
export default {
  name: "vue-unity-webgl",
  props: [
    "width",
    "height",
    "config",
    "unityLoader",
    "onProgress",
    "showFullScreen",
  ],
  data() {
    return {
      unityInstance: null,
      loaded: false,
    };
  },
  mounted() {
    if (typeof UnityLoader === "undefined") {
      const script = document.createElement("script");
      script.setAttribute("src", this.unityLoader);
      document.body.appendChild(script);
      script.addEventListener("load", () => {
        this.instantiate();
      });
    }
  },
  methods: {
    message(object, method, params) {
      if (params === null) {
        params = "";
      }
      if (this.unityInstance !== null) {
        this.unityInstance.SendMessage(object, method, params);
      } else {
        return Promise.reject(
          "vue-unity-webgl: 你给 Unity 发送的信息， 没有被接收到"
        );
      }
    },
    showFullScreenFunc() {
      this.instance.SetFullscreen(1);
      // document.documentElement.webkitRequestFullScreen();
    },
    instantiate() {
      if (typeof UnityLoader === "undefined") {
        return Promise.reject("UnityLoader 未定义");
      }
      if (!this.config) {
        return Promise.reject("config 未定义配置");
      }
      let params = {};
      params.onProgress = (instance, progress) => {
        this.onProgress && this.onProgress(instance, progress);
        this.loaded = progress === 1;
      };
      this.unityInstance = UnityLoader.instantiate(
        "unityContainer",
        this.config,
        params
      );
    },
  },
};
</script>
<style scoped>
.webgl-content {
  width: 1280px;
  height: 720px;
}
.fullscreen {
  height: 38px;
  width: 38px;
  float: right;
  background-image: url("../assets/fullscreen.png");
}
</style>

然后再自己的代码中调用该组件

<template>
  <div id="webgl-box-warpper">
    <vue-unity-webgl
      v-if="is_show_webgl"
      ref="vueUnityWebgl"
      :config="webglConfig"
      :unity-loader="webglUnityLoader"
      :width="1280"
      :height="720"
      :on-progress="listenWebglProgress"
      :showFullScreen="true"
    ></vue-unity-webgl>
    <div class="loadmask" v-show="showp"></div>
    <el-progress
      v-show="showp"
      class="progress"
      :text-inside="true"
      :stroke-width="16"
      :percentage="percent"
      :color="customColor"
    ></el-progress>
  </div>
</template>
<script>
import VueUnityWebgl from "@/components/vue-unity-webgl";
export default {
  components: {
    VueUnityWebgl,
  },
  data() {
    return {
      showp: true,
      customColor: "#ffbb34",
      percent: 0,
      is_show_webgl: true,
      webglConfig: "static/Build/demo.json",
      webglUnityLoader: "static/Build/UnityLoader.js",
      webglWith: 1000,
      webglHeight: 600,
    };
  },
  created() {
    // window.toVueWebgl = (action) => {
    //   action && this.sendWebglMessage("{}", "第二次发送JSON数据");
    // };
  },
  mounted() {
    // window.ReportReady = () => {
    //   this.sendWebglMessage("1", "第一次发送内容标识");
    // };
    window.enter=(data)=>{

      console.log("从unity发过来的消息"+data);
    }
  },
  methods: {
    listenWebglProgress(instance, progress) {
      this.percent = progress * 100;
      if (progress === 1) {
        this.showp = false;
      }
    },
    sendWebglMessage(message,info) {
      console.log(info);
      this.$refs.vueUnityWebgl.message("JsTalker", "toUnityWebgl", message);
    },
  },
};
</script>
<style scoped>
.loadmask {
  width: 1280px;
  height: 720px;
  position: absolute;
  top: 8px;
  left: 8px;
  background-image: url("../assets/logo1.png");
  background-size: 100%;
  background-repeat: no-repeat;
}
.progress {
  width: 800px;
  position: absolute;
  top: 600px;
  left: 240px;
}
#webgl-box-warpper {
  width: 1280px;
  height: 720px;
}
</style>

自定义的组件包含了加载进度条的监听和全屏按钮以及事件交互