unity-webgl

unity-webgl

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

base on react-unity-webgl

Install

npm install unity-webgl

Usage

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

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