Spaces:
Sleeping
Sleeping
File size: 4,819 Bytes
642bcfd 4fbb921 8194362 4fbb921 1428da8 4fbb921 fca8857 4fbb921 cfc0b10 4fbb921 66d6718 3c05e2a 8194362 3c05e2a 8194362 3c05e2a 66d6718 3c05e2a 4fbb921 de3fbc8 5844909 4fbb921 c2219b2 ae61321 cfc0b10 4fbb921 cfc0b10 c2219b2 33be52b d013b0b cfc0b10 ae61321 5844909 cfc0b10 c2219b2 5844909 c2219b2 cfc0b10 ae61321 5844909 cfc0b10 4fbb921 ae61321 5844909 1b594ae de3fbc8 1b594ae 4fbb921 33be52b ae61321 c2219b2 ae61321 1428da8 aa14f68 64133b6 d013b0b aa14f68 ae61321 5cf5257 de3fbc8 4fbb921 8194362 4fbb921 33be52b 64133b6 de3fbc8 33be52b 8a63400 64133b6 d013b0b aa14f68 64133b6 4fbb921 cfc0b10 de3fbc8 fca8857 de3fbc8 b31d426 cfc0b10 5844909 c2219b2 1428da8 c2219b2 8194362 642bcfd | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 | <!DOCTYPE html>
<html lang="en">
<head>
<title>Interstellar - Interactive wormhole & black hole</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
body {
background:#000;
color: #eee;
text-shadow: 0 1px 0 #000;
padding:0;
margin:0;
font-weight:bold;
overflow: hidden;
height: 120vh;
font-family: Monospace;
font-size: 12px;
}
#webgl-error {
display: none;
text-align: center;
position: fixed;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 1;
}
#webgl-error a {
color: orange
}
#info, #resolution, #version {
-webkit-transition: -webkit-transform 0.2s ease;
transition: transform 0.2s ease;
}
#info {
position: fixed;
top: 0;
width: 100%;
padding: 5px;
text-align: center;
z-index: 10;
}
.no-pointer-events {
pointer-events: none;
}
.no-ui #info {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
#resolution {
position: fixed;
bottom: 0;
right: 0;
padding: 5px;
z-index: 10;
}
.no-ui #resolution {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#resolution > label {
display: block;
}
.ui-toggle {
position: fixed;
bottom: 5px;
left: 5px;
z-index: 10;
transition: opacity 0.2s ease;
}
.ui-toggle input, .ui-toggle label {
cursor: pointer;
}
.no-ui .ui-toggle:hover {
opacity: 1;
}
.no-ui .ui-toggle {
opacity: 0;
}
h3 {
margin: 0;
font-size: 1em;
}
a {
color: #0080ff;
}
kbd, #teleport { color: orange }
#container {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#loading {
text-align: center;
position: fixed;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.no-ui #loading { display: none; }
button {
color: orange;
font: inherit;
text-shadow: inherit;
border: 1px solid;
background: rgba(0,0,0,0.5);
line-height: 1.5;
}
#keyboard-controls { display: block; }
#mobile-device-controls { display: none; }
.mobile-device #keyboard-controls { display: none; }
.mobile-device #mobile-device-controls { display: block; }
#permit-motion-controls {
display: none;
}
.no-motion-controls #permit-motion-controls {
display: inline-block;
}
.no-motion-controls .motion-description {
display: none;
}
canvas { display: block; }
#version {
position: fixed;
font-size: 0.9em;
top: 5px;
right: 0;
padding-right: 5px;
z-index: 100;
}
.no-ui #version {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
</style>
</head>
<body>
<div id="webgl-error">
Your graphics card does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">WebGL</a><br>
Find out how to get it <a href="http://get.webgl.org/">here</a>
</div>
<div id="info">
<h3 class="no-pointer-events">Controls:</h3>
<div id="keyboard-controls" class="no-pointer-events">
<kbd>WASD</kbd> move,
<kbd>R|F</kbd> up | down,
<kbd>Q|E</kbd> roll,
<kbd>up|down</kbd> pitch,
<kbd>left|right</kbd> yaw
<kbd>shift</kbd> speed up<br>
<kbd>space/esc</kbd> toggle mouse controls<br>
<kbd>T</kbd> Teleport to next object<br>
Scroll to increase/decrease your field of view.
</div>
<div id="mobile-device-controls">
<div class="no-pointer-events">
<span class="motion-description">Point your device around you to look around.</span>
Touch the screen to move forwards. Use two fingers to go faster.
</div>
<button id="permit-motion-controls">Click here to enable looking around</button>
<button id="teleport">Teleport to next object</button>
</div>
</div>
<div id="resolution">
<h3>Resolution</h3>
<label><input type="radio" name="resolution" value="4"> low</label>
<label><input type="radio" name="resolution" value="2"> medium</label>
<label><input type="radio" name="resolution" value="1"> high</label>
</div>
<div id="version">
<a target="_blank" href="https://github.com/sirxemic/Interstellar">version 2.0.1</a>
</div>
<div class="ui-toggle">
<label><input type="checkbox"> Hide UI</label>
</div>
<div id="container"></div>
<div id="loading">Loading...</div>
<script src="dist/build.js"></script>
</body>
</html>
|