无法在 Unity WebGL 构建的全屏画布上覆盖 div

Question

我想在全屏 Unity - Canvas 前面覆盖一个 div。我可以在它不是全屏时覆盖它，但在画布处于全屏模式时无法弄清楚如何覆盖 Unity Canvas 的 div 前面。

我在 Unity WebGL 构建的 index.html 文件中制作了加载 CSS。我粘贴在下面。

<style>
  .loader {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 999;
    width: 120px;
    height: 120px;
    margin: -76px 0 0 -76px;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #babfc2;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
  }
  
  /* Safari */
  @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  </style>
    <div id="modelLoading" class="loader"></div>

我将此 CSS 用作 div 的类，基本上，div 显示在正常窗口中，如下图所示，但它在全屏窗口中消失。也试过：全屏的东西，但没有用。

我在下面添加屏幕截图和完整的 HTML 代码。

感谢您的帮助。

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | DeleteThisWebGLMultiThreadWorks2</title>
    <link rel="shortcut icon" href="TemplateData/favicon.ico">
    <link rel="stylesheet" href="TemplateData/style.css">
  </head>
  <body>
    <style>
      .loader {
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: 999;
        width: 120px;
        height: 120px;
        margin: -76px 0 0 -76px;
        border: 16px solid #f3f3f3;
        border-radius: 50%;
        border-top: 16px solid #babfc2;
        -webkit-animation: spin 2s linear infinite;
        animation: spin 2s linear infinite;
      }
      
      /* Safari */
      @-webkit-keyframes spin {
        0% { -webkit-transform: rotate(0deg); }
        100% { -webkit-transform: rotate(360deg); }
      }
      
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
      </style>
        <div id="modelLoading" class="loader"></div>

    <div id="unity-container" class="unity-desktop">
      <canvas id="unity-canvas" width=960 height=600>
      </canvas>
      <div id="unity-loading-bar">
        <div id="unity-logo"></div>
        <div id="unity-progress-bar-empty">
          <div id="unity-progress-bar-full"></div>
        </div>
      </div>
      <div id="unity-warning"> </div>
      <div id="unity-footer">
        <div id="unity-webgl-logo"></div>
        <div id="unity-fullscreen-button"></div>
        <div id="unity-build-title">DeleteThisWebGLMultiThreadWorks2</div>
      </div>
    </div>
    <script>
      var container = document.querySelector("#unity-container");
      var canvas = document.querySelector("#unity-canvas");
      var loadingBar = document.querySelector("#unity-loading-bar");
      var progressBarFull = document.querySelector("#unity-progress-bar-full");
      var fullscreenButton = document.querySelector("#unity-fullscreen-button");
      var warningBanner = document.querySelector("#unity-warning");

      // Shows a temporary message banner/ribbon for a few seconds, or
      // a permanent error message on top of the canvas if type=='error'.
      // If type=='warning', a yellow highlight color is used.
      // Modify or remove this function to customize the visually presented
      // way that non-critical warnings and error messages are presented to the
      // user.
      function unityShowBanner(msg, type) {
        function updateBannerVisibility() {
          warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
        }
        var div = document.createElement('div');
        div.innerHTML = msg;
        warningBanner.appendChild(div);
        if (type == 'error') div.style = 'background: red; padding: 10px;';
        else {
          if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
          setTimeout(function() {
            warningBanner.removeChild(div);
            updateBannerVisibility();
          }, 5000);
        }
        updateBannerVisibility();
      }

      var buildUrl = "Build";
      var loaderUrl = buildUrl + "/DeleteThisTryingMultiThreadWebGL8.loader.js";
      var config = {
        dataUrl: buildUrl + "/DeleteThisTryingMultiThreadWebGL8.data.gz",
        frameworkUrl: buildUrl + "/DeleteThisTryingMultiThreadWebGL8.framework.js.gz",
        codeUrl: buildUrl + "/DeleteThisTryingMultiThreadWebGL8.wasm.gz",
        streamingAssetsUrl: "StreamingAssets",
        companyName: "DefaultCompany",
        productName: "DeleteThisWebGLMultiThreadWorks2",
        productVersion: "0.1",
        showBanner: unityShowBanner,
      };

      // By default Unity keeps WebGL canvas render target size matched with
      // the DOM size of the canvas element (scaled by window.devicePixelRatio)
      // Set this to false if you want to decouple this synchronization from
      // happening inside the engine, and you would instead like to size up
      // the canvas DOM size and WebGL render target sizes yourself.
      // config.matchWebGLToCanvasSize = false;

      if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
        // Mobile device style: fill the whole browser client area with the game canvas:

        var meta = document.createElement('meta');
        meta.name = 'viewport';
        meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
        document.getElementsByTagName('head')[0].appendChild(meta);
        container.className = "unity-mobile";

        // To lower canvas resolution on mobile devices to gain some
        // performance, uncomment the following line:
        // config.devicePixelRatio = 1;

        canvas.style.width = window.innerWidth + 'px';
        canvas.style.height = window.innerHeight + 'px';

        unityShowBanner('WebGL builds are not supported on mobile devices.');
      } else {
        // Desktop style: Render the game canvas in a window that can be maximized to fullscreen:

        canvas.style.width = "960px";
        canvas.style.height = "600px";
      }

      loadingBar.style.display = "block";

      var script = document.createElement("script");
      script.src = loaderUrl;
      script.onload = () => {
        createUnityInstance(canvas, config, (progress) => {
          progressBarFull.style.width = 100 * progress + "%";
        }).then((unityInstance) => {
          loadingBar.style.display = "none";
          fullscreenButton.onclick = () => {
            unityInstance.SetFullscreen(1);
          };
        }).catch((message) => {
          alert(message);
        });
      };
      document.body.appendChild(script);
    </script>
  </body>
