vue 에 unity webGL 연동 하기

Vue js 에 unity webgl 프로젝트를 연동하려고 하다가 아래 라이브러리를 발견

 

https://npm.io/package/unity-webgl

npm.io | NPM packages search engine

 

vue2를 쓰고 있어서 아래와 같이 설치

npm install unity-webgl@2.* --save

 

vue 파일에서 import해서 사용

<script>
  import UnityWebgl from 'unity-webgl';
  
  // Unity WebGL 빌드 결과물을 여기서 불러온다
  const Unity = new UnityWebgl({
    loaderUrl: "unity/flight.loader.js",
    dataUrl: "unity/flight.data",
    frameworkUrl: "unity/flight.framework.js",
    codeUrl: "unity/flight.wasm",
  });

 

 

Unity WebGL 빌드시 설정

File > Build Settings > Player Settings > Publishing Settings

 

빌드하고 나면 아래와 같은 폴더 및 파일 생성

 

이 파일들을 Vue.js 프로젝트에 Public 폴더에 잘 넣어두고 아래처럼 불러다 쓰면 됨

아래는 Vue 파일 전체임. 간단하쥬?

<template>
  <v-app id="Flight">
      <div class="about">
        <div>
          <img
              id="image"
              class="mw-100"
              src="../../assets/header_game.png"
          />
        </div>
        <Unity :unity="unityContext" width="100%" height="390px" />
        <div id="adsgoeshere" style="padding-top:5px; text-align: center;" v-html=this.adfitContent></div>
      </div>
  </v-app>
</template>
  <script>
  import UnityWebgl from 'unity-webgl';
  
  const Unity = new UnityWebgl({
    loaderUrl: "unity/flight.loader.js",
    dataUrl: "unity/flight.data",
    frameworkUrl: "unity/flight.framework.js",
    codeUrl: "unity/flight.wasm",
  });


// Unity 에서 Data 받기 Test중 : Unity 안에 Plugins 에 .jslib 파일에서 보내줌
//   Unity.on('showDialog', (data) => {
//     console.log("Score: " + data)
//   });
  
  export default {
      name: "flight",
      components: {
      // HelloWorld,
      Unity: UnityWebgl.vueComponent
    },
  
      data() {
          return {
            unityContext: Unity,
            adfitContent: '',
          };
      },
      created() {
      },
  
      async mounted() {
        this.adfitContent = document.getElementById('divadfitdisplaynone').innerHTML;
    },
  	
      methods: {
      //Unity에 메시지 전달하는 영역 Test 중
        postMessage() {
            Unity.send('objectName', 'methodName', {
                id: 'B0001',
                name: 'Building#1',
                location: [150, 75]
            })
            }
      },
  };
  
  </script>

 

가운데 영역이 Unity WebGL 영역임

 

https://web.inside-world.net/web-ui#/flight

INSIDE