Merge pull request #14784 from pauloddr/patch-color-improvements

Color: add .setColorName() and Color.NAMES

docs/api/en/math/Color.html

@@ -126,7 +126,7 @@ var color = new THREE.Color( 1, 0, 0 );
 		[page:Float gammaFactor] - (optional). Default is *2.0*.<br /><br />
 		Converts this color from gamma space to linear space by taking [page:.r r], [page:.g g] and [page:.b b] to the power of [page:Float gammaFactor].
 		</p>
-		
+
 		<h3>[method:Color convertLinearToGamma]( [param:Float gammaFactor] ) </h3>
 		<p>
 		[page:Float gammaFactor] - (optional). Default is *2.0*.<br /><br />
@@ -302,6 +302,15 @@ var color = new THREE.Color( 1, 0, 0 );
 		Note that for X11 color names, multiple words such as Dark Orange become the string 'darkorange' (all lowercase).
 		</p>
 
+		<h3>[method:Color setColorName]( [param:String style] ) </h3>
+		<p>
+		[page:String style] — color name ( from [link:https://en.wikipedia.org/wiki/X11_color_names#Color_name_chart X11 color names] ).<br /><br />
+
+		Sets this color from a color name. Faster than [page:.setStyle] method if you don't need the other CSS-style formats.<br/><br/>
+
+		For convenience, the list of names is exposed in Color.NAMES as a hash: <code>Color.NAMES.aliceblue // returns 0xF0F8FF</code>
+		</p>
+
 		<h3>[method:Color sub]( [param:Color color] ) </h3>
 		<p>
 		Subtracts the RGB components of the given color from the RGB components of this color.

src/math/Color.d.ts

@@ -68,6 +68,13 @@ export class Color {
 	 */
 	setStyle( style: string ): Color;
 
+	/**
+	 * Sets this color from a color name.
+	 * Faster than {@link Color#setStyle .setStyle()} method if you don't need the other CSS-style formats.
+	 * @param style Color name in X11 format.
+	 */
+	setColorName( style: string ): Color;
+
 	/**
 	 * Clones this color.
 	 */
@@ -183,4 +190,9 @@ export class Color {
 	 */
 	toArray( xyz: ArrayLike<number>, offset?: number ): ArrayLike<number>;
 
+	/**
+	 * List of X11 color names.
+	 */
+	static NAMES: Record<string, number>;
+
 }

src/math/Color.js

@@ -261,20 +261,28 @@ Object.assign( Color.prototype, {
 
 		if ( style && style.length > 0 ) {
 
-			// color keywords
-			var hex = _colorKeywords[ style ];
+			return this.setColorName( style );
 
-			if ( hex !== undefined ) {
+		}
 
-				// red
-				this.setHex( hex );
+		return this;
 
-			} else {
+	},
 
-				// unknown color
-				console.warn( 'THREE.Color: Unknown color ' + style );
+	setColorName: function ( style ) {
 
-			}
+		// color keywords
+		var hex = _colorKeywords[ style ];
+
+		if ( hex !== undefined ) {
+
+			// red
+			this.setHex( hex );
+
+		} else {
+
+			// unknown color
+			console.warn( 'THREE.Color: Unknown color ' + style );
 
 		}
 
@@ -580,5 +588,6 @@ Object.assign( Color.prototype, {
 
 } );
 
+Color.NAMES = _colorKeywords;
 
 export { Color };

test/unit/src/math/Color.tests.js

@@ -28,6 +28,13 @@ export default QUnit.module( 'Maths', () => {
 
 		} );
 
+		// EXPOSED CONSTANTS
+		QUnit.test( "Color.NAMES", ( assert ) => {
+
+			assert.ok( Color.NAMES.aliceblue == 0xF0F8FF, "Exposed Color.NAMES" );
+
+		} );
+
 		// PUBLIC STUFF
 		QUnit.test( "isColor", ( assert ) => {
 
@@ -137,6 +144,21 @@ export default QUnit.module( 'Maths', () => {
 			assert.ok( a.g == 0xAB / 255, "Green: " + a.g );
 			assert.ok( a.b == 0xC1 / 255, "Blue: " + a.b );
 
+			a.setStyle( "aliceblue" );
+			assert.ok( a.r == 0xF0 / 255, "Red: " + a.r );
+			assert.ok( a.g == 0xF8 / 255, "Green: " + a.g );
+			assert.ok( a.b == 0xFF / 255, "Blue: " + a.b );
+
+		} );
+
+		QUnit.test( "setColorName", ( assert ) => {
+
+			var c = new Color();
+			var res = c.setColorName( "aliceblue" );
+
+			assert.ok( c.getHex() == 0xF0F8FF, "Hex: " + c.getHex() );
+			assert.ok( c == res, "Returns Self" );
+
 		} );
 
 		QUnit.test( "clone", ( assert ) => {
@@ -343,16 +365,6 @@ export default QUnit.module( 'Maths', () => {
 
 		} );
 
-		QUnit.test( "setRGB", ( assert ) => {
-
-			var c = new Color();
-			c.setRGB( 1, 0.2, 0.1 );
-			assert.ok( c.r == 1, "Red: " + c.r );
-			assert.ok( c.g == 0.2, "Green: " + c.g );
-			assert.ok( c.b == 0.1, "Blue: " + c.b );
-
-		} );
-
 		QUnit.test( "lerp", ( assert ) => {
 
 			var c = new Color();