Color

Color类用来定义Three.js中的颜色

1.构造函数

THREE.Color(r:Color_Hex_or_String, g:Float, b: Float)

参数：

r - (可选参数)
- 如果参数g和b被定义，则r表示颜色中的红色分量。
- 如果未被定义，r可以是一个十六进制颜色值或CSS样式的字符串或一个Color实例。
g - (可选参数) 如果被定义，表示颜色中的绿色分量。
b - (可选参数) 如果被定义，表示颜色中的蓝色分量。

当所有参数被定义时，r是红色分量，g是绿色分量，b是蓝色分量。当只有 r 被定义时：

它可用一个十六进制的颜色值（推荐），比如0x000000，0xff0000
js
```
const color=new THREE.Color(0x000000)
```
1

它可以是一个另一个颜色实例。

const color=new THREE.Color(new THREE.Color(0x000000))

它可以是另外一个CSS样式的字符串。例如：

const color=new THREE.Color('rgb(250, 0,0)')
const color=new THREE.Color('rgb(100%,0%,0%)')
const color=new THREE.Color('hsl(0, 100%, 50%)')
const color=new THREE.Color('#ff0000')
const color=new THREE.Color('#f00')
const color=new THREE.Color('red')

3.属性

isColor

类型：Boolean

只读，判断一个对象是否为Color对象

r

类型：Float

红色通道的值在0到1之间。默认值为1。

g

类型：Float

绿色通道的值在0到1之间。默认值为1。

b

类型：Float

蓝色通道的值在0到1之间。默认值为1。

4.方法

add

将给定颜色的RGB值添加到此颜色的RGB值。

add(color: Color): this

参数：

color：一个新的Color对象

返回值：返回调用对象本身

const color = new THREE.Color(0, 0, 0)
color.add(new THREE.Color(0.1, 0.2, 0.3))
console.log(color)  // Color {isColor: true, r: 0.1, g: 0.2, b: 0.3}

addColors

把两个Color对象的RGB值分别相加，再赋值给当前Color对象

addColors(color1: Color, color2: Color): this

参数：

color1：相加Color对象1
color2：相加Color对象2

返回值：返回调用对象本身

const color = new THREE.Color()
const color1 = new THREE.Color(0.1, 0.2, 0.3)
const color2 = new THREE.Color(0.1, 0.2, 0.3)

color.addColors(color1, color2)
console.log(color) // Color {isColor: true, r: 0.2, g: 0.4, b: 0.6}

addScalar

给现有的RGB值分别加上一个数值

addScalar(s: Number): this

参数：

s：需要加到RGB的值

返回值：返回调用对象本身

const color = new THREE.Color(0,0,0)
color.addScalar(0.5)

console.log(color) // Color {isColor: true, r: 0.5, g: 0.5, b: 0.5}

clone

克隆一个Color对象

clone(): Color

返回值：返回一个Color对象，其RGB值和调用对象相同

const color = new THREE.Color(0.5,0.5,0.5)
const color1=color.clone()

console.log(color1) // Color {isColor: true, r: 0.5, g: 0.5, b: 0.5}

copy

将一个Color对象上的RGB值拷贝到调用对象身上

copy(color:Color): this

参数：

color：需要拷贝的Color对象

返回值：返回调用对象本身

const color = new THREE.Color(0.5, 0.5, 0.5)
const color1 = new THREE.Color()
color1.copy(color)

console.log(color1) // Color {isColor: true, r: 0.5, g: 0.5, b: 0.5}

convertLinearToSRGB

将此颜色从线性空间转换成sRGB空间。

convertLinearToSRGB(): this

返回值：返回调用对象本身

const color = new THREE.Color(0.5, 0.5, 0.5)
color.convertLinearToSRGB()
console.log(color)
// Color {isColor: true, r: 0.7353606352856507, g: 0.7353606352856507, b: 0.7353606352856507}

