Replaced yet some more setHSV with setHSL.

examples/webgl_geometry_colors.html

@@ -132,17 +132,17 @@
 						p = geometry.vertices[ vertexIndex ];
 
 						color = new THREE.Color( 0xffffff );
-						color.setHSV( ( p.y / radius + 1 ) / 2, 1.0, 1.0 );
+						color.setHSL( ( p.y / radius + 1 ) / 2, 1.0, 0.5 );
 
 						f.vertexColors[ j ] = color;
 
 						color = new THREE.Color( 0xffffff );
-						color.setHSV( 0.0, ( p.y / radius + 1 ) / 2, 1.0 );
+						color.setHSL( 0.0, ( p.y / radius + 1 ) / 2, 0.5 );
 
 						f2.vertexColors[ j ] = color;
 
 						color = new THREE.Color( 0xffffff );
-						color.setHSV( 0.125 * vertexIndex/geometry.vertices.length, 1.0, 1.0 );
+						color.setHSL( 0.125 * vertexIndex/geometry.vertices.length, 1.0, 0.5 );
 
 						f3.vertexColors[ j ] = color;
 

examples/webgl_lights_hemisphere.html

@@ -113,7 +113,7 @@
 				scene = new THREE.Scene();
 
 				scene.fog = new THREE.Fog( 0xffffff, 1, 5000 );
