diff --git a/docs/api/math/Color.html b/docs/api/math/Color.html
index f2f4c41998ad5c41d40bf663977addfb343f69c4..271079cc9160b2b5b33d6a3c237ba8f7be82fc47 100644
--- a/docs/api/math/Color.html
+++ b/docs/api/math/Color.html
@@ -1,7 +1,7 @@
-
+
@@ -18,7 +18,9 @@
Example
var color = new THREE.Color();
var color = new THREE.Color( 0xff0000 );
- var color = new THREE.Color("rgb(255,0,0)");
+ var color = new THREE.Color("rgb(255, 0, 0)");
+ var color = new THREE.Color("rgb(100%, 0%, 0%)");
+ var color = new THREE.Color("hsl(0, 100%, 50%)");
var color = new THREE.Color( 1, 0, 0 );
@@ -27,7 +29,7 @@
[name]( value )
- 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.
Properties
@@ -113,10 +115,10 @@
[method:Color setStyle]( [page:String style] ) [page:Color this]
- 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.
- 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.
[method:String getStyle]()
diff --git a/src/math/Color.js b/src/math/Color.js
index 5ee6e8d9f6fa10339851190c205abb7dc78f32c6..5b049c5059e846859bb829615bf0fa6b27681d74 100644
--- a/src/math/Color.js
+++ b/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':
- // unknown color
- return this;
+ 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 );
+
+ }
+
+ break;
+
+ }
+
+ } else if ( m = /^\#([A-Fa-f0-9]+)$/.exec( style ) ) {
- // hex
- 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;
-
}
- // color keywords
- if ( /^\w+$/i.test( style ) ) {
+ if ( style && style.length > 0 ) {
- // red
- this.setHex( THREE.ColorKeywords[ style ] );
+ // color keywords
+ var hex = THREE.ColorKeywords[ style ];
- return this;
+ if ( hex !== undefined ) {
+
+ // red
+ this.setHex( hex );
+
+ } else {
+
+ // unknown color
+ console.warn( 'THREE.Color: Unknown color ' + style );
+
+ }
}
- // unknown color
return this;
},