UnityWebGl网页全屏显示

最新推荐文章于 2024-05-14 14:46:20 发布

young.man

最新推荐文章于 2024-05-14 14:46:20 发布

阅读量580

点赞数 11

文章标签： unity webgl

本文链接：https://blog.csdn.net/Phillis__/article/details/136138542

版权

2019及以下版本：

修改index.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 | Project Name</title>
  <link rel="shortcut icon" href="TemplateData/favicon.ico">
  <link rel="stylesheet" href="TemplateData/style.css">
  <script src="TemplateData/UnityProgress.js"></script>
  <script src="Build/UnityLoader.js"></script>
  <script>
    UnityLoader.instantiate("unityContainer", "Build/Temp.json");
    function ChangeCanvas(){
      document.getElementById("unityContainer").style.width = window.innerWidth + "px";
      document.getElementById("unityContainer").style.height = window.innerHeight + "px";
      document.getElementById("#canvas").style.width = window.innerWidth + "px";
      document.getElementById("#canvas").style.height = window.innerHeight + "px";
    }
  </script>
</head>

<body onload="ChangeCanvas()" onresize="ChangeCanvas()">
  <div class="webgl-content">
    <div id="unityContainer" style="width:100%; height:100%; overflow:hidden;"></div>
  </div>
</body>

</html>

2020及以上版本：

修改index.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 | Panorama</title>
  <link rel="shortcut icon" href="TemplateData/favicon.ico">
  <link rel="stylesheet" href="TemplateData/style.css">
</head>
<body onload="Reset()" onresize="Reset()">
  <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-mobile-warning">
      WebGL builds are not supported on mobile devices.
    </div>
  </div>
  <script>

    function Reset(){
      var canvas = document.getElementById("#canvas");
      canvas.height = document.body.clientHeight;
      canvas.width = document.body.clientWidth;
    }
    function Reset(){
      var canvas = document.getElementById("#canvas");
      canvas.height = document.documentElement.clientHeight;
      canvas.width = document.documentElement.clientWidth;
    }

    //这部分内容不要盲目替换
    var buildUrl = "Build";
    var loaderUrl = buildUrl + "/Test.loader.js";
    var config = {
      dataUrl: buildUrl + "/Test.data",
      frameworkUrl: buildUrl + "/Test.framework.js",
      codeUrl: buildUrl + "/Test.wasm",
      streamingAssetsUrl: "StreamingAssets",
      companyName: "DefaultCompany",
      productName: "Test project",
      productVersion: "0.1",
    };

    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 mobileWarning = document.querySelector("#unity-mobile-warning");

    // 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";
      config.devicePixelRatio = 1;
    } else {
      container.className = "unity-mobile";
      config.devicePixelRatio = 1;
    }

    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) => {

      });
    };
    document.body.appendChild(script);
  </script>
</body>

</html>

创建style.css文件，内容如下：

body {
    padding: 0;
    margin: 0
}

#unity-container {
    position: absolute
}

#unity-container.unity-desktop {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

#unity-container.unity-mobile {
    width: 100%;
    height: 100%
}

#unity-canvas {
    background: #231F20
}

.unity-mobile #unity-canvas {
    width: 100%;
    height: 100%
}

#unity-loading-bar {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none
}

#unity-logo {
    width: 154px;
    height: 130px;
    background: url('unity-logo-dark.png') no-repeat center
}

#unity-progress-bar-empty {
    width: 141px;
    height: 18px;
    margin-top: 10px;
    background: url('progress-bar-empty-dark.png') no-repeat center
}

#unity-progress-bar-full {
    width: 0%;
    height: 18px;
    margin-top: 10px;
    background: url('progress-bar-full-dark.png') no-repeat center
}

#unity-footer {
    position: relative
}

.unity-mobile #unity-footer {
    display: none
}

#unity-webgl-logo {
    float: left;
    width: 204px;
    height: 38px;
    background: url('webgl-logo.png') no-repeat center
}

#unity-build-title {
    float: right;
    margin-right: 10px;
    line-height: 38px;
    font-family: arial;
    font-size: 18px
}

#unity-fullscreen-button {
    float: right;
    width: 38px;
    height: 38px;
    background: url('fullscreen-button.png') no-repeat center
}

#unity-mobile-warning {
    position: absolute;
    left: 50%;
    top: 5%;
    transform: translate(-50%);
    background: white;
    padding: 10px;
    display: none
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.webgl-content {
    width: 100%;
    height: 100%;
}

.unityContainer {
    width: 100%;
    height: 100%;
}