Hugging Face's logo

Spaces:
awacke1
/
Retro-to-3D
Running

App Files Community
kuri-pl commited on
Commit
d983c77
·
1 Parent(s): cccfdc8

Add Unity WebGL build files

Browse files
Files changed (2) hide show
  1. Build/Retro-to-3D.data +1 -1
  2. index.html +78 -26
Build/Retro-to-3D.data CHANGED
@@ -1,3 +1,3 @@
1
  version https://git-lfs.github.com/spec/v1
2
- oid sha256:b7ea037b6661243d4cb42847c7b3b5ff6d06830e68032d192908778a151e3da3
3
  size 14626199
 
1
  version https://git-lfs.github.com/spec/v1
2
+ oid sha256:121e026497600f914eb1953e23384b5de42f6f184f3e710e212cd5850c74369c
3
  size 14626199
index.html CHANGED
@@ -3,38 +3,90 @@
3
  <head>
4
  <meta charset="utf-8">
5
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6
- <title>Unity WebGL Player | Pj - 2D-to-3D</title>
 
 
 
7
  </head>
8
- <body style="text-align: center; padding: 0; border: 0; margin: 0;">
9
- <canvas id="unity-canvas" width=960 height=600 tabindex="-1" style="width: 960px; height: 600px; background: #231F20"></canvas>
10
- <script src="Build/Retro-to-3D.loader.js"></script>
 
 
 
 
 
 
 
 
 
 
 
11
  <script>
12
- if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
13
- // Mobile device style: fill the whole browser client area with the game canvas:
14
- var meta = document.createElement('meta');
15
- meta.name = 'viewport';
16
- meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
17
- document.getElementsByTagName('head')[0].appendChild(meta);
18
-
19
- var canvas = document.querySelector("#unity-canvas");
20
- canvas.style.width = "100%";
21
- canvas.style.height = "100%";
22
- canvas.style.position = "fixed";
23
-
24
- document.body.style.textAlign = "left";
25
- }
26
-
27
- createUnityInstance(document.querySelector("#unity-canvas"), {
28
- dataUrl: "Build/Retro-to-3D.data",
29
- frameworkUrl: "Build/Retro-to-3D.framework.js",
30
- codeUrl: "Build/Retro-to-3D.wasm",
31
  streamingAssetsUrl: "StreamingAssets",
32
  companyName: "ilumine AI",
33
  productName: "Pj - 2D-to-3D",
34
  productVersion: "0.1.3",
35
- // matchWebGLToCanvasSize: false, // Uncomment this to separately control WebGL canvas render size and DOM element size.
36
- // devicePixelRatio: 1, // Uncomment this to override low DPI rendering on high DPI displays.
37
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
38
  </script>
39
  </body>
40
  </html>
 
3
  <head>
4
  <meta charset="utf-8">
5
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
7
+ <title>Pj - 2D-to-3D</title>
8
+ <link rel="shortcut icon" href="TemplateData/favicon.ico">
9
+ <link rel="stylesheet" href="TemplateData/style.css">
10
  </head>
11
+ <body class="dark">
12
+ <div id="unity-container" class="unity-desktop">
13
+ <canvas id="unity-canvas"></canvas>
14
+ </div>
15
+ <div id="loading-cover" style="display:none;">
16
+ <div id="unity-loading-bar">
17
+ <div id="unity-logo"><img src="logo.png"></div>
18
+ <div id="unity-progress-bar-empty" style="display: none;">
19
+ <div id="unity-progress-bar-full"></div>
20
+ </div>
21
+ <div class="spinner"></div>
22
+ </div>
23
+ </div>
24
+ <div id="unity-fullscreen-button" style="display: none;"></div>
25
  <script>
26
+ const hideFullScreenButton = "";
27
+ const buildUrl = "Build";
28
+ const loaderUrl = buildUrl + "/Retro-to-3D.loader.js";
29
+ const config = {
30
+ dataUrl: buildUrl + "/Retro-to-3D.data",
31
+ frameworkUrl: buildUrl + "/Retro-to-3D.framework.js",
32
+ codeUrl: buildUrl + "/Retro-to-3D.wasm",
 
 
 
 
 
 
 
 
 
 
 
 
33
  streamingAssetsUrl: "StreamingAssets",
34
  companyName: "ilumine AI",
35
  productName: "Pj - 2D-to-3D",
36
  productVersion: "0.1.3",
37
+ };
38
+
39
+ const container = document.querySelector("#unity-container");
40
+ const canvas = document.querySelector("#unity-canvas");
41
+ const loadingCover = document.querySelector("#loading-cover");
42
+ const progressBarEmpty = document.querySelector("#unity-progress-bar-empty");
43
+ const progressBarFull = document.querySelector("#unity-progress-bar-full");
44
+ const fullscreenButton = document.querySelector("#unity-fullscreen-button");
45
+ const spinner = document.querySelector('.spinner');
46
+
47
+ const canFullscreen = (function() {
48
+ for (const key of [
49
+ 'exitFullscreen',
50
+ 'webkitExitFullscreen',
51
+ 'webkitCancelFullScreen',
52
+ 'mozCancelFullScreen',
53
+ 'msExitFullscreen',
54
+ ]) {
55
+ if (key in document) {
56
+ return true;
57
+ }
58
+ }
59
+ return false;
60
+ }());
61
+
62
+ if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
63
+ container.className = "unity-mobile";
64
+ config.devicePixelRatio = 1;
65
+ }
66
+ loadingCover.style.display = "";
67
+
68
+ const script = document.createElement("script");
69
+ script.src = loaderUrl;
70
+ script.onload = () => {
71
+ createUnityInstance(canvas, config, (progress) => {
72
+ spinner.style.display = "none";
73
+ progressBarEmpty.style.display = "";
74
+ progressBarFull.style.width = `${100 * progress}%`;
75
+ }).then((unityInstance) => {
76
+ loadingCover.style.display = "none";
77
+ if (canFullscreen) {
78
+ if (!hideFullScreenButton) {
79
+ fullscreenButton.style.display = "";
80
+ }
81
+ fullscreenButton.onclick = () => {
82
+ unityInstance.SetFullscreen(1);
83
+ };
84
+ }
85
+ }).catch((message) => {
86
+ alert(message);
87
+ });
88
+ };
89
+ document.body.appendChild(script);
90
  </script>
91
  </body>
92
  </html>