convertSRGBToLinear

将此颜色从sRGB空间转换成线性空间。

convertSRGBToLinear(): this

返回值：返回调用对象本身

const color = new THREE.Color(0.5, 0.5, 0.5)
color.convertSRGBToLinear()
console.log(color) 
// Color {isColor: true, r: 0.2140411404715882, g: 0.2140411404715882, b: 0.2140411404715882}

copyLinearToSRGB

将传入的Color对象拷贝给当前颜色，然后将当前颜色从线性空间转换到sRGB空间。

copyLinearToSRGB(color: Color): this

参数：

color：需要拷贝的颜色Color对象。

返回值：返回调用对象本身

copySRGBToLinear

将传入的Color对象拷贝给当前颜色，然后将当前颜色从sRGB空间转换到线性空间。

copySRGBToLinear(color: Color): this

参数：

color：需要拷贝的颜色。

返回值：返回调用对象本身

equals

将传入的Color对象的RGB值与该对象的RGB值进行比较。如果它们都是相同的，返回true，否则返回false。

equals(color: Color): Boolean

参数：

color：需要进行比较的Color对象

返回值：返回比较的结果

fromArray

从格式为[ r, g, b ]的数组数据中来创建Color对象。

fromArray(array: Array, offset: Integer): this

参数：

array：格式为 [ r, g, b ] 的数组 Array。
offset：数组中可选偏移量，默认为0

返回值：返回调用对象本身

const arr=[11,22,33]
const color = new THREE.Color().fromArray(arr)

console.log(color) // Color {isColor: true, r: 11, g: 22, b: 33}

// 使用便宜量
const arr=[0,11,22,33]
const color = new THREE.Color().fromArray(arr, 1)

console.log(color) // Color {isColor: true, r: 11, g: 22, b: 33}

fromBufferAttribute

根据参数 attribute 设置该颜色。

fromBufferAttribute(attribute: BufferAttribute, index: Integer): this

参数：

attribute - 数据源
index - 索引值

返回值：返回调用对象本身

getHex

返回此颜色的十六进制的整数值。

getHex(colorSpace?: string = SRGBColorSpace): Integer

参数：

colorSpace：可选的字符串参数，用于指明颜色空间，例如 'srgb' 或 'linear'。

返回值：返回此颜色的十六进制的整数值。

const color = new THREE.Color(0.5, 0.5, 0.5)
console.log(color.getHex())	// 12369084

若想变成字符串可使用toString()

const color = new THREE.Color(0.5, 0.5, 0.5)
console.log(color.getHex().toString(16)) // bcbcbc

getHexString

将此颜色的十六进制值作为字符串返回 (例如, 'FFFFFF')。

getHexString(colorSpace: string = SRGBColorSpace): String

参数：

colorSpace：可选的字符串参数，用于指明颜色空间，例如 'srgb' 或 'linear'。

返回值：返回此颜色的十六进制的字符串。

const color = new THREE.Color(0.5, 0.5, 0.5)
console.log(color.getHexString())	// bcbcbc

getHSL

将此颜色的 r, g 和 b 值转换为 HSL格式，然后返回一个格式如下的对象：{ h: 0, s: 0, l: 0 }

getHSL(target: Object, colorSpace: string = LinearSRGBColorSpace): Object

参数：

target：结果将复制到这个对象中。向对象添加h、s和l键(如果不存在)。
colorSpace：可选的字符串参数，用于指明颜色空间，例如 'srgb' 或 'linear'。

返回值：返回转换为HSL格式的对象，例如{ h: 0, s: 0, l: 0 }

const obj={}
const color = new THREE.Color(0.5, 0.5, 0.5)
color.getHSL(obj)

console.log(obj)

getStyle

以CSS样式字符串的形式返回该颜色的值。例如:“rgb(255,0,0)”。

getStyle(colorSpace: string = SRGBColorSpace): String

