vue2/3使用unity-webgl插件加载unity webgl页面

unity-webgl安装

npm install unity-webgl

vue2 不使用插件加载

<!--  -->
<template>
  <div class="unity-wrap">
    <!-- 使用 ref 引用 canvas 元素 -->
    <canvas ref="unityCanvas" class="unity-canvas"></canvas>
    <div class="progress" v-if="progress < 1">
      加载: {{ Math.floor(progress * 100) }}%
    </div>
  </div>
</template>

<script>
import UnityWebgl from "unity-webgl";

export default {
  name: "Unity",
  data() {
    return {
      unityConfig: {
        loaderUrl:
          "https://xxxxxxxxxx/pack2.loader.js",
        dataUrl:
          "https://xxxxxxxxxx/pack2.data",
        frameworkUrl:
          "https://xxxxxxxxxx/pack2.framework.js",
        codeUrl:
          "https://xxxxxxxxxx/pack2.wasm",
      },
      progress: 0,
      unityContext: null,
    };
  },
  async mounted() {
    try {
      const canvas = this.$refs.unityCanvas;
      if (!canvas) {
        throw new Error("Canvas element not found");
      }

      // 确保 canvas 有有效的 id
      canvas.id = 'unity-canvas-' + Date.now();

      // 在创建 Unity 实例前设置全局 Module
      window.Module = {
        canvas: canvas,  // 直接使用 canvas 元素而不是选择器
        print: console.log,
        printErr: console.error
      };

      // 创建 Unity 实例
      this.unityContext = new UnityWebgl(this.unityConfig);

      // 监听事件
      this.unityContext.on("progress", (progress) => {
        this.progress = progress;
      });

      this.unityContext.on("error", (error) => {
        console.error("Unity error:", error);
      });

      // 渲染到 canvas
      await this.unityContext.render(canvas);

      console.log("Unity WebGL 初始化成功");
    } catch (error) {
      console.error("Unity 加载失败:", error);
    }
  },
  beforeDestroy() {
    // 清理实例
    if (this.unityContext) {
      this.unityContext.quit();
      this.unityContext = null;
    }
  },
};
</script>

<style lang="scss" scoped>
.unity-wrap {
  position: relative;
  width: 100%;
  height: 600px;
  background: #000;
}
.unity-canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.progress {
  position: absolute;
  left: 12px;
  top: 12px;
  color: #fff;
  background: rgba(0, 0, 0, 0.4);
  padding: 6px 10px;
  border-radius: 4px;
}
</style>

vue2 使用插件加载

<!--  -->
<template>
  <div class="unity-wrap">
    <!-- 使用 ref 引用 canvas 元素 -->
    <canvas ref="unityCanvas" class="unity-canvas"></canvas>
    <div class="progress" v-if="progress < 1">
      加载: {{ Math.floor(progress * 100) }}%
    </div>
  </div>
</template>

<script>
import UnityWebgl from "unity-webgl";

export default {
  name: "Unity",
  data() {
    return {
      unityConfig: {
        loaderUrl:
          "https://xxxxxxxxxxx/pack2.loader.js",
        dataUrl:
          "https://xxxxxxxxxxx/pack2.data",
        frameworkUrl:
          "https://xxxxxxxxxxx/pack2.framework.js",
        codeUrl:
          "https://xxxxxxxxxxx/pack2.wasm",
      },
      progress: 0,
      unityContext: null,
    };
  },
  async mounted() {
    try {
      const canvas = this.$refs.unityCanvas;
      if (!canvas) {
        throw new Error("Canvas element not found");
      }

      // 确保 canvas 有有效的 id
      canvas.id = 'unity-canvas-' + Date.now();

      // 在创建 Unity 实例前设置全局 Module
      window.Module = {
        canvas: canvas,  // 直接使用 canvas 元素而不是选择器
        print: console.log,
        printErr: console.error
      };

      // 创建 Unity 实例
      this.unityContext = new UnityWebgl(this.unityConfig);

      // 监听事件
      this.unityContext.on("progress", (progress) => {
        this.progress = progress;
      });

      this.unityContext.on("error", (error) => {
        console.error("Unity error:", error);
      });

      // 渲染到 canvas
      await this.unityContext.render(canvas);

      console.log("Unity WebGL 初始化成功");
    } catch (error) {
      console.error("Unity 加载失败:", error);
    }
  },
  beforeDestroy() {
    // 清理实例
    if (this.unityContext) {
      this.unityContext.quit();
      this.unityContext = null;
    }
  },
};
</script>

<style lang="scss" scoped>
.unity-wrap {
  position: relative;
  width: 100%;
  height: 600px;
  background: #000;
}
.unity-canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.progress {
  position: absolute;
  left: 12px;
  top: 12px;
  color: #fff;
  background: rgba(0, 0, 0, 0.4);
  padding: 6px 10px;
  border-radius: 4px;
}
</style>

vue3 使用插件加载

<script setup>
  import UnityWebgl from 'unity-webgl'
  import VueUnity from 'unity-webgl/vue'
  let Unity = null
  Unity = new UnityWebgl({
      loaderUrl: 'https://xxxxx/pack2.loader.js',
      dataUrl: 'https://xxxxx/pack2.data',
      frameworkUrl: 'https://xxxxx/pack2.framework.js',
      codeUrl: 'https://xxxxx/pack2.wasm',
    })
  Unity.on('mounted', () => console.log('Unity加载完成...'))
  Unity.on('progress', (progress) => {
    progressBar.value = Math.min(Math.floor(progress * 100), 100)

    // 当进度达到100%时，设置定时器1.5秒后隐藏进度条
    if (progressBar.value >= 100 && progressTimer.value === null) {
      progressTimer.value = setTimeout(() => {
        showProgress.value = false
        progressTimer.value = null

        // TODO 更新unity Data数据
        Unity.sendMessage(
          'NetWork_Mannager',
          'GetTestDataFromWeb',
          JSON.stringify(mergeAndUpdateDataUnity())
        )
      }, 1500)
    }
  })
</script>

<template>
  <div
    class="progress"
    v-if="showProgress && progressBar < 100"
  >
    <!-- <el-progress
      :percentage="progressBar"
      class="progress-bar"
    /> -->
    <Load :progressValue="progressBar"></Load>
  </div>
  <VueUnity
    :unity="Unity"
    height="100%"
  ></VueUnity>
</template>