Home Explore Help
Sign In
javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Examples: Simplified/beautified startButton.

Mr.doob 5 years ago
parent
1c07c8a986
commit
bc20838ed3
7 changed files with 20 additions and 49 deletions
Split View Show Diff Stats
  1. 11 22
      examples/main.css
  2. 1 4
      examples/webaudio_orientation.html
  3. 1 4
      examples/webaudio_sandbox.html
  4. 1 4
      examples/webaudio_timing.html
  5. 4 7
      examples/webaudio_visualizer.html
  6. 1 4
      examples/webgl_loader_mmd_audio.html
  7. 1 4
      examples/webgl_materials_video.html

+ 11 - 22
examples/main.css
View File 

@@ -59,32 +59,21 @@ a, button, input, select {
 
 	top: 0;
 
 	left: 0;
 
 	width: 100%;
 
-	height:100%;
 
+	height: 100%;
 
 	display: flex;
 
 	align-items: center;
 
 	justify-content: center;
 
-	opacity: 1;
 
-	background-color: #000000;
 
-	color: #ffffff;
 
+	background: rgba(0,0,0,0.7);
 
 }
 
 
-#overlay > div {
 
-	text-align: center;
 
-}
 
-
 
-#overlay > div > button {
 
-	height: 20px;
 
-	background: transparent;
 
-	color: #ffffff;
 
-	outline: 1px solid #ffffff;
 
-	border: 0px;
 
-	cursor: pointer;
 
-}
 
-
 
-#overlay > div > p {
 
-	color: #777777;
 
-	font-size: 12px;
 
-}
 
+	#overlay button {
 
+		background: #ffffff;
 
+		border: 0;
 
+		color: #000000;
 
+		padding: 16px 20px;
 
+		text-transform: uppercase;
 
+		cursor: pointer;
 
+	}
 
 
 #notSupported {
 
 	width: 50%;
 
@@ -92,4 +81,4 @@ a, button, input, select {
 
 	background-color: #f00;
 
 	margin-top: 20px;
 
 	padding: 10px;
 
-}
 
+}

+ 1 - 4
examples/webaudio_orientation.html
View File 

@@ -14,10 +14,7 @@
 
 	</audio>
 
 
 	<div id="overlay">
 
-		<div>
 
-			<button id="startButton">Click to Play</button>
 
-			<p>Audio playback requires user interaction.</p>
 
-		</div>
 
+		<button id="startButton">Play</button>
 
 	</div>
 
 	<div id="container"></div>
 
 	<div id="info">

+ 1 - 4
examples/webaudio_sandbox.html
View File 

@@ -8,10 +8,7 @@
 
 	</head>
 
 	<body>
 
 		<div id="overlay">
 
-			<div>
 
-				<button id="startButton">Click to Play</button>
 
-				<p>Audio playback requires user interaction.</p>
 
-			</div>
 
+			<button id="startButton">Play</button>
 
 		</div>
 
 		<div id="info">
 
 			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webaudio - sandbox<br/>

+ 1 - 4
examples/webaudio_timing.html
View File 

@@ -9,10 +9,7 @@
 
 <body>
 
 
 	<div id="overlay">
 
-		<div>
 
-			<button id="startButton">Click to Play</button>
 
-			<p>Audio playback requires user interaction.</p>
 
-		</div>
 
+		<button id="startButton">Play</button>
 
 	</div>
 
 	<div id="container"></div>
 
 	<div id="info">

+ 4 - 7
examples/webaudio_visualizer.html
View File 

@@ -43,10 +43,7 @@
 
 	</head>
 
 	<body>
 
 		<div id="overlay">
 
-			<div>
 
-				<button id="startButton">Click to Play</button>
 
-				<p>Audio playback requires user interaction.</p>
 
-			</div>
 
+			<button id="startButton">Play</button>
 
 		</div>
 
 		<div id="container"></div>
 
 		<div id="info">
 
@@ -106,10 +103,10 @@
 
 				} else {
 
 
 					var mediaElement = new Audio( file );
 
-				mediaElement.loop = true;
 
-				mediaElement.play();
 
+					mediaElement.loop = true;
 
+					mediaElement.play();
 
 
-				audio.setMediaElementSource( mediaElement );
 
+					audio.setMediaElementSource( mediaElement );
 
 
 				}

+ 1 - 4
examples/webgl_loader_mmd_audio.html
View File 

@@ -17,10 +17,7 @@
 
 
 	<body>
 
 		<div id="overlay">
 
-			<div>
 
-				<button id="startButton">Click to Play</button>
 
-				<p>Audio playback requires user interaction.</p>
 
-			</div>
 
+			<button id="startButton">Play</button>
 
 		</div>
 
 		<div id="info">
 
 		<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - MMDLoader test<br />

+ 1 - 4
examples/webgl_materials_video.html
View File 

@@ -9,10 +9,7 @@
 
 	<body>
 
 
 		<div id="overlay">
 
-			<div>
 
-				<button id="startButton">Click to Play</button>
 
-				<p>Video playback with audio requires user interaction.</p>
 
-			</div>
 
+			<button id="startButton">Play</button>
 
 		</div>
 
 		<div id="container"></div>