2
0

Color.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="utf-8" />
  5. <base href="../../../" />
  6. <script src="page.js"></script>
  7. <link type="text/css" rel="stylesheet" href="page.css" />
  8. </head>
  9. <body>
  10. <h1>颜色([name])</h1>
  11. <p class="desc">
  12. 表示一个颜色。
  13. </p>
  14. <h2>代码示例</h2>
  15. 颜色可以用以下任意一种方式初始化。
  16. <code>
  17. //empty constructor - will default white
  18. const color1 = new THREE.Color();
  19. //Hexadecimal color (recommended)
  20. const color2 = new THREE.Color( 0xff0000 );
  21. //RGB string
  22. const color3 = new THREE.Color("rgb(255, 0, 0)");
  23. const color4 = new THREE.Color("rgb(100%, 0%, 0%)");
  24. //X11 color name - all 140 color names are supported.
  25. //Note the lack of CamelCase in the name
  26. const color5 = new THREE.Color( 'skyblue' );
  27. //HSL string
  28. const color6 = new THREE.Color("hsl(0, 100%, 50%)");
  29. //Separate RGB values between 0 and 1
  30. const color7 = new THREE.Color( 1, 0, 0 );
  31. </code>
  32. <h2>构造器(Constructor)</h2>
  33. <h3>[name]( [param:Color_Hex_or_String r], [param:Float g], [param:Float b] )</h3>
  34. <p>
  35. [page:Color_Hex_or_String r] - (可选参数) 如果参数g和b被定义,则r表示颜色中的红色分量。
  36. 如果未被定义,r可以是一个十六进制 [link:https://en.wikipedia.org/wiki/Web_colors#Hex_triplet hexadecimal triplet] 颜色值或CSS样式的字符串或一个Color实例。<br />
  37. [page:Float g] - (可选参数) 如果被定义,表示颜色中的绿色分量。<br />
  38. [page:Float b] - (可选参数) 如果被定义,表示颜色中的蓝色分量。<br /><br />
  39. 注意使用十六进制 [link:https://en.wikipedia.org/wiki/Web_colors#Hex_triplet hexadecimal triplet] 定义一个颜色在three.js中是标准的方法,而且其余
  40. 文档也将会使用这个方法。<br /><br />
  41. 当所有参数被定义时,r是红色分量,g是绿色分量,b是蓝色分量。<br />
  42. 当只有 [page:Color_Hex_or_String r] 被定义时:<br />
  43. <ul>
  44. <li>它可用一个十六进制 [link:https://en.wikipedia.org/wiki/Web_colors#Hex_triplet hexadecimal triplet] 值表示颜色(推荐)。</li>
  45. <li>它可以是一个另一个颜色实例。</li>
  46. <li>它可以是另外一个CSS样式。例如:
  47. <ul>
  48. <li>'rgb(250, 0,0)'</li>
  49. <li>'rgb(100%,0%,0%)'</li>
  50. <li>'hsl(0, 100%, 50%)'</li>
  51. <li>'#ff0000'</li>
  52. <li>'#f00'</li>
  53. <li>'red'</li>
  54. </ul>
  55. </li>
  56. </ul>
  57. </p>
  58. <h2>属性(Properties)</h2>
  59. <h3>[property:Float r]</h3>
  60. <p>
  61. 红色通道的值在0到1之间。默认值为1。
  62. </p>
  63. <h3>[property:Float g]</h3>
  64. <p>
  65. 绿色通道的值在0到1之间。默认值为1。
  66. </p>
  67. <h3>[property:Float b]</h3>
  68. <p>
  69. 蓝色通道的值在0到1之间。默认值为1。
  70. </p>
  71. <h2>方法(Methods)</h2>
  72. <h3>[method:Color add]( [param:Color color] ) </h3>
  73. <p>将给定颜色的RGB值添加到此颜色的RGB值。</p>
  74. <h3>[method:Color addColors]( [param:Color color1], [param:Color color2] ) </h3>
  75. <p>将此颜色的RGB值设置为 [page:Color color1] 和 [page:Color color2] 的RGB值之和。</p>
  76. <h3>[method:Color addScalar]( [param:Number s] ) </h3>
  77. <p>给现有的RGB值都加上 [page:Number s] 。</p>
  78. <h3>[method:Color clone]() </h3>
  79. <p>返回一个与当前颜色的 [page:.r r], [page:.g g] 和 [page:.b b] 相同的颜色。</p>
  80. <h3>[method:Color copy]( [param:Color color] ) </h3>
  81. <p>
  82. 从 [page:Color color] 中拷贝 [page:.r r], [page:.g g] 和 [page:.b b] 值到当前的颜色。
  83. </p>
  84. <h3>[method:Color convertGammaToLinear]( [param:Float gammaFactor] ) </h3>
  85. <p>
  86. [page:Float gammaFactor] - (可选参数). 默认值 *2.0*.<br /><br />
  87. 通过取颜色 [page:.r r], [page:.g g] and [page:.b b] 的 [page:Float gammaFactor] 次方将颜色从伽马空间转换成线性空间。
  88. </p>
  89. <h3>[method:Color convertLinearToGamma]( [param:Float gammaFactor] ) </h3>
  90. <p>
  91. [page:Float gammaFactor] - (可选参数). 默认值 *2.0*.<br /><br />
  92. 通过取颜色 [page:.r r], [page:.g g] and [page:.b b] 的 1/[page:Float gammaFactor] 次方将颜色从线性空间转换成伽马空间。
  93. </p>
  94. <h3>[method:Color convertLinearToSRGB]() </h3>
  95. <p>
  96. 将此颜色从线性空间转换成sRGB空间。
  97. </p>
  98. <h3>[method:Color convertSRGBToLinear]() </h3>
  99. <p>
  100. 将此颜色从sRGB空间转换成线性空间。
  101. </p>
  102. <h3>[method:Color copyGammaToLinear]( [param:Color color], [param:Float gammaFactor] ) </h3>
  103. <p>
  104. [page:Color color] — 需要拷贝的颜色。<br />
  105. [page:Float gammaFactor] - (可选参数). 默认值为 *2.0*.<br /><br />
  106. 将传入的 [param:Color color] 从伽马空间转换到线性空间然后复制给当前颜色。
  107. </p>
  108. <h3>[method:Color copyLinearToGamma]( [param:Color color], [param:Float gammaFactor] ) </h3>
  109. <p>
  110. [page:Color color] — 需要拷贝的颜色。<br />
  111. [page:Float gammaFactor] - (可选参数). 默认值为 *2.0*.<br /><br />
  112. 将传入的 [param:Color color] 从线性空间转换到伽马空间然后复制给当前颜色。
  113. </p>
  114. <h3>[method:Color copyLinearToSRGB]( [param:Color color]] ) </h3>
  115. <p>
  116. [page:Color color] — 需要拷贝的颜色。<br />
  117. 将传入的 [param:Color color] 拷贝给当前颜色,然后将当前颜色从线性空间转换到sRGB空间。
  118. </p>
  119. <h3>[method:Color copySRGBToLinear]( [param:Color color] ) </h3>
  120. <p>
  121. [page:Color color] — 需要拷贝的颜色。<br />
  122. 将传入的 [param:Color color] 拷贝给当前颜色,然后将当前颜色从sRGB空间转换到线性空间。
  123. </p>
  124. <h3>[method:Boolean equals]( [param:Color color] ) </h3>
  125. <p>将 [param:Color color] 的RGB值与该对象的RGB值进行比较。如果它们都是相同的,返回true,否则返回false。</p>
  126. <h3>[method:Color fromArray]( [param:Array array], [param:Integer offset] ) </h3>
  127. <p>
  128. [page:Array array] - 格式为 [ [page:Float r], [page:Float g], [page:Float b] ] 的数组 [page:Array]。<br />
  129. [page:Integer offset] - 数组中可选偏移量<br /><br />
  130. 从格式为[ [page:Float r], [page:Float g], [page:Float b] ]的数组数据中来创建Color对象。
  131. </p>
  132. <h3>[method:this fromBufferAttribute]( [param:BufferAttribute attribute], [param:Integer index] )</h3>
  133. <p>
  134. [page:BufferAttribute attribute] - the source attribute.<br />
  135. [page:Integer index] - index in the attribute.<br /><br />
  136. Sets this color's components from the [page:BufferAttribute attribute].
  137. </p>
  138. <h3>[method:Integer getHex]()</h3>
  139. <p>返回此颜色的十六进制值。</p>
  140. <h3>[method:String getHexString]()</h3>
  141. <p>将此颜色的十六进制值作为字符串返回 (例如, 'FFFFFF')。</p>
  142. <h3>[method:Object getHSL]( [param:Object target] )</h3>
  143. <p>
  144. [page:Object target] — 结果将复制到这个对象中。向对象添加h、s和l键(如果不存在)。<br /><br />
  145. 将此颜色的 [page:.r r], [page:.g g] 和 [page:.b b] 值转换为 [link:https://en.wikipedia.org/wiki/HSL_and_HSV HSL]格式,然后返回一个格式如下的对象:
  146. <code>
  147. { h: 0, s: 0, l: 0 }
  148. </code>
  149. </p>
  150. <h3>[method:String getStyle]()</h3>
  151. <p>以CSS样式字符串的形式返回该颜色的值。例如:“rgb(255,0,0)”。</p>
  152. <h3>[method:Color lerp]( [param:Color color], [param:Float alpha] ) </h3>
  153. <p>
  154. [page:Color color] - 用于收敛的颜色。<br />
  155. [page:Float alpha] - 介于0到1的数字。<br /><br />
  156. 将该颜色的RGB值线性插值到传入参数的RGB值。alpha参数可以被认为是两种颜色之间的比例值,其中0是当前颜色和1.0是第一个参数的颜色。
  157. </p>
  158. <h3>[method:this lerpColors]( [param:Color color1], [param:Color color2], [param:Float alpha] )</h3>
  159. <p>
  160. [page:Color color1] - 开始的颜色。<br />
  161. [page:Color color2] - 结束收敛的颜色。<br />
  162. [page:Float alpha] - 介于0到1的数字。<br /><br />
  163. 将该颜色设置为线性插值颜色 [page:Color color1] 和 [page:Color color2] - 在此 alpha 是连接两种颜色的直线百分比距离
  164. alpha = 0 时为 [page:Color color1], alpha = 1 时为 [page:Color color2]。
  165. </p>
  166. <h3>[method:Color lerpHSL]( [param:Color color], [param:Float alpha] ) </h3>
  167. <p>
  168. [page:Color color] - 用于收敛的颜色。<br />
  169. [page:Float alpha] - 介于0到1的数字。<br /><br />
  170. 将该颜色的HSL值线性插值到传递参数的HSL值。它不同于上诉的[page:lerp]。通过不直接从一种颜色插入到另一种颜色,
  171. 而是通过插值这两种颜色之间的所有色相(H)、亮度(L)、饱和度(S)。alpha参数可以被认为是两种颜色之间的比例值,
  172. 其中0是当前颜色和1.0是第一个参数的颜色。
  173. </p>
  174. <h3>[method:Color multiply]( [param:Color color] ) </h3>
  175. <p>将此颜色的RGB值乘以给定的[page: color color]的RGB值。</p>
  176. <h3>[method:Color multiplyScalar]( [param:Number s] ) </h3>
  177. <p>将此颜色的RGB值乘以给定的[page:Number s]的值。</p>
  178. <h3>[method:Color offsetHSL]( [param:Float h], [param:Float s], [param:Float l] ) </h3>
  179. <p>
  180. 将给定的 [page:Float h], [page:Float s], 和 [page:Float l]值加到当前颜色值。
  181. 内部的机制为:先将该颜色的 [page:.r r], [page:.g g] 和 [page:.b b] 值转换为HSL,然后与传入的[page:Float h], [page:Float s], 和 [page:Float l]
  182. 相加,最后再将结果转成RGB值。
  183. </p>
  184. <h3>[method:Color set]( [param:Color_Hex_or_String value] ) </h3>
  185. <p>
  186. [page:Color_Hex_or_String value] - 用于设置该颜色的值。<br /><br />
  187. 有关 [page:Color_Hex_or_String value] 的详细信息,请参阅上面的构造函数。
  188. 根据输入类型,将会委托给 [page:.copy], [page:.setStyle], 或者 [page:.setHex] 函数处理。
  189. </p>
  190. <h3>[method:Color setHex]( [param:Integer hex] ) </h3>
  191. <p>
  192. [page:Integer hex] — [link:https://en.wikipedia.org/wiki/Web_colors#Hex_triplet hexadecimal triplet] 格式。<br /><br />
  193. 采用十六进制值设置此颜色。
  194. </p>
  195. <h3>[method:Color setHSL]( [param:Float h], [param:Float s], [param:Float l] ) </h3>
  196. <p>
  197. [page:Float h] — 色相值处于0到1之间。hue value between 0.0 and 1.0 <br />
  198. [page:Float s] — 饱和度值处于0到1之间。<br />
  199. [page:Float l] — 亮度值处于0到1之间。<br /><br />
  200. 采用HLS值设置此颜色。
  201. </p>
  202. <h3>[method:Color setRGB]( [param:Float r], [param:Float g], [param:Float b] ) </h3>
  203. <p>
  204. [page:Float r] — 红色通道的值在0到1之间。<br />
  205. [page:Float g] — 绿色通道的值在0到1之间。<br />
  206. [page:Float b] — 蓝色通道的值在0到1之间。<br /><br />
  207. 采用RGB值设置此颜色。
  208. </p>
  209. <h3>[method:Color setScalar]( [param:Float scalar] ) </h3>
  210. <p>
  211. [page:Float scalar] — 处于0到1之间的值<br /><br />
  212. 将颜色的RGB值都设为该 [page:Float scalar] 的值。
  213. </p>
  214. <h3>[method:Color setStyle]( [param:String style] ) </h3>
  215. <p>
  216. [page:String style] — 颜色css样式的字符串<br /><br />
  217. 采用ccs样式的字符串设置此颜色。例如,
  218. "rgb(250, 0,0)",
  219. "rgb(100%, 0%, 0%)",
  220. "hsl(0, 100%, 50%)",
  221. "#ff0000",
  222. "#f00", 或者
  223. "red" ( 或者任何 [link:https://en.wikipedia.org/wiki/X11_color_names#Color_name_chart X11 color name]
  224. - 所有140种颜色名称都支持 ).<br />
  225. 半透明颜色例如 "rgba(255, 0, 0, 0.5)" and "hsla(0, 100%, 50%, 0.5)" 也能支持,
  226. 但是alpha通道的值将会被丢弃。<br /><br />
  227. 注意,对于X11颜色名称,多个单词(如暗橙色)变成字符串“darkorange”(全部是小写字母)。
  228. </p>
  229. <h3>[method:Color setColorName]( [param:String style] ) </h3>
  230. <p>
  231. [page:String style] — color name ( from [link:https://en.wikipedia.org/wiki/X11_color_names#Color_name_chart X11 color names] ).<br /><br />
  232. Sets this color from a color name. Faster than [page:.setStyle] method if you don't need the other CSS-style formats.<br/><br/>
  233. For convenience, the list of names is exposed in Color.NAMES as a hash: <code>Color.NAMES.aliceblue // returns 0xF0F8FF</code>
  234. </p>
  235. <h3>[method:Color sub]( [param:Color color] ) </h3>
  236. <p>
  237. 从该颜色的RGB分量中减去传入颜色的RGB分量。如果分量结果是负,则该分量为零。
  238. </p>
  239. <h3>[method:Array toArray]( [param:Array array], [param:Integer offset] ) </h3>
  240. <p>
  241. [page:Array array] - 存储颜色的可选数组 <br />
  242. [page:Integer offset] - 数组的可选偏移量<br /><br />
  243. 返回一个格式为[ r, g, b ] 数组。
  244. </p>
  245. <h2>源码(Source)</h2>
  246. <p>
  247. [link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
  248. </p>
  249. </body>
  250. </html>