negitamago
1/17/2019 - 3:00 AM

WebGL テンプレート用の index.html のサンプル。クリックしてからWebGLプレイヤーを読み込む　http://negi-lab.blog.jp/EmbedWebGLAndLoadOnClick

WebGL テンプレート用の index.html のサンプル。クリックしてからWebGLプレイヤーを読み込む　http://negi-lab.blog.jp/EmbedWebGLAndLoadOnClick

index.html
content_copyfile_download
<!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 | %UNITY_WEB_NAME%</title>

    <link rel="shortcut icon" href="TemplateData/favicon.ico">
    <link rel="stylesheet" href="TemplateData/style.css">
    <script src="TemplateData/UnityProgress.js"></script>

    <!-- jQuery使用 -->
    <script src="TemplateData/jquery-3.3.1.min.js"></script>

    <script src="%UNITY_WEBGL_LOADER_URL%"></script>

    <script>
        // WebGLファイルのインスタンス作成（ダウンロード）処理
        var gameInstance;
	function LoadWebGL() {
            $(".fullscreen").show();
            gameInstance = UnityLoader.instantiate("gameContainer", "%UNITY_WEBGL_BUILD_URL%", {
            onProgress: UnityProgress
            });
        }
    </script>

  </head>
  <body>
    <div class="webgl-content">
      <div id="gameContainer" style="width: 640px; height: 360px">
        <!-- クリックで関数 LoadWebGL() の実行。-->
        <input type=image onclick="LoadWebGL();" src="TemplateData/ClickToPlay_640x360.png">
      </div>
      <div class="footer">
        <div class="webgl-logo"></div>
        <div class="fullscreen" style="display: none;" onclick="gameInstance.SetFullscreen(1)"></div>
        <div class="title">%UNITY_WEB_NAME%</div>
      </div>
    </div>
  </body>
</html>