nuxt3でunity webglを簡単に組み込みできるnpmモジュールを書いてみました。unityのwebglビルドを配置してコンポーネントを指定するだけです。windowのリサイズに合わせてcanvasタグのサイズも変わるようにしています。
GitHub - moritetu/nuxt-unity-webgl: Vue composable introduces component and utilities for unity WebGL container
Vue composable introduces component and utilities for unity WebGL container - moritetu/nuxt-unity-webgl
github.com
以下のような感じで組み込むことができます。
|
1 |
pnpm add -D nuxt-unity-webgl |
app.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<script lang="ts" setup> useProvideNuxtUnity(undefined, (unity) => { // eslint-disable-next-line no-console console.log(unity) }) const { NuxtUnity, loaded, SendMessage } = useNuxtUnityOrThrow() const callUnityFunction = () => { // scalar or json object are enable as argument SendMessage('GameObject', 'HelloMethod', { message: 'hello' }) } const nuxtApp = useNuxtApp() nuxtApp.$nuxtUnityEvent.on('nuxt-unity:ready', (providerId, unityInstance) => { // eslint-disable-next-line no-console console.log(providerId, unityInstance) }) nuxtApp.$nuxtUnityEvent.on('hello', (message: string) => { // eslint-disable-next-line no-console console.log(message) }) </script> <template> <div class="container"> <NuxtUnity width="500px" height="500px" unity-loader="/unity/Build.loader.js" :config="{ dataUrl: '/unity/Build.data', frameworkUrl: '/unity/Build.framework.js', codeUrl: '/unity/Build.wasm', }" :resizable="true" :refresh-delay-time="100" ></NuxtUnity> </div> <button @click="callUnityFunction">SendMessage</button> </template> |
Unity側では、jslibファイルでWebの世界と連携すると思います。nuxt-unity-webglでは、モジュールイストールでjslibとnuxt間の連携のためのプラグインも一緒にインストールします。プラグインの実体はEventEmitterと同様なインターフェースのオブジェクト（EventEmitter3）でメッセージを送信とハンドリングができます。
|
1 2 3 4 5 6 |
// Sample.jslib mergeInto(LibraryManager.library, { JSLibFunction: function () { $nuxtUnityEvent.emit('hello', 'Hello from unity jslib') }, }) |
コメント