Răsfoiți Sursa

Examples: add a Photosensitive Epilepsy warning

FrodoLuo 4 ani în urmă
părinte
comite
a37dc5af24
1 a modificat fișierele cu 21 adăugiri și 2 ștergeri
  1. 21 2
      examples/webgl_postprocessing_glitch.html

+ 21 - 2
examples/webgl_postprocessing_glitch.html

@@ -6,8 +6,22 @@
 		<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>
+				<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">
 			<label for="dotScreen">Glitch me wild:</label><input id="wildGlitch" type="checkbox"/><br />
 		</div>
@@ -25,8 +39,11 @@
 
 			let glitchPass;
 
-			init();
-			animate();
+			const btn = document.querySelector('#startButton');
+			btn.addEventListener('click', function() {
+				init();
+				animate();
+			});
 
 			function updateOptions() {
 
@@ -36,6 +53,8 @@
 			}
 
 			function init() {
+				const overlay = document.getElementById( 'overlay' );
+				overlay.remove();
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );