Explorar el Código

Color: Let `set()` accept RGB values. (#25999)

* Color: Let `set()` accept RGB values.

* Update Color.tests.js
Michael Herzog hace 2 años
padre
commit
a16bac7ea2

+ 12 - 14
docs/api/en/math/Color.html

@@ -51,7 +51,7 @@ const color7 = new THREE.Color( 1, 0, 0 );
 			[page:Float b] are defined, the red component of the color. If they are
 			not defined, it can be a
 			[link:https://en.wikipedia.org/wiki/Web_colors#Hex_triplet hexadecimal triplet] (recommended), 
-			a CSS-style string, or another Color instance.<br />
+			a CSS-style string, or another `Color` instance.<br />
 			[page:Float g] - (optional) If it is defined, the green component of the
 			color.<br />
 			[page:Float b] - (optional) If it is defined, the blue component of the
@@ -197,8 +197,7 @@ const color7 = new THREE.Color( 1, 0, 0 );
 		</p>
 
 		<h3>
-			[method:Object getHSL]( [param:Object target], [param:string colorSpace] =
-			LinearSRGBColorSpace )
+			[method:Object getHSL]( [param:Object target], [param:string colorSpace] = LinearSRGBColorSpace )
 		</h3>
 		<p>
 			[page:Object target] — the result will be copied into this Object. Adds h,
@@ -218,8 +217,7 @@ const color7 = new THREE.Color( 1, 0, 0 );
 		</p>
 
 		<h3>
-			[method:Color getRGB]( [param:Color target], [param:string colorSpace] =
-			SRGBColorSpace )
+			[method:Color getRGB]( [param:Color target], [param:string colorSpace] = SRGBColorSpace )
 		</h3>
 		<p>
 			[page:Color target] — the result will be copied into this object.<br /><br />
@@ -295,13 +293,15 @@ const color7 = new THREE.Color( 1, 0, 0 );
 			RGB.
 		</p>
 
-		<h3>[method:this set]( [param:Color_Hex_or_String value] )</h3>
+		<h3>[method:this set]( [param:Color_Hex_or_String r], [param:Float g], [param:Float b] )</h3>
 		<p>
-			[page:Color_Hex_or_String value] - Value to set this color to.<br /><br />
+			[page:Color_Hex_or_String r] - (optional) If arguments [page:Float g] and [page:Float b] are defined, the red component of the color. If they are
+			not defined, it can be a [link:https://en.wikipedia.org/wiki/Web_colors#Hex_triplet hexadecimal triplet] (recommended),  a CSS-style string, or another `Color` instance.<br />
+			[page:Float g] - (optional) If it is defined, the green component of the color.<br />
+			[page:Float b] - (optional) If it is defined, the blue component of the color.<br /><br />
 
-			See the Constructor above for full details of what
-			[page:Color_Hex_or_String value] can be. Delegates to [page:.copy],
-			[page:.setStyle], or [page:.setHex] depending on input type.
+			See the Constructor above for full details about possible arguments. Delegates to [page:.copy],
+			[page:.setStyle], [page:.setRGB] or [page:.setHex] depending on input type.
 		</p>
 
 		<h3>[method:this setFromVector3]( [param:Vector3 vector] )</h3>
@@ -311,8 +311,7 @@ const color7 = new THREE.Color( 1, 0, 0 );
 		</p>
 
 		<h3>
-			[method:this setHex]( [param:Integer hex], [param:string colorSpace] =
-			SRGBColorSpace )
+			[method:this setHex]( [param:Integer hex], [param:string colorSpace] = SRGBColorSpace )
 		</h3>
 		<p>
 			[page:Integer hex] —
@@ -351,8 +350,7 @@ const color7 = new THREE.Color( 1, 0, 0 );
 		</p>
 
 		<h3>
-			[method:this setStyle]( [param:String style], [param:string colorSpace] =
-			SRGBColorSpace )
+			[method:this setStyle]( [param:String style], [param:string colorSpace] = SRGBColorSpace )
 		</h3>
 		<p>
 			[page:String style] — color as a CSS-style string.<br /><br />

+ 8 - 5
docs/api/it/math/Color.html

@@ -51,7 +51,7 @@ const color7 = new THREE.Color( 1, 0, 0 );
 		<p>
 		[page:Color_Hex_or_String r] - (opzionale) Se gli argomenti [page:Float g] e [page:Float b] sono definiti, indica il componente rosso del colore.
 		Se non sono definiti, questo può essere una [link:https://en.wikipedia.org/wiki/Web_colors#Hex_triplet tripletta esadecimale] (consigliato), 
-		una stringa CSS-style, o un'altra istanza Color.<br />
+		una stringa CSS-style, o un'altra istanza `Color`.<br />
 		[page:Float g] - (opzionale) Se è definito, indica la componente verde del colore.<br />
 		[page:Float b] - (opzionale) Se è definito, indica la componente blu del colore.<br /><br />
 
@@ -237,12 +237,15 @@ const color7 = new THREE.Color( 1, 0, 0 );
 			aggiunge [page:Float h], [page:Float s], e [page:Float l] e poi converte il colore nero a RGB.
 		</p>
 
-		<h3>[method:this set]( [param:Color_Hex_or_String value] ) </h3>
+		<h3>[method:this set]( [param:Color_Hex_or_String r], [param:Float g], [param:Float b] )</h3>
 		<p>
-		[page:Color_Hex_or_String value] - Valore a cui impostare il valore.<br /><br />
+			[page:Color_Hex_or_String r] - (optional) If arguments [page:Float g] and [page:Float b] are defined, the red component of the color. If they are
+			not defined, it can be a [link:https://en.wikipedia.org/wiki/Web_colors#Hex_triplet hexadecimal triplet] (recommended),  a CSS-style string, or another `Color` instance.<br />
+			[page:Float g] - (optional) If it is defined, the green component of the color.<br />
+			[page:Float b] - (optional) If it is defined, the blue component of the color.<br /><br />
 
-		Vedi il costruttore sopra per i dettagli completi di quale [page:Color_Hex_or_String valore] può assumere.
-		Delega a [page:.copy], [page:.setStyle], o [page:.setHex] a seconda del tipo di input.
+			See the Constructor above for full details about possible arguments. Delegates to [page:.copy],
+			[page:.setStyle], [page:.setRGB] or [page:.setHex] depending on input type.
 		</p>
 
 		<h3>[method:this setHex]( [param:Integer hex], [param:string colorSpace] = SRGBColorSpace ) </h3>

+ 8 - 5
docs/api/zh/math/Color.html

@@ -49,7 +49,7 @@
 		<h3>[name]( [param:Color_Hex_or_String r], [param:Float g], [param:Float b] )</h3>
 		<p>
 		[page:Color_Hex_or_String r] - (可选参数)  如果参数g和b被定义,则r表示颜色中的红色分量。
-		如果未被定义,r可以是一个十六进制 [link:https://en.wikipedia.org/wiki/Web_colors#Hex_triplet hexadecimal triplet] 颜色值或CSS样式的字符串或一个Color实例。<br />
+		如果未被定义,r可以是一个十六进制 [link:https://en.wikipedia.org/wiki/Web_colors#Hex_triplet hexadecimal triplet] 颜色值或CSS样式的字符串或一个`Color`实例。<br />
 		[page:Float g] - (可选参数) 如果被定义,表示颜色中的绿色分量。<br />
 		[page:Float b] - (可选参数) 如果被定义,表示颜色中的蓝色分量。<br /><br />
 
@@ -233,12 +233,15 @@
 			相加,最后再将结果转成RGB值。
 		</p>
 
-		<h3>[method:this set]( [param:Color_Hex_or_String value] ) </h3>
+		<h3>[method:this set]( [param:Color_Hex_or_String r], [param:Float g], [param:Float b] )</h3>
 		<p>
-		[page:Color_Hex_or_String value] - 用于设置该颜色的值。<br /><br />
+			[page:Color_Hex_or_String r] - (optional) If arguments [page:Float g] and [page:Float b] are defined, the red component of the color. If they are
+			not defined, it can be a [link:https://en.wikipedia.org/wiki/Web_colors#Hex_triplet hexadecimal triplet] (recommended),  a CSS-style string, or another `Color` instance.<br />
+			[page:Float g] - (optional) If it is defined, the green component of the color.<br />
+			[page:Float b] - (optional) If it is defined, the blue component of the color.<br /><br />
 
-		有关 [page:Color_Hex_or_String value] 的详细信息,请参阅上面的构造函数。
-		根据输入类型,将会委托给 [page:.copy], [page:.setStyle], 或者 [page:.setHex] 函数处理。
+			See the Constructor above for full details about possible arguments. Delegates to [page:.copy],
+			[page:.setStyle], [page:.setRGB] or [page:.setHex] depending on input type.
 		</p>
 
 		<h3>[method:this setHex]( [param:Integer hex], [param:string colorSpace] = SRGBColorSpace ) </h3>

+ 16 - 11
src/math/Color.js

@@ -51,30 +51,35 @@ class Color {
 		this.g = 1;
 		this.b = 1;
 
+		return this.set( r, g, b );
+
+	}
+
+	set( r, g, b ) {
+
 		if ( g === undefined && b === undefined ) {
 
 			// r is THREE.Color, hex or string
-			return this.set( r );
 
-		}
+			const value = r;
 
-		return this.setRGB( r, g, b );
+			if ( value && value.isColor ) {
 
-	}
+				this.copy( value );
 
-	set( value ) {
+			} else if ( typeof value === 'number' ) {
 
-		if ( value && value.isColor ) {
+				this.setHex( value );
 
-			this.copy( value );
+			} else if ( typeof value === 'string' ) {
 
-		} else if ( typeof value === 'number' ) {
+				this.setStyle( value );
 
-			this.setHex( value );
+			}
 
-		} else if ( typeof value === 'string' ) {
+		} else {
 
-			this.setStyle( value );
+			this.setRGB( r, g, b );
 
 		}
 

+ 4 - 0
test/unit/src/math/Color.tests.js

@@ -68,6 +68,7 @@ export default QUnit.module( 'Maths', () => {
 			const b = new Color( 0.5, 0, 0 );
 			const c = new Color( 0xFF0000 );
 			const d = new Color( 0, 1.0, 0 );
+			const e = new Color( 0.5, 0.5, 0.5 );
 
 			a.set( b );
 			assert.ok( a.equals( b ), 'Set with Color instance' );
@@ -78,6 +79,9 @@ export default QUnit.module( 'Maths', () => {
 			a.set( 'rgb(0,255,0)' );
 			assert.ok( a.equals( d ), 'Set with style' );
 
+			a.set( 0.5, 0.5, 0.5 );
+			assert.ok( a.equals( e ), 'Set with r,g,b components' );
+
 		} );
 
 		QUnit.test( 'setScalar', ( assert ) => {