Bigger things, better color picking

examples/webgl_camera_logarithmicdepthbuffer.html

@@ -82,7 +82,7 @@
 
 		<div id="info">
 			<a href="http://threejs.org" target="_blank">three.js</a> - cameras - logarithmic depth buffer<br/>
-			Zoom through scene with objects ranging in size from 1µm to 1000 light years using the mousewheel<br/>
+			Zoom through scene with objects ranging in size from 1µm to 120,000 light years using the mousewheel<br/>
 			Linear z-buffer handles close-up objects well, but fails spectacularly at distant objects<br/>
 			Logarithmic handles all but the smallest objects with ease
 		</div>
@@ -93,8 +93,8 @@
 
 		<script>
 
-			// 1 micrometer to 100 million light years in one scene?	 preposterous!	and yet...
-			var NEAR = 1e-6, FAR = 1e24;
+			// 1 micrometer to 100 billion light years in one scene, with 1 unit = 1 meter?  preposterous!  and yet...
+			var NEAR = 1e-6, FAR = 1e27;
 			var SCREEN_WIDTH = window.innerWidth;
 			var SCREEN_HEIGHT = window.innerHeight;
 			var screensplit = .25, screensplit_right = 0;
@@ -105,7 +105,7 @@
 			var container, stats;
 			var objects = {};
 
-			// Generate a number of text labels, from 1µm in size up to 1000 light years
+			// Generate a number of text labels, from 1µm in size up to 100,000,000 light years
 			// Try to use some descriptive real-world examples of objects at each scale
 
 			var labeldata = [
@@ -124,7 +124,8 @@
    				{ size: 9.4605284e15,  scale: 1.0,  label: "gargantuan (1 light year)", scale: 1 },
    				{ size: 3.08567758e16, scale: 1.0,  label: "ludicrous (1 parsec)", scale: 1 },
 				{ size: 1e19,          scale: 1.0,  label: "mind boggling (1000 light years)", scale: 1 },
-				{ size: 1.135e21,      scale: 1.0,  label: "galaxy-sized (120,000 light years)", scale: 1 }
+				{ size: 1.135e21,      scale: 1.0,  label: "galaxy-sized (120,000 light years)", scale: 1 },
+				{ size: 9.46e23,       scale: 1.0,  label: "... (100,000,000 light years)", scale: 1 }
 			];
 
 			init();
@@ -181,10 +182,13 @@
 				var geomtransform = new THREE.Matrix4();
 				var tmpvec = new THREE.Vector3();
 				var meshes = [];
+				var coloroffset = 0;
+				var colorskip = ['black', 'antiquewhite', 'bisque', 'beige', 'blanchedalmond', 'darkblue', 'darkcyan'];
+				var colorkeys = Object.keys( THREE.ColorKeywords );
 
 				for (var i = 0; i < labeldata.length; i++) {
 					var scale = labeldata[i].scale || 1;
-					var labelgeo = new THREE.TextGeometry(labeldata[i].label, {
+					var labelgeo = new THREE.TextGeometry( labeldata[i].label, {
 						size: labeldata[i].size,
 						height: labeldata[i].size / 2,
 						font: 'helvetiker',
@@ -192,11 +196,14 @@
 					labelgeo.computeBoundingSphere();
 
 					// center text
-					geomtransform.setPosition(tmpvec.set(-labelgeo.boundingSphere.radius, 0, 0));
-					labelgeo.applyMatrix(geomtransform);
-
-					// Pick a color at "random"
-					materialargs.color = THREE.ColorKeywords[Object.keys(THREE.ColorKeywords)[i]];
+					geomtransform.setPosition( tmpvec.set( -labelgeo.boundingSphere.radius, 0, 0 ) );
+					labelgeo.applyMatrix( geomtransform );
+
+					// Pick a color at "random".  Exclude black, because it looks bad.
+					while ( colorskip.indexOf( colorkeys[ i + coloroffset ] ) != -1 ) {
+						coloroffset++;
+					}
+					materialargs.color = THREE.ColorKeywords[ colorkeys[ i + coloroffset ] ];
 
 					var mesh = new THREE.Mesh( labelgeo, new THREE.MeshPhongMaterial( materialargs ) );
 					mesh.position.z = -labeldata[i].size * 1 * scale;