从JavaScript (Vue)调用Unity WebGl函数

在Vue中调用Unity WebGL函数，你需要确保Unity已经正确地构建了WebGL版本，并且你已经将生成的HTML文件和相关的JavaScript文件集成到了你的Vue项目中。以下是如何在Vue 3中调用Unity WebGL函数的步骤：

1. 集成Unity WebGL输出：首先，你需要将Unity构建的WebGL输出集成到Vue项目中。这通常意味着将Unity生成的index.html和相关文件复制到你的Vue项目的public文件夹中。
2. 在Vue组件中引用Unity实例：在Vue组件中，你需要获取到Unity实例的引用，这样才能调用其方法。
3. 调用Unity方法：使用Unity实例的SendMessage方法来调用Unity中的C#脚本函数。

下面是一个简单的例子，展示了如何在Vue组件中调用Unity WebGL函数：

<template>
  <div>
    <!-- Unity WebGL 渲染的容器 -->
    <div id="unity-container" ref="unityContainer"></div>
    <!-- 调用Unity方法的按钮 -->
    <button @click="callUnityMethod">Call Unity Method</button>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';

const unityContainer = ref(null);
let unityInstance = null;

onMounted(() => {
  // 假设Unity实例已经通过某种方式挂载到了#unity-container上
  // 这里需要根据实际情况来获取Unity实例
  unityInstance = UnityLoader.instantiate("unity-container", "Build/YourGame.json", { onProgress: UnityProgress });
});

const callUnityMethod = () => {
  if (unityInstance) {
    // 调用Unity中的方法，第一个参数是游戏对象的名字，第二个参数是方法名
    unityInstance.SendMessage('GameObjectName', 'MethodName');
  }
};
</script>

在上面的代码中，UnityLoader.instantiate是Unity提供的用于加载WebGL构建的工具。你需要替换"Build/YourGame.json"为你的Unity构建的实际路径。

SendMessage方法的第一个参数是Unity中游戏对象的名字，第二个参数是你想要调用的C#方法的名字。确保这些名字与Unity中的实际名字相匹配。

请注意，Unity WebGL构建需要在支持WebGL的浏览器中运行，并且可能需要用户授权访问某些WebGL功能。

此外，由于Unity WebGL构建通常是异步加载的，你可能需要在Unity实例完全加载之后才能调用其方法。在上面的例子中，UnityLoader.instantiate方法接受一个onProgress回调，你可以使用它来确保Unity实例加载完成后再调用方法。