Updated some more examples from setHSV to setHSL.

examples/webgl_particles_sprites.html

@@ -86,11 +86,11 @@
 
 				}
 
-				parameters = [ [ [1.0, 0.2, 1.0], sprite2, 20 ],
-							   [ [0.95, 0.1, 1], sprite3, 15 ],
-							   [ [0.90, 0.05, 1], sprite1, 10 ],
-							   [ [0.85, 0, 0.8], sprite5, 8 ],
-							   [ [0.80, 0, 0.7], sprite4, 5 ],
+				parameters = [ [ [1.0, 0.2, 0.5], sprite2, 20 ],
+							   [ [0.95, 0.1, 0.5], sprite3, 15 ],
+							   [ [0.90, 0.05, 0.5], sprite1, 10 ],
+							   [ [0.85, 0, 0.5], sprite5, 8 ],
+							   [ [0.80, 0, 0.5], sprite4, 5 ],
 							   ];
 
 				for ( i = 0; i < parameters.length; i ++ ) {
@@ -100,7 +100,7 @@
 					size   = parameters[i][2];
 
 					materials[i] = new THREE.ParticleBasicMaterial( { size: size, map: sprite, blending: THREE.AdditiveBlending, depthTest: false, transparent : true } );
-					materials[i].color.setHSV( color[0], color[1], color[2] );
+					materials[i].color.setHSL( color[0], color[1], color[2] );
 
 					particles = new THREE.ParticleSystem( geometry, materials[i] );
 
@@ -213,7 +213,7 @@
 					color = parameters[i][0];
 
 					h = ( 360 * ( color[0] + time ) % 360 ) / 360;
-					materials[i].color.setHSV( h, color[1], color[2] );
+					materials[i].color.setHSL( h, color[1], color[2] );
 
 				}
 

examples/webgl_postprocessing_dof.html

@@ -292,7 +292,7 @@
 					for( i = 0; i < nobjects; i ++ ) {
 
 						h = ( 360 * ( i / nobjects + time ) % 360 ) / 360;
-						materials[ i ].color.setHSV( h, 1, 1 );
+						materials[ i ].color.setHSL( h, 1, 0.5 );
 
 					}
 

examples/webgl_ribbons.html

@@ -56,7 +56,7 @@
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
 			var container, stats;
-			var camera, scene, renderer, ribbon, geometry, geometry2, materials = [], ribbons = [],
+			var camera, scene, renderer, ribbon, geometry, geometry2, ribbons = [],
 				parameters, i, i2, h, color, x, y, z, z2, s, n, n2, nribbons, grid;
 
 			var mouseX = 0, mouseY = 0;
@@ -108,7 +108,7 @@
 					if( i2 % 4 <= 2 ) h -= 0.15;
 
 					color = new THREE.Color( 0xffffff );
-					color.setHSV( 0.1 , 0, h );
+					color.setHSL( 0.1, 0, h );
 					geometry.colors.push( color );
 					geometry2.colors.push( color );
 
@@ -125,9 +125,9 @@
 				for ( i = 0; i < xgrid; i ++ )
 				for ( j = 0; j < ygrid; j ++ ) {
 
-					materials[ c ] = new THREE.MeshBasicMaterial( { color: 0xffffff, vertexColors: true, side: THREE.DoubleSide } );
+					var material = new THREE.MeshBasicMaterial( { color: 0xffffff, vertexColors: true, side: THREE.DoubleSide } );
 
-					ribbon = new THREE.Ribbon( i % 2 ? geometry : geometry2, materials[ c ] );
+					ribbon = new THREE.Ribbon( i % 2 ? geometry : geometry2, material );
 					ribbon.rotation.x = 0;
 					ribbon.rotation.y = Math.PI / 2;
 					ribbon.rotation.z = Math.PI;
@@ -135,9 +135,8 @@
 					x = 40 * ( i - xgrid/2 );
 					y = 40 * ( j - ygrid/2 );
 					z = 0;
-					ribbon.position.set( x, y, z );
 
-					materials[c].color.setHSV( i / xgrid, 0.3 +  0.7 * j / ygrid, 1 );
+					ribbon.position.set( x, y, z );
 
 					ribbon.matrixAutoUpdate = false;
 
@@ -295,10 +294,10 @@
 				geometry.verticesNeedUpdate = true;
 				geometry2.verticesNeedUpdate = true;
 
-				for( i = 0; i < nribbons; i++ ) {
+				for ( i = 0; i < nribbons; i++ ) {
 
 					h = ( 360 * ( i / nribbons + time ) % 360 ) / 360;
-					materials[ i ].color.setHSV( h, 0.5 + 0.5 * ( i % 20 / 20 ), 1 );
+					ribbons[ i ].material.color.setHSL( h, ( i % 20 / 20 ) * 0.3 + 0.7, 0.6 );
 
 				}
 

examples/webgl_shading_physical.html

@@ -125,11 +125,6 @@
 				scene = new THREE.Scene();
 				scene.fog = new THREE.Fog( 0x00aaff, 1000, FAR );
 
-				if ( DAY )
-					scene.fog.color.setHSV( 0.13, 0.25, 0.99 );
-				else
-					scene.fog.color.setHSV( 0.13, 0.25, 0.1 );
-
 				// CUBE CAMERA
 
 				cubeCamera = new THREE.CubeCamera( 1, FAR, 128 );
@@ -187,7 +182,6 @@
 				// GROUND
 
 				var groundMaterial = new THREE.MeshPhongMaterial( { shininess: 80, ambient: 0x444444, color: 0xffffff, specular: 0xffffff, map: textureSquares } );
-				//groundMaterial.color.setHSV( 0.1, 0.1, 0.99 );
 
 				var planeGeometry = new THREE.PlaneGeometry( 100, 100 );
 
@@ -231,8 +225,6 @@
 				function addObjectColor( geometry, color, x, y, z, ry ) {
 
 					var material = new THREE.MeshPhongMaterial( { color: 0xffffff, ambient: 0x444444 } );
-					//var material = new THREE.MeshPhongMaterial( { color: color, ambient: color } );
-					//THREE.ColorUtils.adjustHSV( material.ambient, 0, 0, -0.5 );
 
 					return addObject( geometry, material, x, y, z, ry );
 
@@ -242,7 +234,7 @@
 
 					var tmpMesh = new THREE.Mesh( geometry, material );
 
-					THREE.ColorUtils.adjustHSV( tmpMesh.material.color, 0.1, -0.1, 0 );
+					tmpMesh.material.color.offsetHSL( 0.1, -0.1, 0 );
 
 					tmpMesh.position.set( x, y, z );
 
@@ -317,8 +309,7 @@
 
 				}
 
-				ambientLight = new THREE.AmbientLight( 0xffffff );
-				ambientLight.color.setHSV( 0.1, 0.9, 0.25 );
+				ambientLight = new THREE.AmbientLight( 0x3f2806 );
 				scene.add( ambientLight );
 
 				pointLight = new THREE.PointLight( 0xffaa00, pointIntensity, 5000 );
@@ -345,8 +336,6 @@
 
 				renderer = new THREE.WebGLRenderer( { clearColor: 0x00aaff, clearAlpha: 1, antialias: false } );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
-
-				if ( scene.fog )
 				renderer.setClearColor( scene.fog.color, 1 );
 
 				renderer.domElement.style.position = "absolute";
@@ -442,7 +431,7 @@
 
 				tweenDirection = -1;
 
-				tweenDay = new TWEEN.Tween( parameters ).to( { control: 100 }, 1000 ).easing( TWEEN.Easing.Exponential.Out );
+				tweenDay = new TWEEN.Tween( parameters ).to( { control: 1 }, 1000 ).easing( TWEEN.Easing.Exponential.Out );
 				tweenNight = new TWEEN.Tween( parameters ).to( { control: 0 }, 1000 ).easing( TWEEN.Easing.Exponential.Out );
 
 				// GUI
@@ -565,13 +554,13 @@
 
 				if ( morph ) morph.updateAnimation( delta );
 
-				scene.fog.color.setHSV( 0.13, 0.25, THREE.Math.mapLinear( parameters.control, 0, 100, 0.1, 0.99 ) );
+				scene.fog.color.setHSL( 0.63, 0.05, parameters.control );
 				renderer.setClearColor( scene.fog.color, 1 );
 
-				sunLight.intensity = THREE.Math.mapLinear( parameters.control, 0, 100, 0.3, 1 );
-				pointLight.intensity = THREE.Math.mapLinear( parameters.control, 0, 100, 1, 0.5 );
+				sunLight.intensity = parameters.control * 0.7 + 0.3;
+				pointLight.intensity = - parameters.control * 0.5 + 1;
 
-				pointLight.color.setHSV( 0.1, THREE.Math.mapLinear( parameters.control, 0, 100, 0.99, 0 ), 0.9 );
+				pointLight.color.setHSL( 0.1, 0.75, parameters.control * 0.5 + 0.5 );
 
 				sunLight.shadowDarkness = shadowConfig.shadowDarkness * sunLight.intensity;
 

examples/webgl_sprites.html

@@ -78,7 +78,7 @@
 					} else {
 
 						material = materialC.clone();
-						material.color.setHSV( 0.5 * Math.random(), 0.8, 0.9 );
+						material.color.setHSL( 0.5 * Math.random(), 0.75, 0.5 );
 						material.uvScale.set( 2, 2 );
 						material.uvOffset.set( -0.5, -0.5 );