-				scene.fog.color.setHSV( 0.6, 0, 1 );
+				scene.fog.color.setHSL( 0.6, 0, 1 );
 
 				/*
 				controls = new THREE.TrackballControls( camera );
@@ -132,15 +132,15 @@
 				// LIGHTS
 
 				hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 0.6 );
-				hemiLight.color.setHSV( 0.6, 0.75, 1 );
-				hemiLight.groundColor.setHSV( 0.095, 0.5, 1 );
+				hemiLight.color.setHSL( 0.6, 1, 0.6 );
+				hemiLight.groundColor.setHSL( 0.095, 1, 0.75 );
 				hemiLight.position.set( 0, 500, 0 );
 				scene.add( hemiLight );
 
 				//
 
 				dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
-				dirLight.color.setHSV( 0.1, 0.1, 1 );
+				dirLight.color.setHSL( 0.1, 1, 0.95 );
 				dirLight.position.set( -1, 1.75, 1 );
 				dirLight.position.multiplyScalar( 50 );
 				scene.add( dirLight );
@@ -166,7 +166,7 @@
 
 				var groundGeo = new THREE.PlaneGeometry( 10000, 10000 );
 				var groundMat = new THREE.MeshPhongMaterial( { ambient: 0xffffff, color: 0xffffff, specular: 0x050505 } );
-				groundMat.color.setHSV( 0.095, 0.5, 1 );
+				groundMat.color.setHSL( 0.095, 1, 0.75 );
 
 				var ground = new THREE.Mesh( groundGeo, groundMat );
 				ground.rotation.x = -Math.PI/2;

examples/webgl_marching_cubes.html

@@ -276,13 +276,13 @@
 			dottedMaterial2 = createShaderMaterial( "dotted", light, ambientLight );
 
 			hatchingMaterial2.uniforms.uBaseColor.value.setRGB( 0, 0, 0 );
-			hatchingMaterial2.uniforms.uLineColor1.value.setHSV( 0, 0.9, 0.9 );
-			hatchingMaterial2.uniforms.uLineColor2.value.setHSV( 0, 0.9, 0.9 );
-			hatchingMaterial2.uniforms.uLineColor3.value.setHSV( 0, 0.9, 0.9 );
-			hatchingMaterial2.uniforms.uLineColor4.value.setHSV( 0.1, 0.9, 0.9 );
+			hatchingMaterial2.uniforms.uLineColor1.value.setHSL( 0, 0.8, 0.5 );
+			hatchingMaterial2.uniforms.uLineColor2.value.setHSL( 0, 0.8, 0.5 );
+			hatchingMaterial2.uniforms.uLineColor3.value.setHSL( 0, 0.8, 0.5 );
+			hatchingMaterial2.uniforms.uLineColor4.value.setHSL( 0.1, 0.8, 0.5 );
 
 			dottedMaterial2.uniforms.uBaseColor.value.setRGB( 0, 0, 0 );
-			dottedMaterial2.uniforms.uLineColor1.value.setHSV( 0.05, 1.0, 1.0 );
+			dottedMaterial2.uniforms.uLineColor1.value.setHSL( 0.05, 1.0, 0.5 );
 
 			var texture = THREE.ImageUtils.loadTexture( "textures/ash_uvgrid01.jpg" );
 			texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
@@ -292,85 +292,85 @@
 			"chrome" :
 			{
 				m: new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: reflectionCube } ),
-				h: 0, s: 0, v: 1
+				h: 0, s: 0, l: 1
 			},
 
 			"liquid" :
 			{
 				m: new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: refractionCube, refractionRatio: 0.85 } ),
-				h: 0, s: 0, v: 1
+				h: 0, s: 0, l: 1
 			},
 
 			"shiny"  :
 			{
 				m: new THREE.MeshPhongMaterial( { color: 0x550000, specular: 0x440000, envMap: reflectionCube, combine: THREE.MixOperation, reflectivity: 0.3, metal: true } ),
-				h: 0, s: 0.9, v: 0.3
+				h: 0, s: 0.8, l: 0.2
 			},
 
 			"matte" :
 			{
 				m: new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x111111, shininess: 1 } ),
-				h: 0, s: 0, v: 1
+				h: 0, s: 0, l: 1
 			},
 
 			"flat" :
 			{
 				m: new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x111111, shininess: 1, shading: THREE.FlatShading } ),
-				h: 0, s: 0, v: 1
+				h: 0, s: 0, l: 1
 			},
 
 			"textured" :
 			{
 				m: new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 1, map: texture } ),
-				h: 0, s: 0, v: 1
+				h: 0, s: 0, l: 1
 			},
 
 			"colors" :
 			{
 				m: new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0xffffff, shininess: 2, vertexColors: THREE.VertexColors } ),
-				h: 0, s: 0, v: 1
+				h: 0, s: 0, l: 1
 			},
 
 			"plastic" :
 			{
 				m: new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x888888, ambient: 0x000000, shininess: 250 } ),
-				h: 0.6, s: 0.9, v: 0.2
+				h: 0.6, s: 0.8, l: 0.1
 			},
 
 			"toon1"  :
 			{
 				m: toonMaterial1,
-				h: 0.2, s: 0.5, v: 1
+				h: 0.2, s: 1, l: 0.75
 			},
 
 			"toon2" :
 			{
 				m: toonMaterial2,
-				h: 0.4, s: 0.5, v: 1
+				h: 0.4, s: 1, l: 0.75
 			},
 
 			"hatching" :
 			{
 				m: hatchingMaterial,
-				h: 0.2, s: 0.2, v: 1
+				h: 0.2, s: 1, l: 0.9
 			},
 
 			"hatching2" :
 			{
 				m: hatchingMaterial2,
-				h: 0.0, s: 0.9, v: 0.9
+				h: 0.0, s: 0.8, l: 0.5
 			},
 
 			"dotted" :
 			{
 				m: dottedMaterial,
-				h: 0.2, s: 0.2, v: 1
+				h: 0.2, s: 1, l: 0.9
 			},
 
 			"dotted2" :
 			{
 				m: dottedMaterial2,
-				h: 0.1, s: 1.0, v: 1
+				h: 0.1, s: 1, l: 0.5
 			}
 
 			};
@@ -410,7 +410,7 @@
 					var mat_old = materials[ current_material ];
 					mat_old.h = m_h.getValue();
 					mat_old.s = m_s.getValue();
-					mat_old.v = m_v.getValue();
+					mat_old.l = m_l.getValue();
 
 					current_material = id;
 
@@ -419,7 +419,7 @@
 
 					m_h.setValue( mat.h );
 					m_s.setValue( mat.s );
-					m_v.setValue( mat.v );
+					m_l.setValue( mat.l );
 
 					if ( current_material === "textured" ) {
 
@@ -447,24 +447,24 @@
 
 			effectController = {
 
-			material:   "shiny",
+			material: "shiny",
 
-			speed :   1.0,
-			numBlobs:   10,
+			speed: 1.0,
+			numBlobs: 10,
 			resolution: 28,
-			isolation:  80,
+			isolation: 80,
 
 			floor: true,
 			wallx: false,
 			wallz: false,
 
-			hue:    0.0,
-			saturation: 0.9,
-			value:    0.3,
+			hue: 0.0,
+			saturation: 0.8,
+			lightness: 0.1,
 
-			lhue:     0.04,
+			lhue: 0.04,
 			lsaturation: 1.0,
-			lvalue:     1.0,
+			llightness: 0.5,
 
 			lx: 0.5,
 			ly: 0.5,
@@ -477,7 +477,7 @@
 
 			};
 
-			var h, m_h, m_s, m_v;
+			var h, m_h, m_s, m_l;
 
 			var gui = new dat.GUI();
 
@@ -498,7 +498,7 @@
 
 			m_h = h.add( effectController, "hue", 0.0, 1.0, 0.025 );
 			m_s = h.add( effectController, "saturation", 0.0, 1.0, 0.025 );
-			m_v = h.add( effectController, "value", 0.0, 1.0, 0.025 );
+			m_l = h.add( effectController, "lightness", 0.0, 1.0, 0.025 );
 
 			// light (point)
 
@@ -506,7 +506,7 @@
 
 			h.add( effectController, "lhue", 0.0, 1.0, 0.025 ).name("hue");
 			h.add( effectController, "lsaturation", 0.0, 1.0, 0.025 ).name("saturation");
-			h.add( effectController, "lvalue", 0.0, 1.0, 0.025 ).name("value");
+			h.add( effectController, "llightness", 0.0, 1.0, 0.025 ).name("lightness");
 
 			// light (directional)
 
@@ -608,26 +608,26 @@
 
 				if ( current_material === "dotted2" ) {
 
-					effect.material.uniforms.uLineColor1.value.setHSV( effectController.hue, effectController.saturation, effectController.value );
+					effect.material.uniforms.uLineColor1.value.setHSL( effectController.hue, effectController.saturation, effectController.lightness );
 
 				} else if ( current_material === "hatching2" ) {
 
 					u = effect.material.uniforms;
 
-					u.uLineColor1.value.setHSV( effectController.hue, effectController.saturation, effectController.value );
-					u.uLineColor2.value.setHSV( effectController.hue, effectController.saturation, effectController.value );
-					u.uLineColor3.value.setHSV( effectController.hue, effectController.saturation, effectController.value );
-					u.uLineColor4.value.setHSV( ( effectController.hue + 0.2 % 1.0 ), effectController.saturation, effectController.value );
+					u.uLineColor1.value.setHSL( effectController.hue, effectController.saturation, effectController.lightness );
+					u.uLineColor2.value.setHSL( effectController.hue, effectController.saturation, effectController.lightness );
+					u.uLineColor3.value.setHSL( effectController.hue, effectController.saturation, effectController.lightness );
+					u.uLineColor4.value.setHSL( ( effectController.hue + 0.2 % 1.0 ), effectController.saturation, effectController.lightness );
 
 				} else {
 
-					effect.material.uniforms.uBaseColor.value.setHSV( effectController.hue, effectController.saturation, effectController.value );
+					effect.material.uniforms.uBaseColor.value.setHSL( effectController.hue, effectController.saturation, effectController.lightness );
 
 				}
 
 			} else {
 
-				effect.material.color.setHSV( effectController.hue, effectController.saturation, effectController.value );
+				effect.material.color.setHSL( effectController.hue, effectController.saturation, effectController.lightness );
 
 			}
 
@@ -636,7 +636,7 @@
 			light.position.set( effectController.lx, effectController.ly, effectController.lz );
 			light.position.normalize();
 
-			pointLight.color.setHSV( effectController.lhue, effectController.lsaturation, effectController.lvalue );
+			pointLight.color.setHSL( effectController.lhue, effectController.lsaturation, effectController.llightness );
 
 			// render
 

examples/webgl_materials_bumpmap.html

@@ -99,7 +99,7 @@
 				//
 
 				pointLight = new THREE.PointLight( 0xffffff, 1.5, 1000 );
-				pointLight.color.setHSV( 0.05, 0.05, 1 );
+				pointLight.color.setHSL( 0.05, 1, 0.95 );
 				pointLight.position.set( 0, 0, 600 );
 
 				scene.add( pointLight );
@@ -108,14 +108,14 @@
 
 				spotLight = new THREE.SpotLight( 0xffffff, 1.5 );
 				spotLight.position.set( 0.05, 0.05, 1 );
-				spotLight.color.setHSV( 0.6, 0.05, 1 );
+				spotLight.color.setHSL( 0.6, 1, 0.95 );
 				scene.add( spotLight );
 
 				spotLight.position.multiplyScalar( 700 );
 
 				spotLight.castShadow = true;
 				spotLight.onlyShadow = true;
-				//spotLight.shadowCameraVisible = true;
+				// spotLight.shadowCameraVisible = true;
 
 				spotLight.shadowMapWidth = 2048;
 				spotLight.shadowMapHeight = 2048;
@@ -132,13 +132,13 @@
 
 				directionalLight = new THREE.DirectionalLight( 0xffffff, 1.5 );
 				directionalLight.position.set( 1, -0.5, 1 );
-				directionalLight.color.setHSV( 0.6, 0.05, 1 );
+				directionalLight.color.setHSL( 0.6, 1, 0.95 );
 				scene.add( directionalLight );
 
 				directionalLight.position.multiplyScalar( 500 );
 
 				directionalLight.castShadow = true;
-				//directionalLight.shadowCameraVisible = true;
+				// directionalLight.shadowCameraVisible = true;
 
 				directionalLight.shadowMapWidth = 2048;
 				directionalLight.shadowMapHeight = 2048;
@@ -158,7 +158,7 @@
 
 				directionalLight2 = new THREE.DirectionalLight( 0xffffff, 1.2 );
 				directionalLight2.position.set( 1, -0.5, -1 );
-				directionalLight2.color.setHSV( 0.08, 0.35, 1 );
+				directionalLight2.color.setHSL( 0.08, 1, 0.825 );
 				scene.add( directionalLight2 );
 
 				var mapHeight = THREE.ImageUtils.loadTexture( "obj/leeperrysmith/Infinite-Level_02_Disp_NoSmoothUV-4096.jpg" );

examples/webgl_multiple_canvases_circle.html

@@ -272,12 +272,12 @@
 							p = geometry1.vertices[ vertexIndex ];
 
 							color = new THREE.Color( 0xffffff );
-							color.setHSV( ( p.y / radius + 1 ) / 2, 1.0, 1.0 );
+							color.setHSL( ( p.y / radius + 1 ) / 2, 1.0, 0.5 );
 
 							f1.vertexColors[ j ] = color;
 
 							color = new THREE.Color( 0xffffff );
-							color.setHSV( 0.0, ( p.y / radius + 1 ) / 2, 1.0 );
+							color.setHSL( 0.0, ( p.y / radius + 1 ) / 2, 0.5 );
 
 						}
 

examples/webgl_multiple_canvases_complex.html

@@ -192,17 +192,17 @@
 							p = geometry1.vertices[ vertexIndex ];
 
 							color = new THREE.Color( 0xffffff );
-							color.setHSV( ( p.y / radius + 1 ) / 2, 1.0, 1.0 );
+							color.setHSL( ( p.y / radius + 1 ) / 2, 1.0, 0.5 );
 
 							f1.vertexColors[ j ] = color;
 
 							color = new THREE.Color( 0xffffff );
-							color.setHSV( 0.0, ( p.y/ radius + 1 ) / 2, 1.0 );
+							color.setHSL( 0.0, ( p.y / radius + 1 ) / 2, 0.5 );
 
 							f2.vertexColors[ j ] = color;
 
 							color = new THREE.Color( 0xffffff );
-							color.setHSV( 0.125 * vertexIndex / geometry1.vertices.length, 1.0, 1.0 );
+							color.setHSL( 0.125 * vertexIndex / geometry1.vertices.length, 1.0, 0.5 );
 
 							f3.vertexColors[ j ] = color;
 

examples/webgl_multiple_canvases_grid.html

@@ -208,17 +208,17 @@
 							p = geometry1.vertices[ vertexIndex ];
 
 							color = new THREE.Color( 0xffffff );
-							color.setHSV( ( p.y / radius + 1 ) / 2, 1.0, 1.0 );
+							color.setHSL( ( p.y / radius + 1 ) / 2, 1.0, 0.5 );
 
 							f1.vertexColors[ j ] = color;
 
 							color = new THREE.Color( 0xffffff );
-							color.setHSV( 0.0, ( p.y / radius + 1 ) / 2, 1.0 );
+							color.setHSL( 0.0, ( p.y / radius + 1 ) / 2, 0.5 );
 
 							f2.vertexColors[ j ] = color;
 
 							color = new THREE.Color( 0xffffff );
-							color.setHSV( 0.125 * vertexIndex / geometry1.vertices.length, 1.0, 1.0 );
+							color.setHSL( 0.125 * vertexIndex / geometry1.vertices.length, 1.0, 0.5 );
 
 							f3.vertexColors[ j ] = color;
 

examples/webgl_multiple_views.html

@@ -189,17 +189,17 @@
 						p = geometry.vertices[ vertexIndex ];
 
 						color = new THREE.Color( 0xffffff );
-						color.setHSV( ( p.y / radius + 1 ) / 2, 1.0, 1.0 );
+						color.setHSL( ( p.y / radius + 1 ) / 2, 1.0, 0.5 );
 
 						f.vertexColors[ j ] = color;
 
 						color = new THREE.Color( 0xffffff );
-						color.setHSV( 0.0, ( p.y / radius + 1 ) / 2, 1.0 );
+						color.setHSL( 0.0, ( p.y / radius + 1 ) / 2, 0.5 );
 
 						f2.vertexColors[ j ] = color;
 
 						color = new THREE.Color( 0xffffff );
-						color.setHSV( 0.125 * vertexIndex/geometry.vertices.length, 1.0, 1.0 );
+						color.setHSL( 0.125 * vertexIndex/geometry.vertices.length, 1.0, 0.5 );
 
 						f3.vertexColors[ j ] = color;
 

examples/webgl_particles_shapes.html

@@ -201,7 +201,7 @@
 				parent.add( text );
 				scene.add( parent );
 
-				///// Create particle objects for Three.js
+				// Create particle objects for Three.js
 
 				var particlesLength = 70000;
 
@@ -348,7 +348,7 @@
 				particleCloud = new THREE.ParticleSystem( particles, shaderMaterial );
 
 				particleCloud.dynamic = true;
-				//particleCloud.sortParticles = true;
+				// particleCloud.sortParticles = true;
 
 				var vertices = particleCloud.geometry.vertices;
 				var values_size = attributes.size.value;
@@ -358,8 +358,7 @@
 
 					values_size[ v ] = 50;
 
-					values_color[ v ] = new THREE.Color( 0xffffff );
-					values_color[ v ].setHSV( 0, 0, 0 );
+					values_color[ v ] = new THREE.Color( 0x000000 );
 
 					particles.vertices[ v ].set( Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY );
 
@@ -408,9 +407,9 @@
 
 					if ( target ) {
 
-						//console.log(target,particles.vertices[target]);
-						//values_size[target]
-						//values_color[target]
+						// console.log(target,particles.vertices[target]);
+						// values_size[target]
+						// values_color[target]
 
 						hue += 0.0003 * delta;
 						if ( hue > 1 ) hue -= 1;
@@ -425,16 +424,16 @@
 						emitterpos.x = pointOnShape.x * 5 - 100;
 						emitterpos.y = -pointOnShape.y * 5 + 400;
 
-						//pointLight.position.copy( emitterpos );
+						// pointLight.position.copy( emitterpos );
 						pointLight.position.x = emitterpos.x;
 						pointLight.position.y = emitterpos.y;
 						pointLight.position.z = 100;
 
 						particles.vertices[ target ] = p.position;
 
-						values_color[ target ].setHSV( hue, 0.8, 0.15 );
+						values_color[ target ].setHSL( hue, 0.6, 0.1 );
 
-						pointLight.color.setHSV( hue, 0.8, 0.95 );
+						pointLight.color.setHSL( hue, 0.8, 0.5 );
 
 
 					};
@@ -449,7 +448,7 @@
 
 						// Hide the particle
 
-						values_color[ target ].setHSV( 0, 0, 0 );
+						values_color[ target ].setRGB( 0, 0, 0 );
 						particles.vertices[ target ].set( Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY );
 
 						// Mark particle system as available by returning to pool
@@ -487,19 +486,8 @@
 				sparksEmitter.addCallback( "dead", onParticleDead );
 				sparksEmitter.start();
 
-				//sparksEmitter.addCallback("loopUpdated", engineLoopUpdate);
-
-				//sparksEmitter.addCallback("updated", function(p) {
-					// var target = particle.target;
-					// 					if (target) {
-					// 						// update energy properties
-					// 						//values_size[target] = Math.random()*100;
-					// 					}
-				//});
-				//
 				// End Particles
 
-
 				renderer = new THREE.WebGLRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setClearColorHex( 0x000000, 1 );
@@ -544,11 +532,11 @@
 				composer.addPass( renderScene );
 				composer.addPass( hblur );
 				composer.addPass( vblur );
-				//composer.addPass( effectBlurX );
-				//composer.addPass( effectBlurY );
-				//composer.addPass( effectCopy );
-				//composer.addPass( effectFocus );
-				//composer.addPass( effectFilm );
+				// composer.addPass( effectBlurX );
+				// composer.addPass( effectBlurY );
+				// composer.addPass( effectCopy );
+				// composer.addPass( effectFocus );
+				// composer.addPass( effectFilm );
 
 				vblur.renderToScreen = true;
 				effectBlurY.renderToScreen = true;
@@ -673,13 +661,13 @@
 				attributes.pcolor.needsUpdate = true;
 
 				// Pretty cool effect if you enable this
-				//particleCloud.rotation.y += 0.05;
+				// particleCloud.rotation.y += 0.05;
 
 				parent.rotation.y += ( targetRotation - parent.rotation.y ) * 0.05;
 
 				renderer.clear();
 
-				//renderer.render( scene, camera );
+				// renderer.render( scene, camera );
 				composer.render( 0.1 );
 
 

examples/webgldeferred_animation.html

@@ -249,7 +249,7 @@
 
 				} );
 
-				loader.load( "models/skinned/human_walk_0_female.js", function( geometry, materials ) {
+				loader.load( "models/skinned/human_walk_0_female.js", function ( geometry, materials ) {
 
 					geometry.computeVertexNormals();
 					geometry.computeBoundingBox();
@@ -264,9 +264,9 @@
 
 						originalMaterial.map = undefined;
 						originalMaterial.shading = THREE.SmoothShading;
-						originalMaterial.color.setHSV( 0.01, 0.515, 0.5 );
+						originalMaterial.color.setHSL( 0.01, 0.3, 0.3 );
 						originalMaterial.ambient.copy( originalMaterial.color );
-						originalMaterial.specular.setHSV( 0, 0, 0.1 );
+						originalMaterial.specular.setHSL( 0, 0, 0.1 );
 						originalMaterial.shininess = 75;
 
 						originalMaterial.wrapAround = true;