Handling of color with alpha

Addresses comments in #6898

docs/api/math/Color.html

@@ -18,7 +18,9 @@
 		<h2>Example</h2>
 		<code>var color = new THREE.Color();</code>
 		<code>var color = new THREE.Color( 0xff0000 );</code>
-		<code>var color = new THREE.Color("rgb(255,0,0)");</code>
+		<code>var color = new THREE.Color("rgb(255, 0, 0)");</code>
+		<code>var color = new THREE.Color("rgb(100%, 0%, 0%)");</code>
+		<code>var color = new THREE.Color("hsl(0, 100%, 50%)");</code>
 		<code>var color = new THREE.Color( 1, 0, 0 );</code>
 
 
@@ -27,7 +29,7 @@
 
 		<h3>[name]( value )</h3>
 		<div>
-		value — optional argument that sets initial color.  Can be a hexadecimal or a CSS-style string, for example, "rgb(250, 0,0)", "rgb(100%,0%,0%)", "#ff0000", "#f00", or "red", or three arguments that represent color channels.
+		value — optional argument that sets initial color.  Can be a hexadecimal or a CSS-style string, for example, "rgb(250, 0,0)", "rgb(100%,0%,0%)", "hsl(0, 100%, 50%)", "#ff0000", "#f00", or "red", or three arguments that represent color channels.
 		</div>
 
 		<h2>Properties</h2>
@@ -113,10 +115,10 @@
 
 		<h3>[method:Color setStyle]( [page:String style] ) [page:Color this]</h3>
 		<div>
-		style — color as a CSS-style string, for example, "rgb(250, 0,0)", "rgb(100%,0%,0%)", "#ff0000", "#f00", or "red"
+		style — color as a CSS-style string.
 		</div>
 		<div>
-		Sets this color	from a CSS-style string.
+		Sets this color from a CSS-style string. For example, "rgb(250, 0,0)", "rgb(100%, 0%, 0%)", "hsl(0, 100%, 50%)", "#ff0000", "#f00", or "red". Transluent colors such as "rgba(255, 0, 0, 0.5)" and "hsla(0, 100%, 50%, 0.5)" are also accepted, but the alpha-channel coordinate will be discarded.
 		</div>
 
 		<h3>[method:String getStyle]()</h3>

src/math/Color.js

