vue与u3d互调

news2024/10/19 0:23:07

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>