|
@@ -6,8 +6,22 @@
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
|
<link type="text/css" rel="stylesheet" href="main.css">
|
|
<link type="text/css" rel="stylesheet" href="main.css">
|
|
</head>
|
|
</head>
|
|
|
|
+ <style>
|
|
|
|
+ #overlay {
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ }
|
|
|
|
+ </style>
|
|
<body>
|
|
<body>
|
|
|
|
|
|
|
|
+ <div id="overlay">
|
|
|
|
+ <h3>Photosensitive Epilepsy Warning</h3>
|
|
|
|
+ <p class="warning">
|
|
|
|
+ This demo contains strong and frequent flashes which may trigger a potential <strong>Photosensitive Epilepsy.</strong>
|
|
|
|
+ <br/>
|
|
|
|
+ If you got any uncomfortable, press <strong>Ctrl + W</strong> or <strong>Command + W</strong> to close this page.
|
|
|
|
+ </p>
|
|
|
|
+ <button id="startButton">Play</button>
|
|
|
|
+ </div>
|
|
<div id="info">
|
|
<div id="info">
|
|
<label for="dotScreen">Glitch me wild:</label><input id="wildGlitch" type="checkbox"/><br />
|
|
<label for="dotScreen">Glitch me wild:</label><input id="wildGlitch" type="checkbox"/><br />
|
|
</div>
|
|
</div>
|
|
@@ -25,8 +39,11 @@
|
|
|
|
|
|
let glitchPass;
|
|
let glitchPass;
|
|
|
|
|
|
- init();
|
|
|
|
- animate();
|
|
|
|
|
|
+ const btn = document.querySelector('#startButton');
|
|
|
|
+ btn.addEventListener('click', function() {
|
|
|
|
+ init();
|
|
|
|
+ animate();
|
|
|
|
+ });
|
|
|
|
|
|
function updateOptions() {
|
|
function updateOptions() {
|
|
|
|
|
|
@@ -36,6 +53,8 @@
|
|
}
|
|
}
|
|
|
|
|
|
function init() {
|
|
function init() {
|
|
|
|
+ const overlay = document.getElementById( 'overlay' );
|
|
|
|
+ overlay.remove();
|
|
|
|
|
|
renderer = new THREE.WebGLRenderer();
|
|
renderer = new THREE.WebGLRenderer();
|
|
renderer.setPixelRatio( window.devicePixelRatio );
|
|
renderer.setPixelRatio( window.devicePixelRatio );
|