Updated some more examples.

examples/canvas_particles_shapes.html

@@ -173,7 +173,7 @@
 					//hearts circleLines
 					var material = new THREE.ParticleCanvasMaterial( {  program: hearts, blending:THREE.AdditiveBlending } );
 
-					material.color.setHSV(hue, 0.5, 1);
+					material.color.setHSL(hue, 1, 0.75);
 					hue += 0.001;
 					if (hue>1) hue-=1;
 

examples/misc_controls_pointerlock.html

@@ -212,10 +212,10 @@
 				for ( var i = 0, l = geometry.faces.length; i < l; i ++ ) {
 
 					var face = geometry.faces[ i ];
-					face.vertexColors[ 0 ] = new THREE.Color().setHSL( Math.random() * 0.2 + 0.5, 0.5, Math.random() * 0.25 + 0.75 );
-					face.vertexColors[ 1 ] = new THREE.Color().setHSL( Math.random() * 0.2 + 0.5, 0.5, Math.random() * 0.25 + 0.75 );
-					face.vertexColors[ 2 ] = new THREE.Color().setHSL( Math.random() * 0.2 + 0.5, 0.5, Math.random() * 0.25 + 0.75 );
-					face.vertexColors[ 3 ] = new THREE.Color().setHSL( Math.random() * 0.2 + 0.5, 0.5, Math.random() * 0.25 + 0.75 );
+					face.vertexColors[ 0 ] = new THREE.Color().setHSL( Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
+					face.vertexColors[ 1 ] = new THREE.Color().setHSL( Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
+					face.vertexColors[ 2 ] = new THREE.Color().setHSL( Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
+					face.vertexColors[ 3 ] = new THREE.Color().setHSL( Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
 
 				}
 
@@ -231,10 +231,10 @@
 				for ( var i = 0, l = geometry.faces.length; i < l; i ++ ) {
 
 					var face = geometry.faces[ i ];
-					face.vertexColors[ 0 ] = new THREE.Color().setHSL( Math.random() * 0.2 + 0.5, 0.5, Math.random() * 0.25 + 0.75 );
-					face.vertexColors[ 1 ] = new THREE.Color().setHSL( Math.random() * 0.2 + 0.5, 0.5, Math.random() * 0.25 + 0.75 );
-					face.vertexColors[ 2 ] = new THREE.Color().setHSL( Math.random() * 0.2 + 0.5, 0.5, Math.random() * 0.25 + 0.75 );
-					face.vertexColors[ 3 ] = new THREE.Color().setHSL( Math.random() * 0.2 + 0.5, 0.5, Math.random() * 0.25 + 0.75 );
+					face.vertexColors[ 0 ] = new THREE.Color().setHSL( Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
+					face.vertexColors[ 1 ] = new THREE.Color().setHSL( Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
+					face.vertexColors[ 2 ] = new THREE.Color().setHSL( Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
+					face.vertexColors[ 3 ] = new THREE.Color().setHSL( Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
 
 				}
 
@@ -248,7 +248,7 @@
 					mesh.position.z = Math.floor( Math.random() * 20 - 10 ) * 20;
 					scene.add( mesh );
 
-					material.color.setHSV( Math.random() * 0.2 + 0.5, Math.random() * 0.5, 1 );
+					material.color.setHSL( Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
 
 					objects.push( mesh );
 

examples/misc_sound.html

@@ -131,10 +131,6 @@
 				material_sphere1 = new THREE.MeshLambertMaterial( { color: 0xffaa00, shading: THREE.FlatShading } );
 				material_sphere2 = new THREE.MeshLambertMaterial( { color: 0xff2200, shading: THREE.FlatShading } );
 
-				var cube = new THREE.CubeGeometry( 5, 40, 5 );
-				var material_cube = new THREE.MeshLambertMaterial( { color: 0xffff00, shading: THREE.FlatShading } );
-				material_cube.color.setHSV( 0.1, 0.7, 1 );
-
 				// sound spheres
 
 				var s = 1;
@@ -162,10 +158,9 @@
 
 				// ground
 
-				var material_wireframe = new THREE.MeshLambertMaterial( { color: 0xffaa00, wireframe: true, wireframeLinewidth: 1 } );
-				material_wireframe.color.setHSV( 0.1, 0.2, 0.5 );
+				var material = new THREE.MeshLambertMaterial( { color: 0x7f7566, wireframe: true, wireframeLinewidth: 1 } );
 
-				mesh = new THREE.Mesh( new THREE.PlaneGeometry( 1000, 1000, 100, 100 ), material_wireframe );
+				mesh = new THREE.Mesh( new THREE.PlaneGeometry( 1000, 1000, 100, 100 ), material );
 				mesh.position.y = 0.1;
 				mesh.rotation.x = - Math.PI / 2;
 				scene.add( mesh );
@@ -210,8 +205,8 @@
 
 				controls.update( delta );
 
-				material_sphere1.color.setHSV( 0.0, 0.3 + 0.7 * ( 1 + Math.cos( time ) ) / 2, 1 );
-				material_sphere2.color.setHSV( 0.1, 0.3 + 0.7 * ( 1 + Math.sin( time ) ) / 2, 1 );
+				material_sphere1.color.setHSL( 0.0, 0.3 + 0.7 * ( 1 + Math.cos( time ) ) / 2, 0.5 );
+				material_sphere2.color.setHSL( 0.1, 0.3 + 0.7 * ( 1 + Math.sin( time ) ) / 2, 0.5 );
 
 				renderer.render( scene, camera );
 

examples/webgl_animation_cloth.html

@@ -144,8 +144,7 @@
 
 				scene = new THREE.Scene();
 
-				scene.fog = new THREE.Fog( 0x000000, 500, 10000 );
-				scene.fog.color.setHSV( 0.6, 0.2, 1 );
+				scene.fog = new THREE.Fog( 0xcce0ff, 500, 10000 );
 
 				// camera
 
@@ -160,8 +159,7 @@
 
 				scene.add( new THREE.AmbientLight( 0x666666 ) );
 
-				light = new THREE.DirectionalLight( 0xffffff, 1.75 );
-				light.color.setHSV( 0.6, 0.125, 1 );
+				light = new THREE.DirectionalLight( 0xdfebff, 1.75 );
 				light.position.set( 50, 200, 100 );
 				light.position.multiplyScalar( 1.3 );
 
@@ -183,8 +181,7 @@
 
 				scene.add( light );
 
-				light = new THREE.DirectionalLight( 0xffffff, 0.35 );
-				light.color.setHSV( 0.3, 0.95, 1 );
+				light = new THREE.DirectionalLight( 0x3dff0c, 0.35 );
 				light.position.set( 0, -1, 0 );
 
 				scene.add( light );
@@ -234,8 +231,7 @@
 
 				// ground
 
-				var initColor = new THREE.Color( 0x00ff00 );
-				initColor.setHSV( 0.25, 0.85, 0.5 );
+				var initColor = new THREE.Color( 0x497f13 );
 				var initTexture = THREE.ImageUtils.generateDataTexture( 1, 1, initColor );
 
 				var groundMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, map: initTexture } );

examples/webgl_animation_skinning.html

@@ -77,8 +77,7 @@
 				camera.position.set( 0, 185, 2500 );
 
 				scene = new THREE.Scene();
-				scene.fog = new THREE.FogExp2( 0xffffff, 0.0003 );
-				scene.fog.color.setHSV( 0.1, 0.10, 1 );
+				scene.fog = new THREE.FogExp2( 0xfff4e5, 0.0003 );
 
 				light = new THREE.DirectionalLight( 0xffffff, 1.5 );
 				light.position.set( 0, 1, 1 ).normalize();
@@ -86,9 +85,8 @@
 
 				var planeSimple = new THREE.PlaneGeometry( 200, 300 );
 				var planeTesselated = new THREE.PlaneGeometry( 100, 300, 25, 40 );
-				var matWire = new THREE.MeshBasicMaterial( { color :0x110000, wireframe: true, wireframeLinewidth: 2 } );
-				var matSolid = new THREE.MeshBasicMaterial( { color :0x330000 } );
-				matSolid.color.setHSV( 0.1, 0.75, 1 );
+				var matWire = new THREE.MeshBasicMaterial( { color: 0x110000, wireframe: true, wireframeLinewidth: 2 } );
+				var matSolid = new THREE.MeshBasicMaterial( { color: 0xffb23f } );
 
 				floor = new THREE.Mesh( planeSimple, matSolid );
 				floor.position.y = -10;

examples/webgl_animation_skinning_morph.html

@@ -82,20 +82,12 @@
 				scene = new THREE.Scene();
 
 				scene.fog = new THREE.Fog( 0xffffff, 2000, 10000 );
-				scene.fog.color.setHSV( 0.6, 0, 1 );
 
 				scene.add( camera );
 
 				// GROUND
 
-				/*
-				var groundTexture = THREE.ImageUtils.loadTexture( "textures/terrain/grasslight-big.jpg" );
-				groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
-				groundTexture.repeat.set( 16, 16 );
-				groundTexture.anisotropy = 4;
-				*/
-
-				var groundMaterial = new THREE.MeshPhongMaterial( { /*map: groundTexture,*/ emissive: 0xbbbbbb } );
+				var groundMaterial = new THREE.MeshPhongMaterial( { emissive: 0xbbbbbb } );
 				var planeGeometry = new THREE.PlaneGeometry( 16000, 16000 );
 
 				var ground = new THREE.Mesh( planeGeometry, groundMaterial );
@@ -112,10 +104,8 @@
 				scene.add( ambient );
 
 
-				var light = new THREE.DirectionalLight( 0xffffff, 1.6 );
-				light.position.set( 0, 140, 500 );
-				light.position.multiplyScalar( 1.1 );
-				light.color.setHSV( 0.6, 0.075, 1 );
+				var light = new THREE.DirectionalLight( 0xebf3ff, 1.6 );
+				light.position.set( 0, 140, 500 ).multiplyScalar( 1.1 );
 				scene.add( light );
 
 				light.castShadow = true;
@@ -135,9 +125,8 @@
 
 				//
 
-				var light = new THREE.DirectionalLight( 0xffffff, 1 );
+				var light = new THREE.DirectionalLight( 0x497f13, 1 );
 				light.position.set( 0, -1, 0 );
-				light.color.setHSV( 0.25, 0.85, 0.5 );
 				scene.add( light );
 
 				// RENDERER
@@ -233,9 +222,9 @@
 					m.skinning = true;
 					m.morphTargets = true;
 
-					m.specular.setHSV( 0, 0, 0.1 );
+					m.specular.setHSL( 0, 0, 0.1 );
 
-					m.color.setHSV( 0.6, 0, 0.6 );
+					m.color.setHSL( 0.6, 0, 0.6 );
 					m.ambient.copy( m.color );
 
 					//m.map = map;