index.html

<!DOCTYPE html>
<html lang="en-us">

<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>ReactUnity Previewer</title>
  <link rel="icon" href="./favicon.ico">

  <style>
    html,
    body {
      font-size: 0;
      margin: 0;
      height: 100%;
      overflow: hidden;
    }

    #unity-canvas {
      height: 100%;
      width: 100%;
      background: #231F20;
    }

    .loader-center {
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      height: 0;
      overflow: visible;
      display: block;
      pointer-events: none;
      user-select: none;
      -webkit-user-select: none;
    }

    .loader {
      position: absolute;
      height: 50px;
      top: -25px;
      left: 50px;
      right: 50px;
      background: #c5cae9;
      border-radius: 10px;
      overflow: hidden;
    }

    .loader-bar {
      height: 100%;
      background: #3f51b5;
      width: 0;
    }

    #error {
      display: none;
      position: absolute;
      inset: 0;
      overflow: auto;
      padding: 3rem 1.5rem;
      background: #fff;
      color: #231F20;
      font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    }

    #error>div {
      max-width: 40rem;
      margin: 0 auto;
    }

    #error h1 {
      font-size: 1.5rem;
      margin: 0 0 1rem;
    }

    #error code {
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      background: #f1f1f4;
      padding: .1em .3em;
      border-radius: 3px;
    }
  </style>
</head>

<body>
  <canvas id="unity-canvas"></canvas>

  <div class="loader-center" id="loader-root">
    <div class="loader">
      <div class="loader-bar" id="loader-bar"></div>
    </div>
  </div>

  <div id="error">
    <div>
      <h1>Couldn't load the previewer</h1>
      <p>
        The previewer's Unity WebGL build is hosted rather than bundled, so the first load needs
        network access. It is cached by the browser afterwards.
      </p>
      <p>
        To work offline, or to preview your own Unity scene instead, build a scene with a
        <code>ReactRendererUGUI</code> component and copy the output into a <code>previewer</code>
        folder in your React project, so that <code>previewer/index.html</code> exists. The dev
        server prefers that over this page.
      </p>
      <p><a href="./info.html">More about the previewer and the dev server</a></p>
    </div>
  </div>

  <script>
    /*
     * The Unity build lives on reactunity.github.io rather than in an npm package: it is
     * ~26 MB, and shipping it as a dependency meant every install paid for it. GitHub Pages
     * sends `Access-Control-Allow-Origin: *`, so a cross-origin fetch from this dev server
     * is fine.
     *
     * `.unityweb` is Unity's name for "gzipped, and the loader inflates it itself". Pages
     * cannot be told to send `Content-Encoding`, so the alternative is shipping the files
     * raw, which is three times the download. It costs streaming compilation.
     *
     * The version is part of the path on purpose. Unity's loader, framework and wasm are
     * built as a set and are not interchangeable, so each build gets its own directory and
     * nothing is ever overwritten. It names the release the build ships in, not the day it
     * was made. Publishing a new previewer build means adding a directory on that branch and
     * bumping the version here -- in that order, or every dev server in the wild asks for a
     * directory that is not there yet.
     */
    var PREVIEWER_VERSION = '0.24.0';
    var PREVIEWER_BASE = 'https://reactunity.github.io/Unity/previewer/' + PREVIEWER_VERSION + '/Build/';

    function fail() {
      document.getElementById('loader-root').style.display = 'none';
      document.getElementById('error').style.display = 'block';
    }

    function onProgress(progress) {
      var bar = document.getElementById('loader-bar');
      if (bar) bar.style.width = (progress * 100) + '%';

      var loader = document.getElementById('loader-root');
      if (loader) loader.style.display = progress < 1 ? 'block' : 'none';
    }

    /*
     * Unity's loader is a plain script defining a global `createUnityInstance`, so it has to
     * be appended rather than imported.
     */
    var loader = document.createElement('script');
    loader.src = PREVIEWER_BASE + 'Previewer.loader.js';
    loader.onerror = fail;
    loader.onload = () => {
      if (typeof createUnityInstance !== 'function') return fail();

      createUnityInstance(document.getElementById('unity-canvas'), {
        dataUrl: PREVIEWER_BASE + 'Previewer.data.unityweb',
        frameworkUrl: PREVIEWER_BASE + 'Previewer.framework.js.unityweb',
        codeUrl: PREVIEWER_BASE + 'Previewer.wasm.unityweb',
        // Absolute like the rest. Left relative it would resolve against this dev server,
        // which has no StreamingAssets to serve.
        streamingAssetsUrl: PREVIEWER_BASE + '../StreamingAssets',
        companyName: 'reactunity',
        productName: 'dev-sample',
        productVersion: PREVIEWER_VERSION,
      }, onProgress).catch(fail);
    };
    document.head.appendChild(loader);
  </script>
</body>

</html>