123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8" />
- <base href="../../" />
- <script src="list.js"></script>
- <script src="page.js"></script>
- <link type="text/css" rel="stylesheet" href="page.css" />
- </head>
- <body>
- <h1>[name]</h1>
- <div class="desc">
- Class representing a color.
- </div>
- <h2>Examples</h2>
- A Color can be initialised in any of the following ways:
- <code>
- //empty constructor - will default white
- var color = new THREE.Color();
- //Hexadecimal color (recommended)
- var color = new THREE.Color( 0xff0000 );
- //RGB string
- var color = new THREE.Color("rgb(255, 0, 0)");
- var color = new THREE.Color("rgb(100%, 0%, 0%)");
- //X11 color name - all 140 color names are supported.
- //Note the lack of CamelCase in the name
- var color = new THREE.Color( 'skyblue' );
- //HSL string
- var color = new THREE.Color("hsl(0, 100%, 50%)");
- //Seperate RGB values between 0 and 1
- var color = new THREE.Color( 1, 0, 0 );
- </code>
- <h2>Constructor</h2>
- <h3>[name]( [page:Multi r], [page:Float g], [page:Float b] )</h3>
- <div>
- [page:Multi r] - (optional) the red component of the color if arguments g and b are defined.
- If they are not defined, it can be a [link:https://en.wikipedia.org/wiki/Web_colors#Hex_triplet hexadecimal triplet] (recommended) or a CSS-style string or another Color instance.<br />
- [page:Float g] - (optional) The green component of the color if it is defined.<br />
- [page:Float b] - (optional) The blue component of the color if it is defined.<br /><br />
- Note that standard method of specifying color in Three is with a [link:https://en.wikipedia.org/wiki/Web_colors#Hex_triplet hexadecimal triplet], and that method is used
- throughout the rest of the documentation.<br /><br />
- When all arguments are defined then r is the red component, g is the green component and b is the blue component of the color.<br />
- When only r is defined:<br />
- <ul>
- <li>It can be a [link:https://en.wikipedia.org/wiki/Web_colors#Hex_triplet hexadecimal triplet] representing the color (recommended).</li>
- <li>It can be an another Color instance.</li>
- <li>It can be a CSS style string. For Instance:
- <ul>
- <li>'rgb(250, 0,0)'</li>
- <li>'rgb(100%,0%,0%)'</li>
- <li>'hsl(0, 100%, 50%)'</li>
- <li>'#ff0000'</li>
- <li>'#f00'</li>
- <li>'red'</li>
- </ul>
- </li>
- </ul>
- </div>
- <h2>Properties</h2>
- <h3>[property:Boolean isColor]</h3>
- <div>
- Used to check whether this or derived classes are Colors. Default is *true*.<br /><br />
- You should not change this, as it used internally for optimisation.
- </div>
- <h3>[property:Float r]</h3>
- <div>
- Red channel value between 0 and 1. Default is 1.
- </div>
- <h3>[property:Float g]</h3>
- <div>
- Green channel value between 0 and 1. Default is 1.
- </div>
- <h3>[property:Float b]</h3>
- <div>
- Blue channel value between 0 and 1. Default is 1.
- </div>
- <h2>Methods</h2>
- <h3>[method:Color add]( [page:Color color] ) </h3>
- <div>Adds the RGB values of [page:Color color] to the RGB values of this color.</div>
- <h3>[method:Color addColors]( [page:Color color1], [page:Color color2] ) </h3>
- <div>Sets this color's RGB values to the sum of the RGB values of [page:Color color1] and [page:Color color2].</div>
- <h3>[method:Color addScalar]( [page:Number s] ) </h3>
- <div>Adds [page:Number s] to the RGB values of this color.</div>
- <h3>[method:Color clone]() </h3>
- <div>Returns a new Color with the same [page:.r r], [page:.g g] and [page:.b b] parameters a this one.</div>
- <h3>[method:Color copy]( [page:Color color] ) </h3>
- <div>
- Copies the [page:.r r], [page:.g g] and [page:.b b] parameters from [page:Color color] in to this color.
- </div>
- <h3>[method:Color convertGammaToLinear]() </h3>
- <div>Converts this color from gamma to linear space (squares the values of [page:.r r], [page:.g g] and [page:.b b] ).</div>
- <h3>[method:Color convertLinearToGamma]() </h3>
- <div>Converts this color from linear to gamma space (takes the squareroot of [page:.r r], [page:.g g] and [page:.b b]).</div>
- <h3>[method:Color copyGammaToLinear]( [page:Color color], [page:Float gammaFactor] ) </h3>
- <div>
- [page:Color color] — Color to copy.<br />
- [page:Float gammaFactor] - (optional). Default is *2.0*.<br /><br />
- Copies given color making conversion from gamma to linear space,
- by taking [page:.r r], [page:.g g] and [page:.b b] to the power of [page:Float gammaFactor].
- </div>
- <h3>[method:Color copyLinearToGamma]( [page:Color color], [page:Float gammaFactor] ) </h3>
- <div>
- [page:Color color] — Color to copy.<br />
- [page:Float gammaFactor] - (optional). Default is *2.0*.<br /><br />
- Copies given color making conversion from linear to gamma space,
- by taking [page:.r r], [page:.g g] and [page:.b b] to the power of 1 / [page:Float gammaFactor].
- </div>
- <h3>[method:Boolean equals]( [page:Color color] ) </h3>
- <div>Compares [page:Color color] with this one and returns true if they are the same, false otherwise.</div>
- <h3>[method:Color fromArray]( [page:Array array], [page:Integer offset] ) </h3>
- <div>
- [page:Array array] - [page:Array] of float in the form [ [page:Float r], [page:Float g], [page:Float b] ].<br />
- [page:Integer offset] - An optional offset into the array.<br /><br />
- Sets this color's components based on an array formatted like [ [page:Float r], [page:Float g], [page:Float b] ].
- </div>
- <h3>[method:Integer getHex]()</h3>
- <div>Returns the hexadecimal value of this color.</div>
- <h3>[method:String getHexString]()</h3>
- <div>Returns the string formatted hexadecimal value of this color.</div>
- <h3>[method:Object getHSL]( [page:Object optionalTarget] )</h3>
- <div>
- [page:Object optionalTarget] — (optional) if specified, adds h, s and l keys to object (if not already present)
- and sets the results there, otherwise a new Object will be created. <br /><br />
- Convert the values [page:.r r], [page:.g g] and [page:.b b] to [link:https://en.wikipedia.org/wiki/HSL_and_HSV HSL]
- format and returns an object of the form:
- <code>
- { h: 0, s: 0, l: 0 }
- </code>
- </div>
- <h3>[method:String getStyle]()</h3>
- <div>Returns the value of this color as a CSS-style string. Example: 'rgb(255,0,0)'.</div>
- <h3>[method:Color lerp]( [page:Color color], [page:Float alpha] ) </h3>
- <div>
- [page:Color color] - color to converge on.<br />
- [page:Float alpha] - interpolation factor in the closed interval [0, 1].<br /><br />
- Linear interpolation of this colors RGB values and the RGB values of the passed argument.
- The alpha argument can be thought of as the percent between the two colors, where 0 is
- this color and 1 is the first argument.
- </div>
- <h3>[method:Color multiply]( [page:Color color] ) </h3>
- <div>Multiplies this color's RGB values by given [page:Color color]'s RGB values.</div>
- <h3>[method:Color multiplyScalar]( [page:Number s] ) </h3>
- <div>Multiplies this color's RGB values by [page:Number s].</div>
- <h3>[method:Color offsetHSL]( [page:Float h], [page:Float s], [page:Float l] ) </h3>
- <div>
- Adds given [page:Float h], [page:Float s], and [page:Float l] to this color's existing values.
- Internally this converts the [page:.r r], [page:.g g] and [page:.b b] values to HSL, adds
- [page:Float h], [page:Float s], and [page:Float l] and then converts back to RGB.
- </div>
- <h3>[method:Color set]( [page:Multi value] ) </h3>
- <div>
- [page:Multi value] - Value to set this color to.<br /><br />
- See the Constructor above for full details of what [page:Multi value] can be.
- Delegates to [page:.copy], .setStyle, or .setHex depending on input type.
- </div>
- <h3>[method:Color setHex]( [page:Integer hex] ) </h3>
- <div>
- [page:Integer hex] — [link:https://en.wikipedia.org/wiki/Web_colors#Hex_triplet hexadecimal triplet] format.<br /><br />
- Sets this color from a hexadecimal value.
- </div>
- <h3>[method:Color setHSL]( [page:Float h], [page:Float s], [page:Float l] ) </h3>
- <div>
- [page:Float h] — hue value between 0.0 and 1.0 <br />
- [page:Float s] — saturation value between 0.0 and 1.0 <br />
- [page:Float l] — lightness value between 0.0 and 1.0<br /><br />
- Sets color from HSL values.
- </div>
- <h3>[method:Color setRGB]( [page:Float r], [page:Float g], [page:Float b] ) </h3>
- <div>
- [page:Float r] — Red channel value between 0 and 1.<br />
- [page:Float g] — Green channel value between 0 and 1.<br />
- [page:Float b] — Blue channel value between 0 and 1.<br /><br />
- Sets this color from RGB values.
- </div>
- <h3>[method:Color setScalar]( [page:Float scalar] ) </h3>
- <div>
- [page:Float scalar] — a value between 0.0 and 1.0.<br /><br />
- Sets all three color components to the value [page:Float scalar].
- </div>
- <h3>[method:Color setStyle]( [page:String style] ) </h3>
- <div>
- [page:String style] — color as a CSS-style string.<br /><br />
- 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" ( or any [link:https://en.wikipedia.org/wiki/X11_color_names#Color_name_chart X11 color name]
- - all 140 color names are supported ).<br />
- 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.<br /><br />
- Note that for X11 color names, multiple words such as Dark Orange become the string 'darkorange' (all lowercase).
- </div>
- <h3>[method:Color sub]( [page:Color color] ) </h3>
- <div>
- Subtracts RGB components of the given color from the RGB components of this color.
- If a component is negative, it is set to zero.
- </div>
- <h3>[method:Array toArray]( [page:Array array], [page:Integer offset] ) </h3>
- <div>
- [page:Array array] - An optional array to store the color to. <br />
- [page:Integer offset] - An optional offset into the array.<br /><br />
- Returns an array of the form [ r, g, b ].
- </div>
- <h2>Source</h2>
- [link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
- </body>
- </html>
|