Add code editor for scene. Add dynamic scene parser and transpiler. A…

…dd loader. Add PoC moveable camera
stasilo · May 11, 2019 · 94c2e4b · 94c2e4b
1 parent 7ed1a02
commit 94c2e4b
Show file tree

Hide file tree

Showing 36 changed files with 1,268 additions and 463 deletions.
diff --git a/index.html b/index.html
@@ -3,10 +3,113 @@
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
+        <style>
+            * {
+              box-sizing: border-box;
+            }
+
+            html, body {
+                height: 100vh;
+                width: 100vw;
+
+                margin: 0;
+                padding: 0;
+            }
+
+            body {
+                position: relative;
+                background-color: white;
+
+                font-size: 14px;
+                font-family: 'Roboto', sans-serif;
+                text-align: center;
+                font-weight: lighter;
+            }
+
+            canvas#gl-canvas {
+                position: absolute;
+
+                top: 50%;
+                left: 50%;
+                transform: translate3d(-50%, -50%, 0) scale(2);
+            }
+
+            .loader {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100vw;
+                height: 100vh;
+                background-color: black;
+
+                z-index: 3;
+            }
+
+            .loader__inner {
+                position: absolute;
+                overflow: hidden;
+
+                top: calc(50% - 15px);
+                left: calc(50% - 15px);
+
+                width: 30px;
+                height: 30px;
+
+                border: 3px solid white;
+                animation: spin 3s ease infinite;
+            }
+
+            .loader__inner::before {
+              content: '';
+              position: absolute;
+              top: -3px;
+              left: -3px;
+
+              width: 30px;
+              height: 30px;
+
+              background-color: white;
+              transform-origin: center bottom;
+              transform: scaleY(1);
+              animation: fill 3s linear infinite;
+            }
+
+            .version {
+                position: absolute;
+                bottom: 15px;
+                left: 15px;
+
+                z-index: 4;
+
+                color: white;
+                font-size: 12px;
+                opacity: 0.5;
+            }
+
+            @keyframes spin {
+                50%,
+                100% {
+                    transform: rotate(360deg);
+                }
+            }
+
+            @keyframes fill {
+                25%,
+                50% {
+                    transform: scaleY(0);
+                }
+                100% {
+                    transform: scaleY(1);
+                }
+            }
+        </style>
         <title>retrace.gl</title>
     </head>
     <body>
         <div id="react-root"></div>
-        <span id="plug">retrace.gl v.0.0.1-alpha</span>
+        <div class="loader">
+            <div class="loader__inner"></div>
+        </div>
+        <span class="version">retrace.gl v.0.0.1-alpha</span>
     </body>
 </html>