参数：

colorSpace：可选的字符串参数，用于指明颜色空间，例如 'srgb' 或 'linear'。

返回值：返回一个css样式

const obj = {}
const color = new THREE.Color(0.5, 0.5, 0.5)
console.log(color.getStyle())  // rgb(188,188,188)

lerp

将该颜色的RGB值线性插值到传入参数的RGB值。

alpha参数可以被认为是两种颜色之间的比例值，其中0是当前颜色，1是第一个参数的颜色。

lerp(color: Color, alpha: Float): this

参数：

color：用于收敛的颜色。
alpha：介于0到1的数字。

返回值：

线性插值

线性插值（Linear Interpolation，简称Lerp）是一种在两个已知点之间估算未知点的方法。在数学和计算机图形学中，线性插值可以用于平滑地过渡两个数值，比如位置、颜色、大小等。

基本概念：假设有两个已知点和，它们的值分别为和。线性插值的目标是找到一个介于这两个点之间的点，其值可以通过以下公式计算：

其中，是插值因子，范围通常在0到1之间：

当时，的值为。
当时，的值为。
当在0与1之间时，的值将位于和之间。

应用示例：

颜色渐变：在图形渲染中，可以使用线性插值在两种颜色之间创建平滑过渡。
动画：在动画中，可以通过线性插值平滑地移动对象从一个位置到另一个位置。
数值计算：可用于在数列中求某些特定值，特别是在需要在已知数据点之间进行估算时。

lerpColors

将该颜色设置为线性插值颜色 color1 和 color2 -

在此 alpha 是连接两种颜色的直线百分比距离 alpha = 0 时为 color1， alpha = 1 时为 color2。

lerpColors(color1: Color, color2: Color, alpha: Float): this

参数：

color1：开始的颜色。
color2：结束收敛的颜色。
alpha：介于0到1的数字。

返回值：返回调用对象本身

lerpHSL

将该颜色的HSL值线性插值到传递参数的HSL值。它不同于上述的lerp。通过不直接从一种颜色插入到另一种颜色，而是通过插值这两种颜色之间的所有色相(H)、亮度(L)、饱和度(S)。alpha参数可以被认为是两种颜色之间的比例值，其中0是当前颜色和1.0是第一个参数的颜色。

lerpHSL(color: Color, alpha: Float): this

参数：

color - 用于收敛的颜色。
alpha - 介于0到1的数字。

返回值：返回调用对象本身

multiply

将此颜色的RGB值乘以给定的 color 的RGB值。

可以理解为有两个颜色分别为RGB(r1, g1, b1)，RGB(r2, g2, b2)

得出来的结果是RGB(r1*r2, g1*g2, b1*b2)

multiply(color: Color): this

参数：

color：需要相乘的Color对象

返回值：返回调用对象本身

multiplyScalar

将此颜色的RGB值乘以给定的s的值。

可以理解一个颜色RGB(r1, g1, b1)和一个固定数值s

得出来的结果是RGB(r1*s, g1*s, b1*s)

multiplyScalar(s: Number): this

参数：

s：需要相乘的固定数值

返回值：返回调用对象本身

offsetHSL

将给定的 h, s, 和 l值加到当前颜色值。

内部的机制为：先将该颜色的 r, g 和 b 值转换为HSL，然后与传入的h, s, 和 l 相加，最后再将结果转成RGB值。

offsetHSL(h: Float, s: Float, l: Float): this

参数：

h：色相
s：饱和度
l：亮度

返回值：返回调用对象本身

set

给Color对象设置颜色，参数和Color构造函数的第一个参数一样

set(value: Color_Hex_or_String): this

参数：

value：可以是一个十六进制颜色值或CSS样式的字符串或一个Color实例。

返回值：返回调用对象本身

setHex

采用十六进制值设置此颜色。

setHex(hex: Integer, colorSpace: string = SRGBColorSpace): this

