unity-webgl

unity-webgl

Unity WebGL provides an easy solution for embedding Unity WebGL builds in your webApp or Vue.js project, with two-way communication between your webApp and Unity application with advanced API's.

based on react-unity-webgl

features

• Simple 、 flexible
• two-way communication (webApp, Unity)
• Built-in event handler
• Available for Vue.js

Install

npm install unity-webgl

Usage

in example.html:

<canvas id="canvas" style="width: 100%; height: 100%"></canvas>

<button onclick="onDestroy()">Destroy</button>
<button onclick="onLoad()">Reload</button>
<button onclick="onFullscreen()">Fullscreen</button>

<script>
var Unity = new UnityWebgl.default('#canvas', {
  loaderUrl: 'Build/OUT_BIM.loader.js',
  dataUrl: "Build/OUT_BIM.data",
  frameworkUrl: "Build/OUT_BIM.framework.js",
  codeUrl: "Build/OUT_BIM.wasm",
  streamingAssetsUrl: "StreamingAssets",
  companyName: "DefaultCompany",
  productName: "BIM",
  productVersion: "0.1",
})

Unity
  .on('progress', percent => console.log('Unity progress: ', percent))
  .on('loaded', percent => console.log('Unity loaded: success'))
  .on('created', percent => console.log('Unity created: success'))

function postMessage() {
  Unity.send('objectName', 'methodName', {
    id: 'B0001',
    name: 'Building#1',
    location: [150, 75]
  })
}

function onDestroy() {
  Unity.destroy()
}

function onLoad() {
  Unity.create('#canvas')
}

function onFullscreen() {
  Unity.setFullscreen(true)
}
</script>

You can also:

var Unity = new UnityWebgl.default({
  loaderUrl: 'Build/OUT_BIM.loader.js',
  dataUrl: "Build/OUT_BIM.data",
  frameworkUrl: "Build/OUT_BIM.framework.js",
  codeUrl: "Build/OUT_BIM.wasm",
  streamingAssetsUrl: "StreamingAssets",
  companyName: "DefaultCompany",
  productName: "BIM",
  productVersion: "0.1",
})

Unity.create(document.querySelector('#canvas'))

Vue

in example.vue

<template>
  <Unity :unity="unityContext" width="800px" heighht="600px" />
</template>

<script>
import UnityWebgl, { VueUnity } from 'unity-webgl'

const Unity = new UnityWebgl({
  loaderUrl: 'Build/OUT_BIM.loader.js',
  dataUrl: "Build/OUT_BIM.data",
  frameworkUrl: "Build/OUT_BIM.framework.js",
  codeUrl: "Build/OUT_BIM.wasm",
  streamingAssetsUrl: "StreamingAssets",
  companyName: "DefaultCompany",
  productName: "BIM",
  productVersion: "0.1",
})

export default {
  name: 'Unity',
  component: {
    Unity: VueUnity
  },
  data() {
    return {
      unityContext: Unity
    }
  }
}
</script>

methods

events:

• on(eventName: string, eventListener: function)
• once(eventName: string, eventListener: function)
• off(eventName: string)
• clear()
• dispatch(eventName: string)

instance:

• create(canvasElement: HTMLCanvasElement | string)
• send(objectName: string, methodName: string, params: any)
• setFullscreen()
• destroy()