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

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

• loaderUrl: string The url to the build json file generated by Unity
• dataUrl: string : The url to the build data file generated by Unity
• frameworkUrl: string : The url to the framework file generated by Unity
• codeUrl: string : The url to the unity code file generated by Unity
• streamingAssetsUrl?: string : The url where the streaming assets can be found
• companyName?: string : The applications company name
• productName?: string : The applications product name
• productVersion?: string : The applications product version
• webglContextAttributes?: IWebGLContextAttributes : This object allow you to configure WebGLRenderingContext creation options. see MDN@WebGLRenderingContext
• devicePixelRatio?: number : Uncomment this to override low DPI rendering on high DPI displays. see MDN@devicePixelRatio
• matchWebGLToCanvasSize?: boolean : Uncomment this to separately control WebGL canvas render size and DOM element size. see unity3d@matchWebGLToCanvasSize

Methods：

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

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

Events：

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

props

• unity: UnityWebgl
• width?: string|number , default: 100%
• height?: string|number , default: 100%

npm install unity-webgl

browser

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

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"
})

Unity
  .on('progress', percent => console.log('Unity Loaded: ', percent))
  .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: "Unity",
  productVersion: "0.1",
})

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

in example.vue

<template>
  <Unity :unity="unityContext" width="800px" height="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"
})

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

1. In Unity call js functions.
   在Unity中调用js方法。

// # in Unity
// Call the `showDialog` method in unity.
__UnityLib__.showDialog(data)

// 📢 `__UnityLib__` is a global function collection.

// # in webApp

const Unity = new UnityWebgl.default()

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

// you also can call function.
Unity.emit('showDialog', data)
// or
window[Unity.global_name].showDialog(data) // 📢 Unity.global_name = __UnityLib__

2. JS call Unity public methods.
   在web页面内调用 Unity public方法。

/**
 * 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)

// e.g. Initialize Building#001 data
Unity.send('mainScene', 'init', {
  id: 'b001',
  name: 'building#001',
  length: 95,
  width: 27,
  height: 120
})