多多少少在unity官网webgl模板看到了Template自定义介绍，今天分享一个超级实用的
添加自定义的模板有两种方式：
1.在你-----unity安装位置\Editor\Data\PlaybackEngines\WebGLSupport\BuildTools\WebGLTemplates
在这目录下创建自定义模板
2.直接在unity的 Assets下创建WebGLTemplates文件夹 再到里面创建自己的文件（必须这个文件夹下名字不能打错）
然后playersettings->Resolution and presentation->webgl Template 就可以看到你自定义的模板了
在这文件下创建一个index.html文件和一张你需要的logo图片
直接看h5代码：
unity自带的：
<!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> <script src="%UNITY_WEBGL_LOADER_URL%"></script> <script> var gameInstance = UnityLoader.instantiate("gameContainer", "%UNITY_WEBGL_BUILD_URL%", {onProgress: UnityProgress}); </script> </head> <body> <div class="webgl-content"> <div id="gameContainer" style="width: %UNITY_WIDTH%px; height: %UNITY_HEIGHT%px"></div> <div class="footer"> <div class="webgl-logo"></div> <div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div> <div class="title">%UNITY_WEB_NAME%</div> </div> </div> </body> </html>自定的：
<!DOCTYPE html> <html lang="en-us"> <head> <meta charset="utf-8"> <title>%UNITY_WEB_NAME%</title> <style> html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { margin: 0; background: #444; } #gameContainer { width: 100vw; height: 100vh; } canvas { width: 100%; height: 100%; display: block; } .logo { display: block; width: max-width: 80vw; height: max-height: 60vh; } .progress { margin: 1.5em; border: 1px solid white; width: 50vw; display: none; } .progress .full { margin: 2px; background: white; height: 1em; transform-origin: top left; } #loader { position: absolute; left: 0; top: 0; width: 100vw; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; } .spinner, .spinner:after { border-radius: 50%; width: 5em; height: 5em; } .spinner { margin: 10px; font-size: 10px; position: relative; text-indent: -9999em; border-top: 1.1em solid rgba(255, 255, 255, 0.2); border-right: 1.1em solid rgba(255, 255, 255, 0.2); border-bottom: 1.1em solid rgba(255, 255, 255, 0.2); border-left: 1.1em solid #ffffff; transform: translateZ(0); animation: spinner-spin 1.1s infinite linear; } @keyframes spinner-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> </head> <body> <div id="gameContainer"></div> <div id="loader"> <img class="logo" src="logo.png"> <div class="spinner"></div> <div class="progress"><div class="full"></div></div> </div> </body> <script src="%UNITY_WEBGL_LOADER_URL%"></script> <script> var gameInstance = UnityLoader.instantiate("gameContainer", "%UNITY_WEBGL_BUILD_URL%", {onProgress: UnityProgress}); function UnityProgress(gameInstance, progress) { if (!gameInstance.Module) { return; } const loader = document.querySelector("#loader"); if (!gameInstance.progress) { const progress = document.querySelector("#loader .progress"); progress.style.display = "block"; gameInstance.progress = progress.querySelector(".full"); loader.querySelector(".spinner").style.display = "none"; } gameInstance.progress.style.transform = `scaleX(${progress})`; if (progress === 1 && !gameInstance.removeTimeout) { gameInstance.removeTimeout = setTimeout(function() { loader.style.display = "none"; }, 2000); } } </script> </html>看效果：
对应默认模板里的h5代码来修改的， 对比可看出我还自适应屏幕了，好了拿去试试吧
％UNITY_WEB_NAME％ - 在unity设置下定义的产品名称％UNITY_HEIGHT％ - 来自WebGL分辨率和unity设置中的演示的高度％UNITY_WIDTH％ - 来自WebGL分辨率和unity设置中的演示文稿的宽度％UNITY_WEBGL_LOADER_GLUE％ - 加载构建的代码，通常在正文结束标记之前。