Color.html 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <base href="../../" />
  6. <script src="list.js"></script>
  7. <script src="page.js"></script>
  8. <link type="text/css" rel="stylesheet" href="page.css" />
  9. </head>
  10. <body>
  11. <h1>[name]</h1>
  12. <div class="desc">
  13. Class representing a color.
  14. </div>
  15. <h2>Examples</h2>
  16. A Color can be initialised in any of the following ways:
  17. <code>
  18. //empty constructor - will default white
  19. var color = new THREE.Color();
  20. //Hexadecimal color (recommended)
  21. var color = new THREE.Color( 0xff0000 );
  22. //RGB string
  23. var color = new THREE.Color("rgb(255, 0, 0)");
  24. var color = new THREE.Color("rgb(100%, 0%, 0%)");
  25. //X11 color name - all 140 color names are supported.
  26. //Note the lack of CamelCase in the name
  27. var color = new THREE.Color( 'skyblue' );
  28. //HSL string
  29. var color = new THREE.Color("hsl(0, 100%, 50%)");
  30. //Seperate RGB values between 0 and 1
  31. var color = new THREE.Color( 1, 0, 0 );
  32. </code>
  33. <h2>Constructor</h2>
  34. <h3>[name]( [page:Multi r], [page:Float g], [page:Float b] )</h3>
  35. <div>
  36. [page:Multi r] - (optional) the red component of the color if arguments g and b are defined.
  37. 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 />
  38. [page:Float g] - (optional) The green component of the color if it is defined.<br />
  39. [page:Float b] - (optional) The blue component of the color if it is defined.<br /><br />
  40. 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
  41. throughout the rest of the documentation.<br /><br />
  42. 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 />
  43. When only r is defined:<br />
  44. <ul>
  45. <li>It can be a [link:https://en.wikipedia.org/wiki/Web_colors#Hex_triplet hexadecimal triplet] representing the color (recommended).</li>
  46. <li>It can be an another Color instance.</li>
  47. <li>It can be a CSS style string. For Instance:
  48. <ul>
  49. <li>'rgb(250, 0,0)'</li>
  50. <li>'rgb(100%,0%,0%)'</li>
  51. <li>'hsl(0, 100%, 50%)'</li>
  52. <li>'#ff0000'</li>
  53. <li>'#f00'</li>
  54. <li>'red'</li>
  55. </ul>
  56. </li>
  57. </ul>
  58. </div>
  59. <h2>Properties</h2>
  60. <h3>[property:Boolean isColor]</h3>
  61. <div>
  62. Used to check whether this or derived classes are Colors. Default is *true*.<br /><br />
  63. You should not change this, as it used internally for optimisation.
  64. </div>
  65. <h3>[property:Float r]</h3>
  66. <div>
  67. Red channel value between 0 and 1. Default is 1.
  68. </div>
  69. <h3>[property:Float g]</h3>
  70. <div>
  71. Green channel value between 0 and 1. Default is 1.
  72. </div>
  73. <h3>[property:Float b]</h3>
  74. <div>
  75. Blue channel value between 0 and 1. Default is 1.
  76. </div>
  77. <h2>Methods</h2>
  78. <h3>[method:Color add]( [page:Color color] ) </h3>
  79. <div>Adds the RGB values of [page:Color color] to the RGB values of this color.</div>
  80. <h3>[method:Color addColors]( [page:Color color1], [page:Color color2] ) </h3>
  81. <div>Sets this color's RGB values to the sum of the RGB values of [page:Color color1] and [page:Color color2].</div>
  82. <h3>[method:Color addScalar]( [page:Number s] ) </h3>
  83. <div>Adds [page:Number s] to the RGB values of this color.</div>
  84. <h3>[method:Color clone]() </h3>
  85. <div>Returns a new Color with the same [page:.r r], [page:.g g] and [page:.b b] parameters a this one.</div>
  86. <h3>[method:Color copy]( [page:Color color] ) </h3>
  87. <div>
  88. Copies the [page:.r r], [page:.g g] and [page:.b b] parameters from [page:Color color] in to this color.
  89. </div>
  90. <h3>[method:Color convertGammaToLinear]() </h3>
  91. <div>Converts this color from gamma to linear space (squares the values of [page:.r r], [page:.g g] and [page:.b b] ).</div>
  92. <h3>[method:Color convertLinearToGamma]() </h3>
  93. <div>Converts this color from linear to gamma space (takes the squareroot of [page:.r r], [page:.g g] and [page:.b b]).</div>
  94. <h3>[method:Color copyGammaToLinear]( [page:Color color], [page:Float gammaFactor] ) </h3>
  95. <div>
  96. [page:Color color] — Color to copy.<br />
  97. [page:Float gammaFactor] - (optional). Default is *2.0*.<br /><br />
  98. Copies given color making conversion from gamma to linear space,
  99. by taking [page:.r r], [page:.g g] and [page:.b b] to the power of [page:Float gammaFactor].
  100. </div>
  101. <h3>[method:Color copyLinearToGamma]( [page:Color color], [page:Float gammaFactor] ) </h3>
  102. <div>
  103. [page:Color color] — Color to copy.<br />
  104. [page:Float gammaFactor] - (optional). Default is *2.0*.<br /><br />
  105. Copies given color making conversion from linear to gamma space,
  106. by taking [page:.r r], [page:.g g] and [page:.b b] to the power of 1 / [page:Float gammaFactor].
  107. </div>
  108. <h3>[method:Boolean equals]( [page:Color color] ) </h3>
  109. <div>Compares [page:Color color] with this one and returns true if they are the same, false otherwise.</div>
  110. <h3>[method:Color fromArray]( [page:Array array], [page:Integer offset] ) </h3>
  111. <div>
  112. [page:Array array] - [page:Array] of float in the form [ [page:Float r], [page:Float g], [page:Float b] ].<br />
  113. [page:Integer offset] - An optional offset into the array.<br /><br />
  114. Sets this color's components based on an array formatted like [ [page:Float r], [page:Float g], [page:Float b] ].
  115. </div>
  116. <h3>[method:Integer getHex]()</h3>
  117. <div>Returns the hexadecimal value of this color.</div>
  118. <h3>[method:String getHexString]()</h3>
  119. <div>Returns the string formatted hexadecimal value of this color.</div>
  120. <h3>[method:Object getHSL]( [page:Object optionalTarget] )</h3>
  121. <div>
  122. [page:Object optionalTarget] — (optional) if specified, adds h, s and l keys to object (if not already present)
  123. and sets the results there, otherwise a new Object will be created. <br /><br />
  124. Convert the values [page:.r r], [page:.g g] and [page:.b b] to [link:https://en.wikipedia.org/wiki/HSL_and_HSV HSL]
  125. format and returns an object of the form:
  126. <code>
  127. { h: 0, s: 0, l: 0 }
  128. </code>
  129. </div>
  130. <h3>[method:String getStyle]()</h3>
  131. <div>Returns the value of this color as a CSS-style string. Example: 'rgb(255,0,0)'.</div>
  132. <h3>[method:Color lerp]( [page:Color color], [page:Float alpha] ) </h3>
  133. <div>
  134. [page:Color color] - color to converge on.<br />
  135. [page:Float alpha] - interpolation factor in the closed interval [0, 1].<br /><br />
  136. Linear interpolation of this colors RGB values and the RGB values of the passed argument.
  137. The alpha argument can be thought of as the percent between the two colors, where 0 is
  138. this color and 1 is the first argument.
  139. </div>
  140. <h3>[method:Color multiply]( [page:Color color] ) </h3>
  141. <div>Multiplies this color's RGB values by given [page:Color color]'s RGB values.</div>
  142. <h3>[method:Color multiplyScalar]( [page:Number s] ) </h3>
  143. <div>Multiplies this color's RGB values by [page:Number s].</div>
  144. <h3>[method:Color offsetHSL]( [page:Float h], [page:Float s], [page:Float l] ) </h3>
  145. <div>
  146. Adds given [page:Float h], [page:Float s], and [page:Float l] to this color's existing values.
  147. Internally this converts the [page:.r r], [page:.g g] and [page:.b b] values to HSL, adds
  148. [page:Float h], [page:Float s], and [page:Float l] and then converts back to RGB.
  149. </div>
  150. <h3>[method:Color set]( [page:Multi value] ) </h3>
  151. <div>
  152. [page:Multi value] - Value to set this color to.<br /><br />
  153. See the Constructor above for full details of what [page:Multi value] can be.
  154. Delegates to [page:.copy], .setStyle, or .setHex depending on input type.
  155. </div>
  156. <h3>[method:Color setHex]( [page:Integer hex] ) </h3>
  157. <div>
  158. [page:Integer hex] — [link:https://en.wikipedia.org/wiki/Web_colors#Hex_triplet hexadecimal triplet] format.<br /><br />
  159. Sets this color from a hexadecimal value.
  160. </div>
  161. <h3>[method:Color setHSL]( [page:Float h], [page:Float s], [page:Float l] ) </h3>
  162. <div>
  163. [page:Float h] — hue value between 0.0 and 1.0 <br />
  164. [page:Float s] — saturation value between 0.0 and 1.0 <br />
  165. [page:Float l] — lightness value between 0.0 and 1.0<br /><br />
  166. Sets color from HSL values.
  167. </div>
  168. <h3>[method:Color setRGB]( [page:Float r], [page:Float g], [page:Float b] ) </h3>
  169. <div>
  170. [page:Float r] — Red channel value between 0 and 1.<br />
  171. [page:Float g] — Green channel value between 0 and 1.<br />
  172. [page:Float b] — Blue channel value between 0 and 1.<br /><br />
  173. Sets this color from RGB values.
  174. </div>
  175. <h3>[method:Color setScalar]( [page:Float scalar] ) </h3>
  176. <div>
  177. [page:Float scalar] — a value between 0.0 and 1.0.<br /><br />
  178. Sets all three color components to the value [page:Float scalar].
  179. </div>
  180. <h3>[method:Color setStyle]( [page:String style] ) </h3>
  181. <div>
  182. [page:String style] — color as a CSS-style string.<br /><br />
  183. Sets this color from a CSS-style string. For example,
  184. "rgb(250, 0,0)",
  185. "rgb(100%, 0%, 0%)",
  186. "hsl(0, 100%, 50%)",
  187. "#ff0000",
  188. "#f00", or
  189. "red" ( or any [link:https://en.wikipedia.org/wiki/X11_color_names#Color_name_chart X11 color name]
  190. - all 140 color names are supported ).<br />
  191. Transluent colors such as "rgba(255, 0, 0, 0.5)" and "hsla(0, 100%, 50%, 0.5)" are also accepted,
  192. but the alpha-channel coordinate will be discarded.<br /><br />
  193. Note that for X11 color names, multiple words such as Dark Orange become the string 'darkorange' (all lowercase).
  194. </div>
  195. <h3>[method:Color sub]( [page:Color color] ) </h3>
  196. <div>
  197. Subtracts RGB components of the given color from the RGB components of this color.
  198. If a component is negative, it is set to zero.
  199. </div>
  200. <h3>[method:Array toArray]( [page:Array array], [page:Integer offset] ) </h3>
  201. <div>
  202. [page:Array array] - An optional array to store the color to. <br />
  203. [page:Integer offset] - An optional offset into the array.<br /><br />
  204. Returns an array of the form [ r, g, b ].
  205. </div>
  206. <h2>Source</h2>
  207. [link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
  208. </body>
  209. </html>