forked from pazdera/matrix-vr
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
64 lines (64 loc) · 11.6 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0, viewport-fit=cover">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Inside the Matrix VR</title>
<link rel="stylesheet" href="/assets/fonts/plex/plex.css">
<link rel="stylesheet" href="/assets/fonts/ss-pro/ss-pro.css">
<link rel="stylesheet" href="/assets/index.css">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-47250922-4', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<canvas class="fade" id="canvas"></canvas>
<button class="toggle-vr">
<svg class="headset" viewBox="0 0 385 230" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="currentcolor">
<path d="M265.253901,230 C255.88825,228.652069 249.110473,225.513139 240.549202,211.583073 C230.587092,195.373699 217.913704,150.712399 192.554743,150.639683 C167.195783,150.566966 150.365282,196.868603 142.463044,211.583073 C137.217473,221.350661 129.581311,227.489637 119.55456,230 L32,230 C14.326888,230 2.164332e-15,215.673112 0,198 L0,32 L0,32 C-2.164332e-15,14.326888 14.326888,3.24649801e-15 32,0 L32,0 L353,0 C370.673112,-3.46402514e-14 385,14.326888 385,32 L385,198 L385,198 C385,215.673112 370.673112,230 353,230 L265.253901,230 Z M104,149 C128.852814,149 149,128.852814 149,104 C149,79.1471863 128.852814,59 104,59 C79.1471863,59 59,79.1471863 59,104 C59,128.852814 79.1471863,149 104,149 Z M280,149 C304.852814,149 325,128.852814 325,104 C325,79.1471863 304.852814,59 280,59 C255.147186,59 235,79.1471863 235,104 C235,128.852814 255.147186,149 280,149 Z" fill="#ffffff"></path>
</svg>
</button>
<div class="overlay">
<div class="menu">
<a href="https://github.com/pazdera/matrix-vr#credits">Credits</a>
<a href="https://github.com/pazdera/matrix-vr" class="icon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentcolor">
<path d="M12,2C6.48,2,2,6.59,2,12.25c0,4.53,2.87,8.37,6.84,9.73c0.5,0.09,0.68-0.22,0.68-0.49c0-0.24-0.01-0.89-0.01-1.74c-2.78,0.62-3.37-1.37-3.37-1.37c-0.45-1.18-1.11-1.5-1.11-1.5c-0.91-0.64,0.07-0.62,0.07-0.62c1,0.07,1.53,1.06,1.53,1.06c0.89,1.57,2.34,1.11,2.91,0.85c0.09-0.66,0.35-1.11,0.63-1.37c-2.22-0.26-4.56-1.14-4.56-5.07c0-1.12,0.39-2.03,1.03-2.75c-0.1-0.26-0.45-1.3,0.1-2.71c0,0,0.84-0.28,2.75,1.05c0.8-0.23,1.65-0.34,2.5-0.34c0.85,0,1.7,0.12,2.5,0.34c1.91-1.33,2.75-1.05,2.75-1.05c0.55,1.41,0.2,2.45,0.1,2.71c0.64,0.72,1.03,1.63,1.03,2.75c0,3.94-2.34,4.81-4.57,5.06c0.36,0.32,0.68,0.94,0.68,1.9c0,1.37-0.01,2.48-0.01,2.81c0,0.27,0.18,0.59,0.69,0.49c3.97-1.36,6.83-5.2,6.83-9.73C22,6.59,17.52,2,12,2"></path>
</svg>
</a>
</div>
<h1>Inside the Matrix <!--<span class="highlight">VR</span>--></h1>
<div class="loading">
<div class="label">Loading...</div>
<div class="bar">
<div class="gauge" id="progress-bar"></div>
</div>
</div>
<div class="tagline fade">A <a class="highlight" href="https://webvr.info/">WebVR</a> experiment by <a class="plain" href="https://twitter.com/radekpazdera/">Radek Pazdera</a></div>
<div class="buttons fade">
<button class="vr" id="start">
<div class="tooltip">
Your browser doesn't support VR, but you can still try the demo in 360 mode.
</div>
<svg class="headset" viewBox="0 0 385 230" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="currentcolor">
<path class="headset-color" d="M265.253901,230 C255.88825,228.652069 249.110473,225.513139 240.549202,211.583073 C230.587092,195.373699 217.913704,150.712399 192.554743,150.639683 C167.195783,150.566966 150.365282,196.868603 142.463044,211.583073 C137.217473,221.350661 129.581311,227.489637 119.55456,230 L32,230 C14.326888,230 2.164332e-15,215.673112 0,198 L0,32 L0,32 C-2.164332e-15,14.326888 14.326888,3.24649801e-15 32,0 L32,0 L353,0 C370.673112,-3.46402514e-14 385,14.326888 385,32 L385,198 L385,198 C385,215.673112 370.673112,230 353,230 L265.253901,230 Z M104,149 C128.852814,149 149,128.852814 149,104 C149,79.1471863 128.852814,59 104,59 C79.1471863,59 59,79.1471863 59,104 C59,128.852814 79.1471863,149 104,149 Z M280,149 C304.852814,149 325,128.852814 325,104 C325,79.1471863 304.852814,59 280,59 C255.147186,59 235,79.1471863 235,104 C235,128.852814 255.147186,149 280,149 Z" fill="#000000"></path>
</svg>
<div>ENTER VR</div>
</button>
<button class="button-360 hidden">
<svg class="icon-360" width="352px" height="181px" viewBox="0 0 352 181" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path class="icon-360-fill" d="M73,37.5714579 L73,48.0962008 C44.6437827,56.7495512 27,68.9075676 27,82.3723259 C27,106.547461 83.8764394,126.510187 157.512289,129.539432 L158.28745,107.341725 L195.988121,145.230381 L155.736308,180.396876 L156.463723,159.566442 C68.4554098,155.833882 0,127.180117 0,92.3859809 C0,69.8271082 28.7760015,49.8494097 73,37.5714579 Z M279,37.5714579 C323.223998,49.8494097 352,69.8271082 352,92.3859809 C352,125.922552 288.403536,153.754593 205,159.064945 L205,129.10995 C274.461185,124.951191 327,105.607335 327,82.3723259 C327,68.5937546 308.524213,56.1835454 279,47.4969082 L279,37.5714579 Z M112.8,79.3081475 C106.559969,79.3081475 101.360021,78.2667378 97.2,76.1838871 C93.0399792,74.1010365 89.6000136,71.5375664 86.88,68.4934001 L93.48,59.6012745 C95.8000116,61.924454 98.4399852,63.9071379 101.4,65.5493855 C104.360015,67.1916332 107.759981,68.0127447 111.6,68.0127447 C115.760021,68.0127447 119.139987,66.9913621 121.74,64.9485662 C124.340013,62.9057704 125.64,60.0819479 125.64,56.4770141 C125.64,54.4742731 125.280004,52.6718332 124.56,51.0696404 C123.839996,49.4674476 122.620009,48.1056042 120.9,46.9840692 C119.179991,45.8625342 116.880014,45.0013685 114,44.4005462 C111.119986,43.7997239 107.520022,43.4993173 103.2,43.4993173 L103.2,33.405553 C106.960019,33.405553 110.099987,33.1051464 112.62,32.5043241 C115.140013,31.9035018 117.179992,31.0623632 118.74,29.980883 C120.300008,28.8994029 121.419997,27.5976407 122.1,26.0755576 C122.780003,24.5534744 123.12,22.9112514 123.12,21.1488393 C123.12,17.9444537 122.12001,15.441065 120.12,13.6385981 C118.11999,11.8361312 115.360018,10.9349112 111.84,10.9349112 C108.799985,10.9349112 106.060012,11.5958059 103.62,12.9176149 C101.179988,14.239424 98.8000116,15.9817825 96.48,18.1447428 L89.4,9.61310878 C92.6800164,6.72916173 96.1799814,4.40601701 99.9,2.64360492 C103.620019,0.881192827 107.759977,-2.84217094e-14 112.32,-2.84217094e-14 C116.000018,-2.84217094e-14 119.359985,0.440596413 122.4,1.32180246 C125.440015,2.2030085 128.039989,3.50477063 130.2,5.2271279 C132.360011,6.94948517 134.039994,9.0723588 135.24,11.5958125 C136.440006,14.1192661 137.04,16.9831428 137.04,20.1875284 C137.04,24.513449 135.860012,28.1183288 133.5,31.0022758 C131.139988,33.8862229 127.880021,36.1292592 123.72,37.731452 L123.72,38.2121074 C128.280023,39.413752 132.059985,41.6167341 135.06,44.8211197 C138.060015,48.0255053 139.56,52.1510899 139.56,57.1979973 C139.56,60.7228214 138.860007,63.8470506 137.46,66.5707783 C136.059993,69.2945061 134.140012,71.5976237 131.7,73.4802003 C129.259988,75.3627768 126.420016,76.8047287 123.18,77.8060992 C119.939984,78.8074697 116.480018,79.3081475 112.8,79.3081475 Z M178.56,79.3081475 C174.799981,79.3081475 171.240017,78.5671444 167.88,77.0851161 C164.519983,75.6030877 161.580013,73.3400243 159.06,70.295858 C156.539987,67.2516917 154.540007,63.3664324 153.06,58.6399636 C151.579993,53.9134948 150.84,48.3459583 150.84,41.9371871 C150.84,34.4869905 151.679992,28.1183696 153.36,22.8311334 C155.040008,17.5438971 157.259986,13.2180414 160.02,9.8534365 C162.780014,6.48883161 165.959982,4.00547 169.56,2.4032772 C173.160018,0.801084388 176.91998,-2.84217094e-14 180.84,-2.84217094e-14 C185.480023,-2.84217094e-14 189.459983,0.841138607 192.78,2.52344106 C196.100017,4.2057435 198.919988,6.24850869 201.24,8.65179791 L193.8,17.0632681 C192.439993,15.3809656 190.660011,13.9990951 188.46,12.9176149 C186.259989,11.8361348 184.000012,11.2954028 181.68,11.2954028 C179.279988,11.2954028 177.020011,11.7760535 174.9,12.7373691 C172.779989,13.6986848 170.920008,15.2808265 169.32,17.4838416 C167.719992,19.6868567 166.420005,22.5907876 165.42,26.1957214 C164.419995,29.8006553 163.840001,34.2466736 163.68,39.5339099 C165.920011,36.7300725 168.539985,34.5270904 171.54,32.9248976 C174.540015,31.3227048 177.439986,30.5216204 180.24,30.5216204 C183.520016,30.5216204 186.539986,31.002271 189.3,31.9635867 C192.060014,32.9249024 194.41999,34.3868814 196.38,36.3495676 C198.34001,38.3122538 199.859995,40.7755883 200.94,43.739645 C202.020005,46.7037017 202.56,50.1884188 202.56,54.1939008 C202.56,58.0391635 201.920006,61.5038535 200.64,64.5880746 C199.359994,67.6722958 197.640011,70.2958472 195.48,72.4588075 C193.319989,74.6217678 190.780015,76.304045 187.86,77.5056896 C184.939985,78.7073342 181.840016,79.3081475 178.56,79.3081475 Z M178.32,68.7337278 C181.520016,68.7337278 184.219989,67.492047 186.42,65.0086482 C188.620011,62.5252493 189.72,58.9203696 189.72,54.1939008 C189.72,49.6276513 188.68001,46.2230426 186.6,43.9799727 C184.51999,41.7369028 181.560019,40.6153846 177.72,40.6153846 C175.559989,40.6153846 173.280012,41.2762792 170.88,42.5980883 C168.479988,43.9198974 166.200011,46.1829608 164.04,49.3873464 C164.760004,56.1966658 166.379987,61.1233348 168.9,64.1675011 C171.420013,67.2116675 174.559981,68.7337278 178.32,68.7337278 Z M237.84,79.3081475 C229.83996,79.3081475 223.520023,75.8835117 218.88,69.0341375 C214.239977,62.1847632 211.92,52.2713439 211.92,39.2935822 C211.92,26.3158204 214.239977,16.5225638 218.88,9.91351843 C223.520023,3.3044731 229.83996,-2.84217094e-14 237.84,-2.84217094e-14 C245.84004,-2.84217094e-14 252.159977,3.32450021 256.8,9.97360036 C261.440023,16.6227005 263.76,26.3959301 263.76,39.2935822 C263.76,52.2713439 261.440023,62.1847632 256.8,69.0341375 C252.159977,75.8835117 245.84004,79.3081475 237.84,79.3081475 Z M237.84,68.4934001 C239.680009,68.4934001 241.379992,67.9927223 242.94,66.9913518 C244.500008,65.9899813 245.839994,64.3277312 246.96,62.0045517 C248.080006,59.6813721 248.959997,56.6773056 249.6,52.9922622 C250.240003,49.3072187 250.56,44.7410377 250.56,39.2935822 C250.56,33.9262362 250.240003,29.4201366 249.6,25.7751479 C248.959997,22.1301593 248.080006,19.1861742 246.96,16.9431042 C245.839994,14.7000343 244.500008,13.1178926 242.94,12.1966318 C241.379992,11.2753709 239.680009,10.8147474 237.84,10.8147474 C235.999991,10.8147474 234.300008,11.2753709 232.74,12.1966318 C231.179992,13.1178926 229.840006,14.7000343 228.72,16.9431042 C227.599994,19.1861742 226.720003,22.1301593 226.08,25.7751479 C225.439997,29.4201366 225.12,33.9262362 225.12,39.2935822 C225.12,44.7410377 225.439997,49.3072187 226.08,52.9922622 C226.720003,56.6773056 227.599994,59.6813721 228.72,62.0045517 C229.840006,64.3277312 231.179992,65.9899813 232.74,66.9913518 C234.300008,67.9927223 235.999991,68.4934001 237.84,68.4934001 Z" id="Combined-Shape" fill="#000000"></path>
</svg>
<div>ENTER 360°</div>
</button>
</div>
</div>
<script type="module" src="./src/index.js"></script>
</body>
</html>