Skip to content

Commit e27906f

Browse files
MarinererMarinerer
authored
feat: Add HTML, Vue2, and Vue3 examples for UnityWebgl (#38)
* docs: Update demo links in READMEs * feat: Add HTML, Vue2, and Vue3 examples for UnityWebgl
1 parent 2aca339 commit e27906f

21 files changed

+4766
-2365
lines changed

‎README.md

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,8 @@ npm install unity-webgl
4040

4141
## Quick Start
4242

43-
- [Live Demo]()
44-
- [vue2 Demo](https://stackblitz.com/edit/unity-webgl-vue2-demo)
45-
- [vue3 Demo](https://stackblitz.com/edit/unity-webgl-vue3-demo)
43+
- [Live Demo](https://stackblitz.com/edit/unity-webgl-v4-demo)
44+
- [vue3 Demo](https://stackblitz.com/edit/unity-webgl-v4-vue3-demo)
4645

4746
> 🚨 **Important:**
4847
> Communication and interaction with the web application are only possible after the Unity instance is successfully created (when the `mounted` event is triggered).

‎README.zh_CN.md

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,8 @@ https://cdn.jsdelivr.net/npm/unity-webgl/dist/index.min.js
4141

4242
## Quick Start
4343

44-
- [Live Demo]()
45-
- [vue2 Demo](https://stackblitz.com/edit/unity-webgl-vue2-demo)
46-
- [vue3 Demo](https://stackblitz.com/edit/unity-webgl-vue3-demo)
44+
- [Live Demo](https://stackblitz.com/edit/unity-webgl-v4-demo)
45+
- [vue3 Demo](https://stackblitz.com/edit/unity-webgl-v4-vue3-demo)
4746

4847
> 🚨 提醒：
4948
> 仅在 `Unity` 实例成功创建后（触发 `mounted` 事件时）才能进行 Web 应用程序的通信和交互。

‎examples/html/index.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!doctype html>
2+
<html lang="zh-CN">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1" />
6+
<meta name="renderer" content="webkit" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<meta name="format-detection" content="telphone=no" />
9+
<title><title>unity-webgl demo</title></title>
10+
<meta name="description" content="" />
11+
<meta name="keywords" content="" />
12+
</head>
13+
<body>
14+
<div>
15+
<canvas id="canvas" style="width: 800px; height: 600px"></canvas>
16+
17+
<div>
18+
<button onclick="sendMessage()">postMessage</button>
19+
<button onclick="onFullscreen()">Fullscreen</button>
20+
</div>
21+
</div>
22+
</body>
23+
<script src="main.js" type="module"></script>
24+
</html>

‎examples/html/main.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import UnityWebgl from 'unity-webgl'
2+
3+
const unityContext = new UnityWebgl('#canvas', {
4+
loaderUrl:
5+
'https://static-huariot-com.oss-cn-hangzhou.aliyuncs.com/uploads/17343457791501843/demo.loader.js',
6+
dataUrl:
7+
'https://static-huariot-com.oss-cn-hangzhou.aliyuncs.com/uploads/17343457791501843/demo.data',
8+
frameworkUrl:
9+
'https://static-huariot-com.oss-cn-hangzhou.aliyuncs.com/uploads/17343457791501843/demo.framework.js',
10+
codeUrl:
11+
'https://static-huariot-com.oss-cn-hangzhou.aliyuncs.com/uploads/17343457791501843/demo.wasm',
12+
})
13+
14+
unityContext
15+
.on('progress', (p) => console.log('loading :', p))
16+
.on('mounted', () => console.log('unity mounted ...'))
17+
.on('debug', (msg) => console.log('unity debug', msg))
18+
19+
unityContext.addUnityListener('gameStart', (msg) => {
20+
alert(msg)
21+
console.log('gameStart : ', msg)
22+
})
23+
24+
window.sendMessage = function sendMessage() {
25+
unityContext.sendMessage('GameUI', 'ReceiveRole', 'Tanya')
26+
}
27+
28+
window.onFullscreen = function () {
29+
unityContext.setFullscreen(true)
30+
}

‎examples/html/package.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"name": "html",
3+
"version": "0.0.0",
4+
"private": true,
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite"
8+
},
9+
"devDependencies": {
10+
"vite": "^6.0.5"
11+
},
12+
"dependencies": {
13+
"unity-webgl": "workspace:^"
14+
}
15+
}

‎examples/html/vite.config.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { defineConfig } from 'vite'
2+
3+
export default defineConfig({
4+
server: {
5+
port: 3010,
6+
},
7+
})

‎examples/vue2/App.vue

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<script>
2+
import UnityWebgl from 'unity-webgl'
3+
import VueUnity from 'unity-webgl/vue'
4+
5+
const unityContext = new UnityWebgl({
6+
loaderUrl:
7+
'https://static-huariot-com.oss-cn-hangzhou.aliyuncs.com/uploads/17343457791501843/demo.loader.js',
8+
dataUrl:
9+
'https://static-huariot-com.oss-cn-hangzhou.aliyuncs.com/uploads/17343457791501843/demo.data',
10+
frameworkUrl:
11+
'https://static-huariot-com.oss-cn-hangzhou.aliyuncs.com/uploads/17343457791501843/demo.framework.js',
12+
codeUrl:
13+
'https://static-huariot-com.oss-cn-hangzhou.aliyuncs.com/uploads/17343457791501843/demo.wasm',
14+
});
15+
16+
unityContext
17+
.on('progress', (p) => console.log('loading :', p))
18+
.on('mounted', () => console.log('unity mounted ...'))
19+
.on('debug', (msg) => console.log('unity debug', msg));
20+
21+
unityContext.addUnityListener('gameStart', (msg) => {
22+
alert(msg);
23+
console.log('gameStart : ', msg);
24+
});
25+
26+
export default {
27+
name: 'App',
28+
components: {
29+
VueUnity
30+
},
31+
data() {
32+
return {
33+
unityContext
34+
}
35+
},
36+
methods: {
37+
onSendMessage() {
38+
unityContext.sendMessage('GameUI', 'ReceiveRole', 'Tanya')
39+
},
40+
onFullscreen() {
41+
unityContext.setFullscreen(true)
42+
}
43+
}
44+
}
45+
</script>
46+
47+
<template>
48+
<div>
49+
<VueUnity :unity="unityContext" width="800px" height="600px" tabindex="0" />
50+
<div>
51+
<button @click="onSendMessage">SendMessage</button>
52+
<button @click="onFullscreen">Fullscreen</button>
53+
</div>
54+
</div>
55+
</template>

‎examples/vue2/index.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!doctype html>
2+
<html lang="zh-CN">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1" />
6+
<meta name="renderer" content="webkit" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<meta name="format-detection" content="telphone=no" />
9+
<title>unity-webgl vue2 demo</title>
10+
<meta name="description" content="" />
11+
<meta name="keywords" content="" />
12+
</head>
13+
<body>
14+
<div id="app"></div>
15+
<script src="/main.js" type="module"></script>
16+
</body>
17+
</html>

‎examples/vue2/main.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import Vue from 'vue'
2+
import App from './App.vue'
3+
4+
new Vue({
5+
render: (h) => h(App),
6+
}).$mount('#app')

‎examples/vue2/package.json

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "vue2",
3+
"version": "0.0.0",
4+
"private": true,
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite"
8+
},
9+
"devDependencies": {
10+
"@vitejs/plugin-legacy": "^6.0.0",
11+
"@vitejs/plugin-vue2": "^2.3.3",
12+
"vite": "^6.0.5"
13+
},
14+
"dependencies": {
15+
"unity-webgl": "^4.0.1",
16+
"vue": "2.7.16"
17+
}
18+
}

0 commit comments

Comments
 (0)