Color.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527
  1. /**
  2. * @author mrdoob / http://mrdoob.com/
  3. */
  4. THREE.Color = function ( color ) {
  5. if ( arguments.length === 3 ) {
  6. return this.setRGB( arguments[ 0 ], arguments[ 1 ], arguments[ 2 ] );
  7. }
  8. return this.set( color );
  9. };
  10. THREE.Color.prototype = {
  11. constructor: THREE.Color,
  12. r: 1, g: 1, b: 1,
  13. set: function ( value ) {
  14. if ( value instanceof THREE.Color ) {
  15. this.copy( value );
  16. } else if ( typeof value === 'number' ) {
  17. this.setHex( value );
  18. } else if ( typeof value === 'string' ) {
  19. this.setStyle( value );
  20. }
  21. return this;
  22. },
  23. setHex: function ( hex ) {
  24. hex = Math.floor( hex );
  25. this.r = ( hex >> 16 & 255 ) / 255;
  26. this.g = ( hex >> 8 & 255 ) / 255;
  27. this.b = ( hex & 255 ) / 255;
  28. return this;
  29. },
  30. setRGB: function ( r, g, b ) {
  31. this.r = r;
  32. this.g = g;
  33. this.b = b;
  34. return this;
  35. },
  36. setHSL: function () {
  37. function hue2rgb ( p, q, t ) {
  38. if ( t < 0 ) t += 1;
  39. if ( t > 1 ) t -= 1;
  40. if ( t < 1 / 6 ) return p + ( q - p ) * 6 * t;
  41. if ( t < 1 / 2 ) return q;
  42. if ( t < 2 / 3 ) return p + ( q - p ) * 6 * ( 2 / 3 - t );
  43. return p;
  44. }
  45. return function ( h, s, l ) {
  46. // h,s,l ranges are in 0.0 - 1.0
  47. h = THREE.Math.euclideanModulo( h, 1 );
  48. s = THREE.Math.clamp( s, 0, 1 );
  49. l = THREE.Math.clamp( l, 0, 1 );
  50. if ( s === 0 ) {
  51. this.r = this.g = this.b = l;
  52. } else {
  53. var p = l <= 0.5 ? l * ( 1 + s ) : l + s - ( l * s );
  54. var q = ( 2 * l ) - p;
  55. this.r = hue2rgb( q, p, h + 1 / 3 );
  56. this.g = hue2rgb( q, p, h );
  57. this.b = hue2rgb( q, p, h - 1 / 3 );
  58. }
  59. return this;
  60. };
  61. }(),
  62. setStyle: function ( style ) {
  63. var parseAlpha = function ( strAlpha ) {
  64. var alpha = parseFloat( strAlpha );
  65. if ( alpha < 1 ) {
  66. console.warn( 'THREE.Color: Alpha component of color ' + style + ' will be ignored.' );
  67. }
  68. return alpha;
  69. }
  70. var m;
  71. if ( m = /^((?:rgb|hsl)a?)\(\s*([^\)]*)\)/.exec( style ) ) {
  72. // rgb / hsl
  73. var color;
  74. var name = m[ 1 ];
  75. var components = m[ 2 ];
  76. switch ( name ) {
  77. case 'rgb':
  78. if ( color = /^(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*$/.exec( components ) ) {
  79. // rgb(255,0,0)
  80. this.r = Math.min( 255, parseInt( color[ 1 ], 10 ) ) / 255;
  81. this.g = Math.min( 255, parseInt( color[ 2 ], 10 ) ) / 255;
  82. this.b = Math.min( 255, parseInt( color[ 3 ], 10 ) ) / 255;
  83. return this;
  84. }
  85. if ( color = /^(\d+)\%\s*,\s*(\d+)\%\s*,\s*(\d+)\%\s*$/.exec( components ) ) {
  86. // rgb(100%,0%,0%)
  87. this.r = Math.min( 100, parseInt( color[ 1 ], 10 ) ) / 100;
  88. this.g = Math.min( 100, parseInt( color[ 2 ], 10 ) ) / 100;
  89. this.b = Math.min( 100, parseInt( color[ 3 ], 10 ) ) / 100;
  90. return this;
  91. }
  92. break;
  93. case 'rgba':
  94. if ( color = /^(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*([0-9]*\.?[0-9]+)\s*$/.exec( components ) ) {
  95. // rgba(255,0,0,0.5)
  96. this.r = Math.min( 255, parseInt( color[ 1 ], 10 ) ) / 255;
  97. this.g = Math.min( 255, parseInt( color[ 2 ], 10 ) ) / 255;
  98. this.b = Math.min( 255, parseInt( color[ 3 ], 10 ) ) / 255;
  99. parseAlpha( color[ 4 ] );
  100. return this;
  101. }
  102. if ( color = /^(\d+)\%\s*,\s*(\d+)\%\s*,\s*(\d+)\%\s*,\s*([0-9]*\.?[0-9]+)\s*$/.exec( components ) ) {
  103. // rgba(100%,0%,0%,0.5)
  104. this.r = Math.min( 100, parseInt( color[ 1 ], 10 ) ) / 100;
  105. this.g = Math.min( 100, parseInt( color[ 2 ], 10 ) ) / 100;
  106. this.b = Math.min( 100, parseInt( color[ 3 ], 10 ) ) / 100;
  107. parseAlpha( color[ 4 ] );
  108. return this;
  109. }
  110. break;
  111. case 'hsl':
  112. if ( color = /^([0-9]*\.?[0-9]+)\s*,\s*(\d+)\%\s*,\s*(\d+)\%\s*$/.exec( components ) ) {
  113. // hsl(120,50%,50%)
  114. var h = parseFloat( color[ 1 ] );
  115. var s = parseInt( color[ 2 ], 10 ) / 100;
  116. var l = parseInt( color[ 3 ], 10 ) / 100;
  117. return this.setHSL( h, s, l );
  118. }
  119. break;
  120. case 'hsla':
  121. if ( color = /^([0-9]*\.?[0-9]+)\s*,\s*(\d+)\%\s*,\s*(\d+)\%\s*,\s*([0-9]*\.?[0-9]+)\s*$/.exec( components ) ) {
  122. // hsla(120,50%,50%,0.5)
  123. var h = parseFloat( color[ 1 ] );
  124. var s = parseInt( color[ 2 ], 10 ) / 100;
  125. var l = parseInt( color[ 3 ], 10 ) / 100;
  126. parseAlpha( color[ 4 ] );
  127. return this.setHSL( h, s, l );
  128. }
  129. break;
  130. }
  131. } else if ( m = /^\#([A-Fa-f0-9]+)$/.exec( style ) ) {
  132. // hex color
  133. var hex = m[ 1 ];
  134. var size = hex.length;
  135. if ( size === 3 ) {
  136. // #ff0
  137. this.r = parseInt( hex.charAt( 0 ) + hex.charAt( 0 ), 16 ) / 255;
  138. this.g = parseInt( hex.charAt( 1 ) + hex.charAt( 1 ), 16 ) / 255;
  139. this.b = parseInt( hex.charAt( 2 ) + hex.charAt( 2 ), 16 ) / 255;
  140. return this;
  141. } else if ( size === 6 ) {
  142. // #ff0000
  143. this.r = parseInt( hex.charAt( 0 ) + hex.charAt( 1 ), 16 ) / 255;
  144. this.g = parseInt( hex.charAt( 2 ) + hex.charAt( 3 ), 16 ) / 255;
  145. this.b = parseInt( hex.charAt( 4 ) + hex.charAt( 5 ), 16 ) / 255;
  146. return this;
  147. }
  148. }
  149. if ( style && style.length > 0 ) {
  150. // color keywords
  151. var hex = THREE.ColorKeywords[ style ];
  152. if ( hex !== undefined ) {
  153. // red
  154. this.setHex( hex );
  155. } else {
  156. // unknown color
  157. console.warn( 'THREE.Color: Unknown color ' + style );
  158. }
  159. }
  160. return this;
  161. },
  162. clone: function () {
  163. return new this.constructor( this.color );
  164. },
  165. copy: function ( color ) {
  166. this.r = color.r;
  167. this.g = color.g;
  168. this.b = color.b;
  169. return this;
  170. },
  171. copyGammaToLinear: function ( color, gammaFactor ) {
  172. if ( gammaFactor === undefined ) gammaFactor = 2.0;
  173. this.r = Math.pow( color.r, gammaFactor );
  174. this.g = Math.pow( color.g, gammaFactor );
  175. this.b = Math.pow( color.b, gammaFactor );
  176. return this;
  177. },
  178. copyLinearToGamma: function ( color, gammaFactor ) {
  179. if ( gammaFactor === undefined ) gammaFactor = 2.0;
  180. var safeInverse = ( gammaFactor > 0 ) ? ( 1.0 / gammaFactor ) : 1.0;
  181. this.r = Math.pow( color.r, safeInverse );
  182. this.g = Math.pow( color.g, safeInverse );
  183. this.b = Math.pow( color.b, safeInverse );
  184. return this;
  185. },
  186. convertGammaToLinear: function () {
  187. var r = this.r, g = this.g, b = this.b;
  188. this.r = r * r;
  189. this.g = g * g;
  190. this.b = b * b;
  191. return this;
  192. },
  193. convertLinearToGamma: function () {
  194. this.r = Math.sqrt( this.r );
  195. this.g = Math.sqrt( this.g );
  196. this.b = Math.sqrt( this.b );
  197. return this;
  198. },
  199. getHex: function () {
  200. return ( this.r * 255 ) << 16 ^ ( this.g * 255 ) << 8 ^ ( this.b * 255 ) << 0;
  201. },
  202. getHexString: function () {
  203. return ( '000000' + this.getHex().toString( 16 ) ).slice( - 6 );
  204. },
  205. getHSL: function ( optionalTarget ) {
  206. // h,s,l ranges are in 0.0 - 1.0
  207. var hsl = optionalTarget || { h: 0, s: 0, l: 0 };
  208. var r = this.r, g = this.g, b = this.b;
  209. var max = Math.max( r, g, b );
  210. var min = Math.min( r, g, b );
  211. var hue, saturation;
  212. var lightness = ( min + max ) / 2.0;
  213. if ( min === max ) {
  214. hue = 0;
  215. saturation = 0;
  216. } else {
  217. var delta = max - min;
  218. saturation = lightness <= 0.5 ? delta / ( max + min ) : delta / ( 2 - max - min );
  219. switch ( max ) {
  220. case r: hue = ( g - b ) / delta + ( g < b ? 6 : 0 ); break;
  221. case g: hue = ( b - r ) / delta + 2; break;
  222. case b: hue = ( r - g ) / delta + 4; break;
  223. }
  224. hue /= 6;
  225. }
  226. hsl.h = hue;
  227. hsl.s = saturation;
  228. hsl.l = lightness;
  229. return hsl;
  230. },
  231. getStyle: function () {
  232. return 'rgb(' + ( ( this.r * 255 ) | 0 ) + ',' + ( ( this.g * 255 ) | 0 ) + ',' + ( ( this.b * 255 ) | 0 ) + ')';
  233. },
  234. offsetHSL: function ( h, s, l ) {
  235. var hsl = this.getHSL();
  236. hsl.h += h; hsl.s += s; hsl.l += l;
  237. this.setHSL( hsl.h, hsl.s, hsl.l );
  238. return this;
  239. },
  240. add: function ( color ) {
  241. this.r += color.r;
  242. this.g += color.g;
  243. this.b += color.b;
  244. return this;
  245. },
  246. addColors: function ( color1, color2 ) {
  247. this.r = color1.r + color2.r;
  248. this.g = color1.g + color2.g;
  249. this.b = color1.b + color2.b;
  250. return this;
  251. },
  252. addScalar: function ( s ) {
  253. this.r += s;
  254. this.g += s;
  255. this.b += s;
  256. return this;
  257. },
  258. multiply: function ( color ) {
  259. this.r *= color.r;
  260. this.g *= color.g;
  261. this.b *= color.b;
  262. return this;
  263. },
  264. multiplyScalar: function ( s ) {
  265. this.r *= s;
  266. this.g *= s;
  267. this.b *= s;
  268. return this;
  269. },
  270. lerp: function ( color, alpha ) {
  271. this.r += ( color.r - this.r ) * alpha;
  272. this.g += ( color.g - this.g ) * alpha;
  273. this.b += ( color.b - this.b ) * alpha;
  274. return this;
  275. },
  276. equals: function ( c ) {
  277. return ( c.r === this.r ) && ( c.g === this.g ) && ( c.b === this.b );
  278. },
  279. fromArray: function ( array ) {
  280. this.r = array[ 0 ];
  281. this.g = array[ 1 ];
  282. this.b = array[ 2 ];
  283. return this;
  284. },
  285. toArray: function ( array, offset ) {
  286. if ( array === undefined ) array = [];
  287. if ( offset === undefined ) offset = 0;
  288. array[ offset ] = this.r;
  289. array[ offset + 1 ] = this.g;
  290. array[ offset + 2 ] = this.b;
  291. return array;
  292. }
  293. };
  294. THREE.ColorKeywords = { 'aliceblue': 0xF0F8FF, 'antiquewhite': 0xFAEBD7, 'aqua': 0x00FFFF, 'aquamarine': 0x7FFFD4, 'azure': 0xF0FFFF,
  295. 'beige': 0xF5F5DC, 'bisque': 0xFFE4C4, 'black': 0x000000, 'blanchedalmond': 0xFFEBCD, 'blue': 0x0000FF, 'blueviolet': 0x8A2BE2,
  296. 'brown': 0xA52A2A, 'burlywood': 0xDEB887, 'cadetblue': 0x5F9EA0, 'chartreuse': 0x7FFF00, 'chocolate': 0xD2691E, 'coral': 0xFF7F50,
  297. 'cornflowerblue': 0x6495ED, 'cornsilk': 0xFFF8DC, 'crimson': 0xDC143C, 'cyan': 0x00FFFF, 'darkblue': 0x00008B, 'darkcyan': 0x008B8B,
  298. 'darkgoldenrod': 0xB8860B, 'darkgray': 0xA9A9A9, 'darkgreen': 0x006400, 'darkgrey': 0xA9A9A9, 'darkkhaki': 0xBDB76B, 'darkmagenta': 0x8B008B,
  299. 'darkolivegreen': 0x556B2F, 'darkorange': 0xFF8C00, 'darkorchid': 0x9932CC, 'darkred': 0x8B0000, 'darksalmon': 0xE9967A, 'darkseagreen': 0x8FBC8F,
  300. 'darkslateblue': 0x483D8B, 'darkslategray': 0x2F4F4F, 'darkslategrey': 0x2F4F4F, 'darkturquoise': 0x00CED1, 'darkviolet': 0x9400D3,
  301. 'deeppink': 0xFF1493, 'deepskyblue': 0x00BFFF, 'dimgray': 0x696969, 'dimgrey': 0x696969, 'dodgerblue': 0x1E90FF, 'firebrick': 0xB22222,
  302. 'floralwhite': 0xFFFAF0, 'forestgreen': 0x228B22, 'fuchsia': 0xFF00FF, 'gainsboro': 0xDCDCDC, 'ghostwhite': 0xF8F8FF, 'gold': 0xFFD700,
  303. 'goldenrod': 0xDAA520, 'gray': 0x808080, 'green': 0x008000, 'greenyellow': 0xADFF2F, 'grey': 0x808080, 'honeydew': 0xF0FFF0, 'hotpink': 0xFF69B4,
  304. 'indianred': 0xCD5C5C, 'indigo': 0x4B0082, 'ivory': 0xFFFFF0, 'khaki': 0xF0E68C, 'lavender': 0xE6E6FA, 'lavenderblush': 0xFFF0F5, 'lawngreen': 0x7CFC00,
  305. 'lemonchiffon': 0xFFFACD, 'lightblue': 0xADD8E6, 'lightcoral': 0xF08080, 'lightcyan': 0xE0FFFF, 'lightgoldenrodyellow': 0xFAFAD2, 'lightgray': 0xD3D3D3,
  306. 'lightgreen': 0x90EE90, 'lightgrey': 0xD3D3D3, 'lightpink': 0xFFB6C1, 'lightsalmon': 0xFFA07A, 'lightseagreen': 0x20B2AA, 'lightskyblue': 0x87CEFA,
  307. 'lightslategray': 0x778899, 'lightslategrey': 0x778899, 'lightsteelblue': 0xB0C4DE, 'lightyellow': 0xFFFFE0, 'lime': 0x00FF00, 'limegreen': 0x32CD32,
  308. 'linen': 0xFAF0E6, 'magenta': 0xFF00FF, 'maroon': 0x800000, 'mediumaquamarine': 0x66CDAA, 'mediumblue': 0x0000CD, 'mediumorchid': 0xBA55D3,
  309. 'mediumpurple': 0x9370DB, 'mediumseagreen': 0x3CB371, 'mediumslateblue': 0x7B68EE, 'mediumspringgreen': 0x00FA9A, 'mediumturquoise': 0x48D1CC,
  310. 'mediumvioletred': 0xC71585, 'midnightblue': 0x191970, 'mintcream': 0xF5FFFA, 'mistyrose': 0xFFE4E1, 'moccasin': 0xFFE4B5, 'navajowhite': 0xFFDEAD,
  311. 'navy': 0x000080, 'oldlace': 0xFDF5E6, 'olive': 0x808000, 'olivedrab': 0x6B8E23, 'orange': 0xFFA500, 'orangered': 0xFF4500, 'orchid': 0xDA70D6,
  312. 'palegoldenrod': 0xEEE8AA, 'palegreen': 0x98FB98, 'paleturquoise': 0xAFEEEE, 'palevioletred': 0xDB7093, 'papayawhip': 0xFFEFD5, 'peachpuff': 0xFFDAB9,
  313. 'peru': 0xCD853F, 'pink': 0xFFC0CB, 'plum': 0xDDA0DD, 'powderblue': 0xB0E0E6, 'purple': 0x800080, 'red': 0xFF0000, 'rosybrown': 0xBC8F8F,
  314. 'royalblue': 0x4169E1, 'saddlebrown': 0x8B4513, 'salmon': 0xFA8072, 'sandybrown': 0xF4A460, 'seagreen': 0x2E8B57, 'seashell': 0xFFF5EE,
  315. 'sienna': 0xA0522D, 'silver': 0xC0C0C0, 'skyblue': 0x87CEEB, 'slateblue': 0x6A5ACD, 'slategray': 0x708090, 'slategrey': 0x708090, 'snow': 0xFFFAFA,
  316. 'springgreen': 0x00FF7F, 'steelblue': 0x4682B4, 'tan': 0xD2B48C, 'teal': 0x008080, 'thistle': 0xD8BFD8, 'tomato': 0xFF6347, 'turquoise': 0x40E0D0,
  317. 'violet': 0xEE82EE, 'wheat': 0xF5DEB3, 'white': 0xFFFFFF, 'whitesmoke': 0xF5F5F5, 'yellow': 0xFFFF00, 'yellowgreen': 0x9ACD32 };