Updated examples to match previous version more closely. See #14537.

Author: mrdoob

examples/webgl_geometry_colors.html

@@ -7,9 +7,9 @@
 		<style>
 			body {
 				color: #808080;
-				font-family:Monospace;
-				font-size:13px;
-				text-align:center;
+				font-family: Monospace;
+				font-size: 13px;
+				text-align: center;
 
 				background-color: #fff;
 				margin: 0px;
@@ -134,7 +134,7 @@
 					color.setHSL( 0, ( positions2.getY( i ) / radius + 1 ) / 2, 0.5 );
 					colors2.setXYZ( i, color.r, color.g, color.b );
 
-					color.setRGB( 1, 1, ( positions3.getY( i ) / radius + 1 ) / 2 );
+					color.setRGB( 1, 0.8 - ( positions3.getY( i ) / radius + 1 ) / 2, 0 );
 					colors3.setXYZ( i, color.r, color.g, color.b );
 
 				}

examples/webgl_multiple_canvases_complex.html

@@ -196,7 +196,7 @@
 					color.setHSL( 0, ( positions2.getY( i ) / radius + 1 ) / 2, 0.5 );
 					colors2.setXYZ( i, color.r, color.g, color.b );
 
-					color.setRGB( 1, 1, ( positions3.getY( i ) / radius + 1 ) / 2 );
+					color.setRGB( 1, 0.8 - ( positions3.getY( i ) / radius + 1 ) / 2, 0 );
 					colors3.setXYZ( i, color.r, color.g, color.b );
 
 				}

examples/webgl_multiple_canvases_grid.html

@@ -214,7 +214,7 @@
 					color.setHSL( 0, ( positions2.getY( i ) / radius + 1 ) / 2, 0.5 );
 					colors2.setXYZ( i, color.r, color.g, color.b );
 
-					color.setRGB( 1, 1, ( positions3.getY( i ) / radius + 1 ) / 2 );
+					color.setRGB( 1, 0.8 - ( positions3.getY( i ) / radius + 1 ) / 2, 0 );
 					colors3.setXYZ( i, color.r, color.g, color.b );
 
 				}

examples/webgl_multiple_renderers.html

@@ -128,7 +128,7 @@
 					color.setHSL( 0, ( positions2.getY( i ) / radius + 1 ) / 2, 0.5 );
 					colors2.setXYZ( i, color.r, color.g, color.b );
 
-					color.setRGB( 1, 1, ( positions3.getY( i ) / radius + 1 ) / 2 );
+					color.setRGB( 1, 0.8 - ( positions3.getY( i ) / radius + 1 ) / 2, 0 );
 					colors3.setXYZ( i, color.r, color.g, color.b );
 
 				}
@@ -184,6 +184,25 @@
 				mesh2.rotation.z += Math.PI / 500;
 				mesh3.rotation.z += Math.PI / 500;
 
+				var position = new THREE.Vector3();
+				var color = new THREE.Color();
+
+				var time = performance.now() / 500;
+
+				var positions = mesh3.geometry.attributes.position;
+				var colors = mesh3.geometry.attributes.color;
+
+				for ( var i = 0, l = positions.count; i < l; i ++ ) {
+
+					position.fromArray( positions.array, i * 3 );
+
+					color.setRGB( 1, Math.sin( time + position.x ), Math.cos( time * 2.123 + position.x ) );
+					colors.setXYZ( i, color.r, color.g, color.b );
+
+				}
+
+				colors.needsUpdate = true;
+
 				//
 
 				var time = performance.now() / 2000;

examples/webgl_multiple_views.html

@@ -185,7 +185,7 @@
 					color.setHSL( 0, ( positions2.getY( i ) / radius + 1 ) / 2, 0.5 );
 					colors2.setXYZ( i, color.r, color.g, color.b );
 
-					color.setRGB( 1, 1, ( positions3.getY( i ) / radius + 1 ) / 2 );
+					color.setRGB( 1, 0.8 - ( positions3.getY( i ) / radius + 1 ) / 2, 0 );
 					colors3.setXYZ( i, color.r, color.g, color.b );
 
 				}