|
@@ -6,20 +6,16 @@
|
|
|
<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">
|
|
|
</head>
|
|
|
- <style>
|
|
|
- #overlay {
|
|
|
- flex-direction: column;
|
|
|
- }
|
|
|
- </style>
|
|
|
<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>
|
|
|
+ <h2>WARNING</h2>
|
|
|
+ <p style="text-align: center; max-width:450px; margin-bottom:40px;">
|
|
|
+ This example may potentially trigger seizures for people with <strong>photosensitive epilepsy</strong>.
|
|
|
</p>
|
|
|
- <button id="startButton">Play</button>
|
|
|
+ <button id="startButton">Okay</button>
|
|
|
</div>
|
|
|
+
|
|
|
<div id="info">
|
|
|
<label for="dotScreen">Glitch me wild:</label><input id="wildGlitch" type="checkbox"/><br />
|
|
|
</div>
|
|
@@ -37,11 +33,16 @@
|
|
|
|
|
|
let glitchPass;
|
|
|
|
|
|
- const btn = document.querySelector('#startButton');
|
|
|
- btn.addEventListener('click', function() {
|
|
|
+ const button = document.querySelector( '#startButton' );
|
|
|
+ button.addEventListener( 'click', function () {
|
|
|
+
|
|
|
+ const overlay = document.getElementById( 'overlay' );
|
|
|
+ overlay.remove();
|
|
|
+
|
|
|
init();
|
|
|
animate();
|
|
|
- });
|
|
|
+
|
|
|
+ } );
|
|
|
|
|
|
function updateOptions() {
|
|
|
|
|
@@ -51,8 +52,6 @@
|
|
|
}
|
|
|
|
|
|
function init() {
|
|
|
- const overlay = document.getElementById( 'overlay' );
|
|
|
- overlay.remove();
|
|
|
|
|
|
renderer = new THREE.WebGLRenderer();
|
|
|
renderer.setPixelRatio( window.devicePixelRatio );
|