Three.js - THREE.Color颜色对象详解（方法介绍）

2017-10-07 发布：hangge 阅读：11591

1，基本介绍

（1）在 Three.js 中，使用 THREE.Color 对象来表示颜色。

（2）在构造 Color 对象时，可以使用十六进制字符串（"#c0c0c0"）或者十六进制值（0xc0c0c0）来指定颜色，还可以使用 RGB 颜色值（0.3,0.5,0.6）。

//推荐使用十六进制值
new THREE.Color(0x00000, 1.0)

2，THREE.Color 对象的方法

如果要在对象构造好之后更改颜色，就得创建一个新的 THREE.Color 对象或者修改当前 THREE.Color 对象的内部属性。

THREE.Color 对象可以通过如下方法来设置或者获取信息。

函数名	描述
set(value)	将当前颜色设置为指定的十六进制值。这个值可以是字符串、数值或是已有的 THREE.Color 实例。
setHex(value)	将当前颜色设置为指定的十六进制数字值。
setRGB(r,g,b)	根据提供的 RGB 值设置颜色。参数范围从 0 到 1。
setHSL(h,s,l)	根据提供的 HSL 值设置颜色。参数范围从 0 到 1。可以查看 http://en.wikibooks.org/wiki/Color_Models:_RGB,_HSV,_HSL 了解 HSL 如何用于设置颜色。
setStyle(style)	根据 css 设置颜色的方式来设置颜色。例如：可以使用 "rgb(25, 0, 0)"、"#ff0000"、"#ff" 或 "red"。
copy(color)	从提供的颜色对象复制颜色值到当前对象。
copyGammaToLinear(color)	通常在内部使用。用 THREE.Color 提供的实例设置对象的颜色。颜色是由伽马色彩空间转换到线性色彩空间得来的。伽马色彩空间也使用 RGB 颜色，但是会使用指数系数而不是线性系数。
copyLinearToGamma(color)	通常在内部使用。用 THREE.Color 提供的实例设置对象的颜色。颜色是由线性色彩空间转换到伽马色彩空间得来的。
convertGammaToLinear()	将当前颜色从伽马色彩空间转换到线性色彩空间。
convertLinearToGamma()	将当前颜色从线性色彩空间转换到伽马色彩空间。
getHex()	以十六进制值形式从颜色对象中获取颜色值：435241。
getHexString()	以十六进制字符串形式从颜色对象中获取颜色值："0c0c0c"。
getStyle()	以 css 值的形式从颜色对象中获取颜色值："rgb(112, 0, 0)"。
getHSL(optionalTarget)	以 HSL 值的形式从颜色对象中获取颜色值。如果提供了 optionTarget 对象， Three.js 将把 h、s 和 l 属性设置到该对象。
offsetHSL(h, s, l)	将提供的 h、s 和 l 值添加到当前颜色的 h、s 和 l 值上。
add(color)	将 r、g 和 b 值添加到当前颜色。
addColors(color1, color2)	通常在内部使用。将 color1 和 color2 相加，再将得到的值设置到当前颜色。
addScalar(s)	通常在内部使用。在当前颜色的 RGB 分量上添加值。谨记参数范围从 0 到 1。
multlply(color)	通常在内部使用。将当前颜色的 RGB 值与 THREE.color 对象的 RGB 值相乘。
multiplyScalar(s)	通常在内部使用。将当前颜色的 RGB 值与提供的 RGB 值相乘。谨记参数范围从 0 到 1。
lerp(color,alpha)	通常在内部使用。找出介于对象的颜色和提供的颜色之间的颜色，alpha 属性定义了当前颜色与提供的颜色的差距。
equals(color)	如果 THREE.Color 对象实例提供的颜色的 RGB 值与当前颜色相等，则返回 true。
fromArray(array)	与 setRGB 方法具有相同的功能，只是 RGB 值可以通过数字数组的方式作为参数传入。
toArray	返回三个元素的数组：[r,g,b]。
clone()	复制当前颜色。