툴/유니티

Webgl 웹브라우저 화면맞춤, 데스크탑용

스튜디오 오버그래픽스 2021. 9. 1. 05:29 
<!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 | E2festaURP_Sample</title>

    <style>
  body {
    padding: 0;
    margin: 0;
  }
  #unity-container {
    position: absolute;
  }

  #unity-canvas {
    background: #231f20;
  }
    </style>



  </head>
  <body style="text-align: center">
    

    <div
    id="unity-container"
    style="width: 100%; height: 100%"
    >
    <canvas id="unity-canvas"></canvas>
  </div>

  <script>
    var canvas = document.querySelector("#unity-canvas");
    canvas.style.width = "100%";
    canvas.style.height = "100%";
  </script>


    <script src="Build/E2FestaURP_Sample.loader.js"></script>
    <script>
      createUnityInstance(document.querySelector("#unity-canvas"), {
        dataUrl: "Build/E2FestaURP_Sample.data.unityweb",
        frameworkUrl: "Build/E2FestaURP_Sample.framework.js.unityweb",
        codeUrl: "Build/E2FestaURP_Sample.wasm.unityweb",
        streamingAssetsUrl: "StreamingAssets",
        companyName: "DefaultCompany",
        productName: "E2festaURP_Sample",
        productVersion: "0.1",
        // matchWebGLToCanvasSize: false, // Uncomment this to separately control WebGL canvas render size and DOM element size.
        // devicePixelRatio: 1, // Uncomment this to override low DPI rendering on high DPI displays.
      });
    </script>
  </body>
</html>

코드 예시