当前位置：首页 > news >正文

vue与u3d互调

news 2025/5/18 18:53:50

vue与u3d互调

u3d配置

给前端发送数据的方法中使用下面的方法给Window注册个事件

//  eventname 方法名: 随意取, 前端用这个名判断是获取哪个事件的数据
//  data 给vue 传递的参数
window.ReportReady(UTF8ToString(eventname), UTF8ToString(data));

vue配置

将u3d导出好的文件放到/public/u3d下

Build- testwebgl.data.unityweb- testwebgl.framework.js.unityweb- testwebgl.loader.js- testwebgl.wasm.unityweb
StreamingAssets
TemplateData
index.html

安装

npm i unity-webgl@3.5.5 --save

组件

<template><VueUnity :unity="unityContext" width="100%" height="100%" id="unityCanvas"></VueUnity><el-button type="primary"  @click="handleSendTo">向u3d发送数据</el-button>
</template><script>
import UnityWebgl from "unity-webgl";
import VueUnity from "unity-webgl/vue";
export default {components: {VueUnity,},data() {return {unityContext: null,};},mounted() {this.initUnity();// 监听事件window.ReportReady = function (eventname, data) {console.log("u3d发送来的>>>>", eventname, data);if (eventname == "getHeightEvent") {...}};},methods: {handleSendTo(){this.unityContext.send("changeHeight", "height", 100);},initUnity() {this.unityContext = new UnityWebgl(document.getElementById("unityCanvas"), {loaderUrl:"/u3d/Build/testwebgl.loader.js",dataUrl: "/u3d/Build/testwebgl.data.unityweb",frameworkUrl:"/u3d/Build/testwebgl.framework.js.unityweb",codeUrl:  "/u3d/Build/testwebgl.wasm.unityweb",});},},
};
</script>