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.

UnityWebGL.js 提供了一种简单的解决方案，用于在 webApp 或 Vue.js 项目中嵌入 Unity WebGL，并通过API在 webApp 和 Unity 之间进行双向通信。

based on react-unity-webgl

features

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

Install

npm install unity-webgl

browser

https://cdn.jsdelivr.net/npm/unity-webgl/dist/UnityWebgl.min.js

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', () => console.log('Unity loaded: success.'))
  .on('created', () => console.log('Unity Instance: created.'))
  .on('destroyed', () => console.log('Unity Instance: Destroyed.'))

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()

Events

• progress(value: number) : loading progress.
• loaded() : loading complete.
• created() : Unity instance is created.
• destroyed() : Quits the Unity Instance and clears it from memory.

Communication

• Unity application call js functions.
  在Unity中调用js方法。

const Unity = new UnityWebgl.default()

// Register functions
Unity.on('showDialog', (data: any) => {
  console.log(data)
  $('#dialog').show()
})

// call function.
Unity.dispatch('showDialog', data)
// or
window[Unity.global_name].showDialog(data) // ⚠️ Unity.global_name = __UnityLib__

// call function in unity application
__UnityLib__.showDialog(data)

• JS call Unity public methods.
  在web页面内调用 unity应用公用方法。

/**
 * Sends a message to the UnityInstance to invoke a public method.
 * @param {string} objectName Unity scene name.
 * @param {string} methodName public method name.
 * @param {any} params an optional method parameter.
 */
Unity.send(objectName, methodName, params)