</html>

Answer 1

您可以制作整个画布容器，而不是要求统一库制作画布全屏 fullscreen 自己使用 JavaScript 和 DOM API。 这样，您将拥有更多的控制权。请参见下面的演示代码。解释在代码 cmets.
由于您尚未共享您的 CSS 和 javascript 库，因此我添加了自己的样式用于演示目的。
将整个代码放入本地 .html 文件并在浏览器中运行。然后按Fullscreen。您会注意到旋转加载器与画布一起全屏显示。

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

<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Unity WebGL Player | DeleteThisWebGLMultiThreadWorks2</title>
  <link rel="shortcut icon" href="TemplateData/favicon.ico">
  <link rel="stylesheet" href="TemplateData/style.css">
  <style>
    .loader {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 999;
      width: 120px;
      height: 120px;
      margin: -76px 0 0 -76px;
      border: 16px solid #f3f3f3;
      border-radius: 50%;
      border-top: 16px solid #babfc2;
      -webkit-animation: spin 2s linear infinite;
      animation: spin 2s linear infinite;
    }

    /* Safari */

    @-webkit-keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
      }

      100% {
        -webkit-transform: rotate(360deg);
      }
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    /* new rules ********/

    #unity-container {
      width: 97vw;
      height: 90vh;
      border: 3px solid orange;
      background-color: gray;
    }

    #fullScreenContainer {
      position: relative;
      height: 100%;
      width: 100%;
    }

    #unity-canvas {
      background-color: black;
      /* note the dimensions are in percentages */
      /* they'll scale with parent, as parent goes fullscreen*/
      /* the canvas will grow as well*/
      width: 100%;
      height: 100%;
      margin: 0 auto;
    }

    #unity-fullscreen-button {
      border: 1px solid black;
      width: fit-content;
      color: Orange;
      font-size: 2em;
    }

    #unity-fullscreen-button:hover {
      background-color: lightgreen;
    }

    body {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
  </style>
</head>

<body>
  <div id="unity-container" class="unity-desktop">

    <!-- take this container fullscreen instead of taking only the canvas -->
    <div id="fullScreenContainer">
      <div id="modelLoading" class="loader"></div>
      <canvas id="unity-canvas"></canvas>
    </div>

    <div id="unity-footer">
      <div id="unity-fullscreen-button">FullScreen</div>
    </div>
  </div>
  <script>
    var container = document.querySelector("#unity-container");
    var fullContainer = document.querySelector("#fullScreenContainer");
    var fullscreenButton = document.querySelector("#unity-fullscreen-button");

    fullscreenButton.onclick = () => {
      //don't request fullscreen on unityinstance
      //unityInstance.SetFullscreen(1);

      //let's take things fullscreen ourselves
      //request fullscreen on the wrapper
      fullContainer.requestFullscreen();
      //you might want to resize canvas to fit screen.

    };

    //ignore this just for the demo
    var canvas = document.getElementById("unity-canvas");
    var ctx = canvas.getContext("2d");
    ctx.font = "bold 24px verdana, sans-serif";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillStyle = "green";
    ctx.fillText("The Game", 150, 80);

    ctx.closePath();
  </script>
</body>

</html>

我认为，如果您在 chrome 开发者控制台中调试 unityInstance.SetFullscreen(1)，那么您会发现它做了类似的事情：调整画布大小并在其上调用 requestFullscreen()。
注意： StackOverflow 和其他在线 html 编辑器不允许全屏，因此您必须尝试本地 .html 文件中的代码。

---

修复后您的代码将如下所示：

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

<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title> Xplore 3D Model Editor</title>
  <link rel="shortcut icon" href="TemplateData/favicon.ico">
  <link rel="stylesheet" href="TemplateData/style.css">
  <style>
    #modelLoading {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 1;
      width: 120px;
      height: 120px;
      margin: -76px 0 0 -76px;
      border: 16px solid #f3f3f3;
      border-radius: 50%;
      border-top: 16px solid #babfc2;
      -webkit-animation: spin 2s linear infinite;
      animation: spin 2s linear infinite;
    }

    #modelLoading:fullscreen {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 1;
      width: 120px;
      height: 120px;
      margin: -76px 0 0 -76px;
      border: 16px solid #f3f3f3;
      border-radius: 50%;
      border-top: 16px solid #babfc2;
      -webkit-animation: spin 2s linear infinite;
      animation: spin 2s linear infinite;
    }

    /* Safari */
    @-webkit-keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
      }

      100% {
        -webkit-transform: rotate(360deg);
      }
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

  </style>
