文章/答案/技术大牛

发布

社区首页 >问答首页 >不能在全屏幕画布上覆盖div用于统一WebGL构建

问不能在全屏幕画布上覆盖div用于统一WebGL构建
EN

Stack Overflow用户

提问于 2021-12-10 12:30:33

回答 1查看 1.1K关注 0票数 0

我想在全屏幕统一画布前覆盖一个div。我可以覆盖它时，它不是全屏，但不能知道如何覆盖div前面的统一帆布，而画布是在全屏模式。

我在Unity构建的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>

css

unity3d

html5-canvas

webgl

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-12-14 08:55:52

您可以使用全屏和DOM来自己制作整个画布容器，而不是要求统一库来制作画布全屏。这样你就有更多的控制权了。见下面的演示代码。说明在代码注释中。

由于您还没有共享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元素的样式。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70304542

复制

相似问题

问不能在全屏幕画布上覆盖div用于统一WebGL构建
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不能在全屏幕画布上覆盖div用于统一WebGL构建EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不能在全屏幕画布上覆盖div用于统一WebGL构建
EN