123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8" />
- <base href="../../../" />
- <script src="page.js"></script>
- <link type="text/css" rel="stylesheet" href="page.css" />
- </head>
- <body>
- <h1>[name]</h1>
- <p class="desc">Class representing a color.</p>
- <p>
- Iterating through a [name] instance will yield its components (r, g, b) in
- the corresponding order.
- </p>
- <h2>Code Examples</h2>
- <p>A Color can be initialised in any of the following ways:</p>
- <code>
- //empty constructor - will default white
- const color1 = new THREE.Color();
- //Hexadecimal color (recommended)
- const color2 = new THREE.Color( 0xff0000 );
- //RGB string
- const color3 = new THREE.Color("rgb(255, 0, 0)");
- const color4 = new THREE.Color("rgb(100%, 0%, 0%)");
- //X11 color name - all 140 color names are supported.
- //Note the lack of CamelCase in the name
- const color5 = new THREE.Color( 'skyblue' );
- //HSL string
- const color6 = new THREE.Color("hsl(0, 100%, 50%)");
- //Separate RGB values between 0 and 1
- const color7 = new THREE.Color( 1, 0, 0 );
- </code>
- <h2>Constructor</h2>
- <h3>
- [name]( [param:Color_Hex_or_String r], [param:Float g], [param:Float b] )
- </h3>
- <p>
- [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 />
- Note that standard method of specifying color in three.js 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 [page:Color_Hex_or_String r] is the
- red component, [page:Float g] is the green component and [page:Float b] is
- the blue component of the color.<br />
- When only [page:Color_Hex_or_String r] is defined:<br />
- </p>
- <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 example:
- <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>
- <h2>Properties</h2>
- <h3>[property:Boolean isColor]</h3>
- <p>Read-only flag to check if a given object is of type [name].</p>
- <h3>[property:Float r]</h3>
- <p>Red channel value between `0` and `1`. Default is `1`.</p>
- <h3>[property:Float g]</h3>
- <p>Green channel value between `0` and `1`. Default is `1`.</p>
- <h3>[property:Float b]</h3>
- <p>Blue channel value between `0` and `1`. Default is `1`.</p>
- <h2>Methods</h2>
- <h3>[method:this add]( [param:Color color] )</h3>
- <p>
- Adds the RGB values of [page:Color color] to the RGB values of this color.
- </p>
- <h3>
- [method:this addColors]( [param:Color color1], [param:Color color2] )
- </h3>
- <p>
- Sets this color's RGB values to the sum of the RGB values of [page:Color color1] and [page:Color color2].
- </p>
- <h3>[method:this addScalar]( [param:Number s] )</h3>
- <p>Adds [page:Number s] to the RGB values of this color.</p>
- <h3>[method:this applyMatrix3]( [param:Matrix3 m] )</h3>
- <p>
- Applies the transform [page:Matrix3 m] to this color's RGB components.
- </p>
- <h3>[method:Color clone]()</h3>
- <p>
- Returns a new Color with the same [page:.r r], [page:.g g] and [page:.b b]
- values as this one.
- </p>
- <h3>[method:this copy]( [param:Color color] )</h3>
- <p>
- Copies the [page:.r r], [page:.g g] and [page:.b b] parameters from
- [page:Color color] in to this color.
- </p>
- <h3>[method:this convertLinearToSRGB]()</h3>
- <p>Converts this color from linear space to sRGB space.</p>
- <h3>[method:this convertSRGBToLinear]()</h3>
- <p>Converts this color from sRGB space to linear space.</p>
- <h3>[method:this copyLinearToSRGB]( [param:Color color] )</h3>
- <p>
- [page:Color color] — Color to copy.<br />
- Copies the given color into this color, and then converts this color from
- linear space to sRGB space.
- </p>
- <h3>[method:this copySRGBToLinear]( [param:Color color] )</h3>
- <p>
- [page:Color color] — Color to copy.<br />
- Copies the given color into this color, and then converts this color from
- sRGB space to linear space.
- </p>
- <h3>[method:Boolean equals]( [param:Color color] )</h3>
- <p>
- Compares the RGB values of [page:Color color] with those of this object.
- Returns true if they are the same, false otherwise.
- </p>
- <h3>
- [method:this fromArray]( [param:Array array], [param:Integer offset] )
- </h3>
- <p>
- [page:Array array] - [page:Array] of floats 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] ].
- </p>
- <h3>
- [method:this fromBufferAttribute]( [param:BufferAttribute attribute], [param:Integer index] )
- </h3>
- <p>
- [page:BufferAttribute attribute] - the source attribute.<br />
- [page:Integer index] - index in the attribute.<br /><br />
- Sets this color's components from the [page:BufferAttribute attribute].
- </p>
- <h3>
- [method:Integer getHex]( [param:string colorSpace] = SRGBColorSpace )
- </h3>
- <p>Returns the hexadecimal value of this color.</p>
- <h3>
- [method:String getHexString]( [param:string colorSpace] = SRGBColorSpace )
- </h3>
- <p>
- Returns the hexadecimal value of this color as a string (for example,
- 'FFFFFF').
- </p>
- <h3>
- [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,
- s and l keys to the object (if not already present).<br /><br />
- Convert this Color's [page:.r r], [page:.g g] and [page:.b b] values 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>
- </p>
- <h3>
- [method:Color getRGB]( [param:Color target], [param:string colorSpace] = LinearSRGBColorSpace )
- </h3>
- <p>
- [page:Color target] — the result will be copied into this object.<br /><br />
- Returns the RGB values of this color as an instance of [page:Color].
- </p>
- <h3>
- [method:String getStyle]( [param:string colorSpace] = SRGBColorSpace )
- </h3>
- <p>
- Returns the value of this color as a CSS style string. Example:
- `rgb(255,0,0)`.
- </p>
- <h3>[method:this lerp]( [param:Color color], [param:Float alpha] )</h3>
- <p>
- [page:Color color] - color to converge on.<br />
- [page:Float alpha] - interpolation factor in the closed interval `[0,
- 1]`.<br /><br />
- Linearly interpolates this color's RGB values toward the RGB values of the
- passed argument. The alpha argument can be thought of as the ratio between
- the two colors, where `0.0` is this color and `1.0` is the first argument.
- </p>
- <h3>
- [method:this lerpColors]( [param:Color color1], [param:Color color2], [param:Float alpha] )
- </h3>
- <p>
- [page:Color color1] - the starting [page:Color].<br />
- [page:Color color2] - [page:Color] to interpolate towards.<br />
- [page:Float alpha] - interpolation factor, typically in the closed
- interval `[0, 1]`.<br /><br />
- Sets this color to be the color linearly interpolated between [page:Color color1]
- and [page:Color color2] where alpha is the percent distance along
- the line connecting the two colors - alpha = 0 will be [page:Color color1],
- and alpha = 1 will be [page:Color color2].
- </p>
- <h3>[method:this lerpHSL]( [param:Color color], [param:Float alpha] )</h3>
- <p>
- [page:Color color] - color to converge on.<br />
- [page:Float alpha] - interpolation factor in the closed interval `[0,
- 1]`.<br /><br />
- Linearly interpolates this color's HSL values toward the HSL values of the
- passed argument. It differs from the classic [page:.lerp] by not
- interpolating straight from one color to the other, but instead going
- through all the hues in between those two colors. The alpha argument can
- be thought of as the ratio between the two colors, where 0.0 is this color
- and 1.0 is the first argument.
- </p>
- <h3>[method:this multiply]( [param:Color color] )</h3>
- <p>
- Multiplies this color's RGB values by the given [page:Color color]'s RGB
- values.
- </p>
- <h3>[method:this multiplyScalar]( [param:Number s] )</h3>
- <p>Multiplies this color's RGB values by [page:Number s].</p>
- <h3>
- [method:this offsetHSL]( [param:Float h], [param:Float s], [param:Float l] )
- </h3>
- <p>
- Adds the given [page:Float h], [page:Float s], and [page:Float l] to this
- color's values. Internally, this converts the color's [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 the color back to
- RGB.
- </p>
- <h3>[method:this set]( [param:Color_Hex_or_String r], [param:Float g], [param:Float b] )</h3>
- <p>
- [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 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>
- <p>
- Sets this colors's [page:.r r], [page:.g g] and [page:.b b] components
- from the x, y, and z components of the specified [page:Vector3 vector].
- </p>
- <h3>
- [method:this setHex]( [param:Integer hex], [param:string colorSpace] = SRGBColorSpace )
- </h3>
- <p>
- [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.
- </p>
- <h3>
- [method:this setHSL]( [param:Float h], [param:Float s], [param:Float l], [param:string colorSpace] = LinearSRGBColorSpace )
- </h3>
- <p>
- [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.
- </p>
- <h3>
- [method:this setRGB]( [param:Float r], [param:Float g], [param:Float b], [param:string colorSpace] = LinearSRGBColorSpace )
- </h3>
- <p>
- [page:Float r] — Red channel value between `0.0` and `1.0`.<br />
- [page:Float g] — Green channel value between `0.0` and `1.0`.<br />
- [page:Float b] — Blue channel value between `0.0` and `1.0`.<br /><br />
- Sets this color from RGB values.
- </p>
- <h3>[method:this setScalar]( [param:Float scalar] )</h3>
- <p>
- [page:Float scalar] — a value between `0.0` and `1.0`.<br /><br />
- Sets all three color components to the value [page:Float scalar].
- </p>
- <h3>
- [method:this setStyle]( [param:String style], [param:string colorSpace] = SRGBColorSpace )
- </h3>
- <p>
- [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 />
- Translucent 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'.
- </p>
- <h3>
- [method:this setColorName]( [param:String style], [param:string colorSpace] = SRGBColorSpace )
- </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:this sub]( [param:Color color] )</h3>
- <p>
- Subtracts the RGB components of the given color from the RGB components of
- this color. If this results in a negative component, that component is set
- to zero.
- </p>
- <h3>
- [method:Array toArray]( [param:Array array], [param:Integer offset] )
- </h3>
- <p>
- [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 ].
- </p>
- <h3>[method:Number toJSON]()</h3>
- <p>
- This methods defines the serialization result of [name]. Returns the color
- as a hexadecimal value.
- </p>
- <h2>Source</h2>
- <p>
- [link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
- </p>
- </body>
- </html>
|