vue3引入并加载unity工程的两种方式

news/2025/3/17 4:23:32/

1、使用`unity-webgl`插件

npm i unity-webgl

unity打包后的build文件夹是这样的
在这里插入图片描述
需要手动删除.unityweb这个后缀，完成后放在vue3项目的根目录下的public文件夹下。
下面是引入unity的vue组件,其中实例化UnityWebgl时的参数地址直接引用上面的对应文件地址

<script setup>
import UnityWebgl from 'unity-webgl';
import UnityVue from 'unity-webgl/vue';const unityContext = new UnityWebgl({loaderUrl: '/unity/Build/test.loader.js',dataUrl: '/unity/Build/test.data',frameworkUrl: '/unity/Build/test.framework.js',codeUrl: '/unity/Build/test.wasm',companyName: 'test',productName: 'test',
});
</script><template><div style="width: 1900px; height: 900px; border: 1px solid #f00"><UnityVue :unity="unityContext" /></div>
</template>

2、使用iframe引入

首先将 unity工程打包后放在服务器上，我是使用的nginx，因为比较方便，自己就能测试。
在这里插入图片描述
然后将iframe的地址填写为在nginx的配置文件中配置的地址就行了

nginx配置：

server {listen       9081;server_name  localhost;add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Headers X-Requested-With;add_header Access-Control-Allow-Methods GET,POST,OPTIONS;location / {root   html/unityTest;try_files $uri $uri/  /index.html;add_header Cache-Control no-store;index  index.html index.htm;}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}}

所以我这里就是127.0.0.1:9081 简单测试一下，此时直接浏览器访问该地址也能看到unity项目正常运行
在vue中：
我是用了一个外部配置文件：

const configUrl = {baseURL: 'http://192.168.2.116:8004', //资源服务接口地址unityURL: 'http://192.168.2.116:9081', //unity地址
}

<script setup lang="ts">
const iframeSrc = configUrl.unityURL;
</script>
<template><iframe :src="iframeSrc" class="iframe" frameborder="0"></iframe>
</template>