index.html 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. <!DOCTYPE html>
  2. <html lang="en-us">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <title>洪湖分蓄洪区工程管理局</title>
  7. <link rel="shortcut icon" href="TemplateData/favicon.ico">
  8. <link rel="stylesheet" href="TemplateData/style.css">
  9. <style>
  10. html,body {
  11. width: 100%;height: 100%;overflow: hidden;
  12. }
  13. /* body {
  14. transform: translate(-50%, -50%);
  15. left: 50%;
  16. top: 50%;
  17. position: absolute;
  18. } */
  19. #unity-canvas { width: 100% !important; height: 100% !important }
  20. #unity-container.unity-desktop {
  21. position: absolute;
  22. width: 100%;
  23. height: 100%;
  24. }
  25. </style>
  26. </head>
  27. <script>
  28. const autoSize = () => {
  29. const width = window.innerWidth
  30. const height = window.innerHeight
  31. const aspc = 16 / 9
  32. const dom = document.querySelector('#unity-container')
  33. if (width / height > aspc) {
  34. dom.style.height = height + 'px'
  35. dom.style.width = aspc * height + 'px'
  36. } else {
  37. dom.style.width = width + 'px'
  38. dom.style.height = width / aspc + 'px'
  39. }
  40. }
  41. window.addEventListener('resize', autoSize)
  42. window.addEventListener('load', autoSize)
  43. </script>
  44. <body>
  45. <div id="unity-container" class="unity-desktop">
  46. <canvas id="unity-canvas" ></canvas>
  47. <div id="unity-loading-bar">
  48. <div id="unity-progress-info">
  49. <span id="loading-text">首次加载,初始化资料中...</span>
  50. <span id="progress-percentage">0%</span>
  51. </div>
  52. <div id="unity-progress-bar-empty">
  53. <div id="unity-progress-bar-full"></div>
  54. </div>
  55. </div>
  56. <div id="unity-warning"> </div>
  57. </div>
  58. <script>
  59. var container = document.querySelector("#unity-container");
  60. var canvas = document.querySelector("#unity-canvas");
  61. var loadingBar = document.querySelector("#unity-loading-bar");
  62. var progressBarFull = document.querySelector("#unity-progress-bar-full");
  63. var fullscreenButton = document.querySelector("#unity-fullscreen-button");
  64. var warningBanner = document.querySelector("#unity-warning");
  65. // Shows a temporary message banner/ribbon for a few seconds, or
  66. // a permanent error message on top of the canvas if type=='error'.
  67. // If type=='warning', a yellow highlight color is used.
  68. // Modify or remove this function to customize the visually presented
  69. // way that non-critical warnings and error messages are presented to the
  70. // user.
  71. function unityShowBanner(msg, type) {
  72. function updateBannerVisibility() {
  73. warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
  74. }
  75. var div = document.createElement('div');
  76. div.innerHTML = msg;
  77. warningBanner.appendChild(div);
  78. if (type == 'error') div.style = 'background: red; padding: 10px;';
  79. else {
  80. if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
  81. setTimeout(function () {
  82. warningBanner.removeChild(div);
  83. updateBannerVisibility();
  84. }, 5000);
  85. }
  86. updateBannerVisibility();
  87. }
  88. var buildUrl = "Build";
  89. var loaderUrl = buildUrl + "/{{{ LOADER_FILENAME }}}";
  90. var hlsUrl="TemplateData"+"/hls.min.js";
  91. var config = {
  92. dataUrl: buildUrl + "/{{{ DATA_FILENAME }}}",
  93. frameworkUrl: buildUrl + "/{{{ FRAMEWORK_FILENAME }}}",
  94. #if USE_WASM
  95. codeUrl: buildUrl + "/{{{ CODE_FILENAME }}}",
  96. #endif
  97. #if MEMORY_FILENAME
  98. memoryUrl: buildUrl + "/{{{ MEMORY_FILENAME }}}",
  99. #endif
  100. #if SYMBOLS_FILENAME
  101. symbolsUrl: buildUrl + "/{{{ SYMBOLS_FILENAME }}}",
  102. #endif
  103. streamingAssetsUrl: "StreamingAssets",
  104. companyName: {{{ JSON.stringify(COMPANY_NAME) }}},
  105. productName: {{{ JSON.stringify(PRODUCT_NAME) }}},
  106. productVersion: {{{ JSON.stringify(PRODUCT_VERSION) }}},
  107. showBanner: unityShowBanner,
  108. };
  109. // By default Unity keeps WebGL canvas render target size matched with
  110. // the DOM size of the canvas element (scaled by window.devicePixelRatio)
  111. // Set this to false if you want to decouple this synchronization from
  112. // happening inside the engine, and you would instead like to size up
  113. // the canvas DOM size and WebGL render target sizes yourself.
  114. // config.matchWebGLToCanvasSize = false;
  115. if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
  116. // Mobile device style: fill the whole browser client area with the game canvas:
  117. var meta = document.createElement('meta');
  118. meta.name = 'viewport';
  119. meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
  120. document.getElementsByTagName('head')[0].appendChild(meta);
  121. container.className = "unity-mobile";
  122. canvas.className = "unity-mobile";
  123. // To lower canvas resolution on mobile devices to gain some
  124. // performance, uncomment the following line:
  125. // config.devicePixelRatio = 1;
  126. unityShowBanner('WebGL builds are not supported on mobile devices.');
  127. } else {
  128. // Desktop style: Render the game canvas in a window that can be maximized to fullscreen:
  129. canvas.style.width = "1920px";
  130. canvas.style.height = "1080px";
  131. }
  132. loadingBar.style.display = "block";
  133. var script = document.createElement("script");
  134. script.src = loaderUrl;
  135. script.onload = () => {
  136. createUnityInstance(canvas, config, (progress) => {
  137. progressBarFull.style.width = 100 * progress + "%";
  138. var percentage = Math.floor(100 * progress); // 计算百分比并取整
  139. document.getElementById('progress-percentage').textContent = percentage + '%'; // 更新百分比显示
  140. }).then((unityInstance) => {
  141. loadingBar.style.display = "none";
  142. // 其他代码...
  143. }).catch((message) => {
  144. alert(message);
  145. });
  146. };
  147. document.body.appendChild(script);
  148. var script1 = document.createElement("script");
  149. script1.src = hlsUrl;
  150. script1.onload = () => { };
  151. document.body.appendChild(script1);
  152. </script>
  153. </body>
  154. </html>