代码拉取完成，页面将自动刷新
Easy to use Unity 5.6 or newer (also Unity 2017 or newer) WebGL player component for your VueJS application. Embed your Unity application in your application for writing interactive interfaces with two way Unity and VueJS communication.
npm install vue-unity-webgl
To get stated import the Unity component from vue-unity-webgl. Once imported you can use the Unity component to load in your Unity content. Place the Unity tag along with a src to the json file Unity exported.
<template>
<unity src="static/Build/game.json" width="1000" height="600" unityLoader="static/Build/UnityLoader.js"></unity>
</template>
<script>
import Unity from 'vue-unity-webgl'
new Vue({
components: { Unity }
})
</script>
Notice
Don't forget to add a script tag to load the
UnityLoader.jsfile if miss unityLoader attribute, exported by Unity in your base html file, index.html in example.
src - Path to json buildwidth - width div containerheight - height div containerunityLoader - path to UnityLoader, with thisUnity allows you to send Javascript messages to the Unity content. In order to do so using VueJs you have to add a ref to the <unity> tag, and call the message(object, method, param) method through this.$refs.
<template>
<unity src="static/Build/game.json" width="1000" height="600" unityLoader="static/Build/UnityLoader.js" ref="myInstance"></unity>
</template>
<script>
import Unity from 'vue-unity-webgl'
new Vue({
methods: {
onClick () {
this.$refs.myInstance.message("object", "method", "param")
}
}
})
</script>
The player will be injected in the a component with the class unity-container. To style to player use the following sass styling. To style the loader you can style the component with the class unity-loader. See the example below.
.unity {
.unity-container {
canvas {
}
}
.unity-loader {
.bar {
.fill {
/* the width will be set by the component */
}
}
}
}
<!DOCTYPE html>
<html>
<head>
<title>My Unity Game</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="Build/UnityLoader.js"></script>
<script src="static/compiled/bundle.js"></script>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手