@@ -105,11 +105,27 @@ THREE.Color.prototype = {
 
 	setStyle: function ( style ) {
 
+		var parseAlpha = function ( strAlpha ) {
+
+			var alpha = parseFloat( strAlpha );
+
+			if ( alpha < 1 ) {
+
+				console.warn( 'THREE.Color: Alpha component of color ' + style + ' will be ignored.' );
+
+			}
+
+			return alpha;
+
+		}
+
+
 		var m;
 
-		// rgb / hsl
 		if ( m = /^((?:rgb|hsl)a?)\(\s*([^\)]*)\)/.exec( style ) ) {
 
+			// rgb / hsl
+
 			var color;
 			var name = m[ 1 ];
 			var components = m[ 2 ];
@@ -117,9 +133,8 @@ THREE.Color.prototype = {
 			switch ( name ) {
 
 				case 'rgb':
-				case 'rgba':
 
-					if ( color = /^(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/.exec( components ) ) {
+					if ( color = /^(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*$/.exec( components ) ) {
 
 						// rgb(255,0,0)
 						this.r = Math.min( 255, parseInt( color[ 1 ], 10 ) ) / 255;
@@ -130,7 +145,7 @@ THREE.Color.prototype = {
 
 					}
 
-					if ( color = /^(\d+)\%\s*,\s*(\d+)\%\s*,\s*(\d+)\%/.exec( components ) ) {
+					if ( color = /^(\d+)\%\s*,\s*(\d+)\%\s*,\s*(\d+)\%\s*$/.exec( components ) ) {
 
 						// rgb(100%,0%,0%)
 						this.r = Math.min( 100, parseInt( color[ 1 ], 10 ) ) / 100;
@@ -143,13 +158,40 @@ THREE.Color.prototype = {
 
 					break;
 
+				case 'rgba':
+
+					if ( color = /^(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*([0-9]*\.?[0-9]+)\s*$/.exec( components ) ) {
+
+						// rgba(255,0,0,0.5)
+						this.r = Math.min( 255, parseInt( color[ 1 ], 10 ) ) / 255;
+						this.g = Math.min( 255, parseInt( color[ 2 ], 10 ) ) / 255;
+						this.b = Math.min( 255, parseInt( color[ 3 ], 10 ) ) / 255;
+						parseAlpha( color[ 4 ] );
+
+						return this;
+
+					}
+
+					if ( color = /^(\d+)\%\s*,\s*(\d+)\%\s*,\s*(\d+)\%\s*,\s*([0-9]*\.?[0-9]+)\s*$/.exec( components ) ) {
+
+						// rgba(100%,0%,0%,0.5)
+						this.r = Math.min( 100, parseInt( color[ 1 ], 10 ) ) / 100;
+						this.g = Math.min( 100, parseInt( color[ 2 ], 10 ) ) / 100;
+						this.b = Math.min( 100, parseInt( color[ 3 ], 10 ) ) / 100;
+						parseAlpha( color[ 4 ] );
+
+						return this;
+
+					}
+
+					break;
+
 				case 'hsl':
-				case 'hsla':
 
-					if ( color = /^([0-9]*\.?[0-9]+)\s*,\s*(\d+)\%\s*,\s*(\d+)\%/.exec( components ) ) {
+					if ( color = /^([0-9]*\.?[0-9]+)\s*,\s*(\d+)\%\s*,\s*(\d+)\%\s*$/.exec( components ) ) {
 
 						// hsl(120,50%,50%)
-						var h = parseFloat( color[ 1 ], 10 );
+						var h = parseFloat( color[ 1 ] );
 						var s = parseInt( color[ 2 ], 10 ) / 100;
 						var l = parseInt( color[ 3 ], 10 ) / 100;
 
@@ -159,33 +201,43 @@ THREE.Color.prototype = {
 
 					break;
 
+				case 'hsla':
+
+					if ( color = /^([0-9]*\.?[0-9]+)\s*,\s*(\d+)\%\s*,\s*(\d+)\%\s*,\s*([0-9]*\.?[0-9]+)\s*$/.exec( components ) ) {
+
+						// hsla(120,50%,50%,0.5)
+						var h = parseFloat( color[ 1 ] );
+						var s = parseInt( color[ 2 ], 10 ) / 100;
+						var l = parseInt( color[ 3 ], 10 ) / 100;
+						parseAlpha( color[ 4 ] );
+
+						return this.setHSL( h, s, l );
+
 					}
 
-			// unknown color
-			return this;
+					break;
 
 			}
 
-		// hex
-		if ( m = /^\#([A-Fa-f0-9]+)$/.exec( style ) ) {
+		} else if ( m = /^\#([A-Fa-f0-9]+)$/.exec( style ) ) {
+
+			// hex color
 
 			var hex = m[ 1 ];
 			var size = hex.length;
 
 			if ( size === 3 ) {
 
-				// # ff0
+				// #ff0
 				this.r = parseInt( hex.charAt( 0 ) + hex.charAt( 0 ), 16 ) / 255;
 				this.g = parseInt( hex.charAt( 1 ) + hex.charAt( 1 ), 16 ) / 255;
 				this.b = parseInt( hex.charAt( 2 ) + hex.charAt( 2 ), 16 ) / 255;
 
 				return this;
 
-			}
-
-			if ( size === 6 ) {
+			} else if ( size === 6 ) {
 
-				// #fa11ac
+				// #ff0000
 				this.r = parseInt( hex.charAt( 0 ) + hex.charAt( 1 ), 16 ) / 255;
 				this.g = parseInt( hex.charAt( 2 ) + hex.charAt( 3 ), 16 ) / 255;
 				this.b = parseInt( hex.charAt( 4 ) + hex.charAt( 5 ), 16 ) / 255;
@@ -194,22 +246,27 @@ THREE.Color.prototype = {
 
 			}
 
-			// unknown color
-			return this;
-
 		}
 
+		if ( style && style.length > 0 ) {
+
 			// color keywords
-		if ( /^\w+$/i.test( style ) ) {
+			var hex = THREE.ColorKeywords[ style ];
+
+			if ( hex !== undefined ) {
 
 				// red
-			this.setHex( THREE.ColorKeywords[ style ] );
+				this.setHex( hex );
 
-			return this;
+			} else {
+
+				// unknown color
+				console.warn( 'THREE.Color: Unknown color ' + style );
+
+			}
 
 		}
 
-		// unknown color
 		return this;
 
 	},