</head>

<body>
  <div id="unity-container" class="unity-desktop">
    <div id="modelLoadingContainer">
      <div id="modelLoading"></div>
      <!-- //*** removed inline dimensions. setting inline style is not good -->
      <canvas id="unity-canvas"></canvas>
    </div>
    <div id="unity-loading-bar">
      <div id="unity-logo"></div>
      <div id="unity-progress-bar-empty">
        <div id="unity-progress-bar-full"></div>
      </div>
    </div>
    <div id="unity-warning"> </div>
    <div id="unity-footer">
      <div id="unity-webgl-logo"></div>

      <div id="unity-fullscreen-button">
      </div>
      <div id="unity-build-title">Xplore 3D Model Editor</div>
    </div>
  </div>
  <script>
    var container = document.querySelector("#unity-container");
    var canvas = document.querySelector("#unity-canvas");
    var loadingBar = document.querySelector("#unity-loading-bar");
    var progressBarFull = document.querySelector("#unity-progress-bar-full");
    var fullscreenButton = document.querySelector("#unity-fullscreen-button");
    var warningBanner = document.querySelector("#unity-warning");
    var modelLoading = document.getElementById('modelLoading');

    function EnableModelLoading() {
      document.getElementById("modelLoading").style.display = "";
    }
    function DisableleModelLoading() {
      document.getElementById("modelLoading").style.display = "none";
    }

    // Shows a temporary message banner/ribbon for a few seconds, or
    // a permanent error message on top of the canvas if type=='error'.
    // If type=='warning', a yellow highlight color is used.
    // Modify or remove this function to customize the visually presented
    // way that non-critical warnings and error messages are presented to the
    // user.
    function unityShowBanner(msg, type) {
      function updateBannerVisibility() {
        warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
      }
      var div = document.createElement('div');
      div.innerHTML = msg;
      warningBanner.appendChild(div);
      if (type == 'error') div.style = 'background: red; padding: 10px;';
      else {
        if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
        setTimeout(function () {
          warningBanner.removeChild(div);
          updateBannerVisibility();
        }, 5000);
      }
      updateBannerVisibility();
    }

    var buildUrl = "Build";
    var loaderUrl = buildUrl + "/Xplore3DModelEditorOnHeroku5.loader.js";
    var config = {
      dataUrl: buildUrl + "/Xplore3DModelEditorOnHeroku5.data.unityweb",
      frameworkUrl: buildUrl + "/Xplore3DModelEditorOnHeroku5.framework.js.unityweb",
      codeUrl: buildUrl + "/Xplore3DModelEditorOnHeroku5.wasm.unityweb",
      streamingAssetsUrl: "StreamingAssets",
      companyName: "Timelooper",
      productName: "Xplore 3D Model Editor",
      productVersion: "0.1",
      showBanner: unityShowBanner,
    };

    // By default Unity keeps WebGL canvas render target size matched with
    // the DOM size of the canvas element (scaled by window.devicePixelRatio)
    // Set this to false if you want to decouple this synchronization from
    // happening inside the engine, and you would instead like to size up
    // the canvas DOM size and WebGL render target sizes yourself.
    // config.matchWebGLToCanvasSize = false;

    if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
      container.className = "unity-mobile";
      // Avoid draining fillrate performance on mobile devices,
      // and default/override low DPI mode on mobile browsers.
      config.devicePixelRatio = 1;
      unityShowBanner('WebGL builds are not supported on mobile devices.');
    } else {
      //*** changes set minWidth instead of fixed width 
      canvas.style.minWidth = "960px";
      canvas.style.minHeight = "600px";
      //100% will ensure canvas will be of parent size
      canvas.style.width = "100%";
      canvas.style.height = "100%";
    }
    loadingBar.style.display = "block";

    var script = document.createElement("script");
    script.src = loaderUrl;
    script.onload = () => {
      //DisableleModelLoading();
      createUnityInstance(canvas, config, (progress) => {
        progressBarFull.style.width = 100 * progress + "%";
      }).then((unityInstance) => {
        loadingBar.style.display = "none";
        //*** hide loading
        modelLoading.style.display = "none";
      }).catch((message) => {
        alert(message);
      });
    };

    document.getElementById('unity-fullscreen-button').addEventListener('click', function () {
      var elem = document.getElementById('modelLoadingContainer');
      elem.webkitRequestFullscreen();
      if (elem.requestFullscreen) {
        elem.requestFullscreen();
      } else if (elem.msRequestFullscreen) {
        elem.msRequestFullscreen();
      } else if (elem.mozRequestFullScreen) {
        elem.mozRequestFullScreen();
      } else if (elem.webkitRequestFullscreen) {
        elem.webkitRequestFullscreen();
      }
    });
    document.body.appendChild(script);

  </script>
</body>

</html>

您可能需要调整 fullScreenContainer 元素的样式。