参数：

hex：十六进制的颜色值。

返回值：返回调用对象本身

setHSL

采用HLS值设置此颜色。

setHSL(h : Float, s: Float, l: Float, colorSpace: string = LinearSRGBColorSpace): this

参数：

h：色相值处于0到1之间。hue value between 0.0 and 1.0
s：饱和度值处于0到1之间。
l：亮度值处于0到1之间。

返回值：返回调用对象本身

setRGB

采用RGB值设置此颜色。

setRGB(r: Float, g: Float, b: Float, colorSpace: string = LinearSRGBColorSpace): this

参数：

r：红色通道的值在0到1之间。
g：绿色通道的值在0到1之间。
b：蓝色通道的值在0到1之间。

返回值：返回调用对象本身

setScalar

将颜色的RGB值都设为该 scalar 的值。

setScalar(scalar: Float): this

参数：

scala：处于0到1之间的值

返回值：返回调用对象本身

setStyle

采用ccs样式的字符串设置此颜色。例如, "rgb(250, 0,0)", "rgb(100%, 0%, 0%)", "hsl(0, 100%, 50%)", "#ff0000", "#f00", 或者 "red" ( 或者任何 X11 color name - 所有140种颜色名称都支持 ). 半透明颜色例如 "rgba(255, 0, 0, 0.5)" and "hsla(0, 100%, 50%, 0.5)" 也能支持, 但是alpha通道的值将会被丢弃。

注意，对于X11颜色名称，多个单词(如暗橙色)变成字符串“darkorange”。

setStyle(style: String, colorSpace: string = SRGBColorSpace): this

参数：

style：颜色css样式的字符串

返回值：返回调用对象本身

setColorName

通过颜色名字设置该颜色。如果你不使用其他 CSS 颜色样式形式，那么这种方式会略快于 .setStyle 方法。

为了方便使用，颜色名称都可以通过 Color.NAMES 访问，例如： Color.NAMES.aliceblue // returns 0xF0F8FF

setColorName(style: String, colorSpace: string = SRGBColorSpace): this

参数：

style：颜色名字的英文单词 ( 具体请查阅 X11 color names )

返回值：返回调用对象本身

sub

从该颜色的RGB分量中减去传入颜色的RGB分量。如果分量结果是负，则该分量为零。

sub(color: Color ): this

参数：

color：需要减去的Color对象

返回值：返回调用对象本身

toArray

将Color的RGB值返转化为一个格式为[ r, g, b ] 数组。

toArray(array: Array, offset: Integer): Array

参数：

array：存储颜色的可选数组
offset：数组的可选偏移量

返回值：返回一个格式为[ r, g, b ] 数组。

Color ​

1.构造函数 ​

3.属性 ​

isColor ​

r ​

g ​

b ​

4.方法 ​

add ​

addColors ​

addScalar ​

clone ​

copy ​

convertLinearToSRGB ​

convertSRGBToLinear ​

copyLinearToSRGB ​

copySRGBToLinear ​

equals ​

fromArray ​

fromBufferAttribute ​

getHex ​

getHexString ​

getHSL ​

getStyle ​

lerp ​

lerpColors ​

lerpHSL ​

multiply ​

multiplyScalar ​

offsetHSL ​

set ​

setHex ​

setHSL ​

setRGB ​

setScalar ​

setStyle ​

setColorName ​

sub ​

toArray ​

Color

1.构造函数

3.属性

isColor

r

g

b

4.方法

add

addColors

addScalar

clone

copy

convertLinearToSRGB

convertSRGBToLinear

copyLinearToSRGB

copySRGBToLinear

equals

fromArray

fromBufferAttribute

getHex

getHexString

getHSL

getStyle

lerp

lerpColors

lerpHSL

multiply

multiplyScalar

offsetHSL

set

setHex

setHSL

setRGB

setScalar

setStyle

setColorName

sub

toArray