three Color 数学库

Color 在数学库中用来操作颜色相关的值，例如hsl rgb hex 通过这个数学库能对颜色进行全部格式的变化操作，非常灵活的在three 使用以上几种格式的颜色。

addScalar 使用这个属性时需要注意 加上的S 是一个数值将RGB值都加上传入的这个数值，数值最大值为1

Color 有三个属性 34个方法

属性

• isColor 判断是Color
• r 红色通道的值在0到1之间。默认值为1。
• g 绿色通道的值在0到1之间。默认值为1。
• b 蓝色通道的值在0到1之间。默认值为1。

方法

• add ( color : Color ) : this 将给定颜色的RGB值添加到此颜色的RGB值。
• addColors ( color1 : Color, color2 : Color ) : this 将此颜色的RGB值设置为 color1 和 color2 的RGB值之和。
• addScalar ( s : Number ) : this 给现有的RGB值都加上 s 。

    const color = new THREE.Color(0.5, 0, 0); // 暗红色
    color.addScalar(0.3); // 给每个分量加 0.3，结果变为 (0.8, 0.3, 0.3)
    console.log(color); // 输出 (0.8, 0.3, 0.3)，颜色变得更亮了

• clone () : Color 返回一个与当前颜色的 r, g 和 b 相同的颜色。
• copy ( color : Color ) : this 从 color 中拷贝 r, g 和 b 值到当前的颜色。
• convertLinearToSRGB () : this 将此颜色从线性空间转换成sRGB空间。

    当你在 WebGL 或 Three.js 中进行渲染时，通常在计算或处理颜色时使用线性空间（更适合光照计算），而最终显示的图像则通常在 sRGB 空间中显示。因此，渲染完成后需要将颜色从线性空间转换为 sRGB，以便在显示设备上正确显示颜色。
    ### 颜色空间转换的数学原理

    在数学上，线性空间到 sRGB 空间的转换通常涉及应用 gamma 校正（通常是 2.2），也就是说，将线性颜色的每个 RGB 分量应用如下公式：
    -   对于 RGB 颜色分量 `x`：
    -   当 `x <= 0.0031308` 时，`x = 12.92 * x`
    -   当 `x > 0.0031308` 时，`x = 1.055 * x^(1/2.4) - 0.055`

    这是 sRGB 空间的标准 gamma 校正过程。
    const color = new THREE.Color(0.5, 0.5, 0.5); // 创建一个线性空间的灰色
    color.convertLinearToSRGB(); // 转换到 sRGB 空间
    console.log(color); // 输出 sRGB 颜色值
    
    convertLinearToSRGB() 方法用于将颜色从线性空间转换为 sRGB 空间，以确保在显示设备上渲染的颜色与人眼视觉感知一致，是在渲染最终颜色时非常重要的步骤。

• convertSRGBToLinear () : this 将此颜色从sRGB空间转换成线性空间。
• copyLinearToSRGB ( color : Color] ) : this color — 需要拷贝的颜色。 将传入的 color : Color 拷贝给当前颜色，然后将当前颜色从线性空间转换到sRGB空间。
• copySRGBToLinear ( color : Color ) : this color — 需要拷贝的颜色。 将传入的 color : Color 拷贝给当前颜色，然后将当前颜色从sRGB空间转换到线性空间。
• equals ( color : Color ) : Boolean 将 color : Color 的RGB值与该对象的RGB值进行比较。如果它们都是相同的，返回true，否则返回false。
• fromArray ( array : Array, offset : Integer ) : this array - 格式为 [ r, g, b ] 的数组 Array。 offset - 数组中可选偏移量 从格式为[ r, g, b ]的数组数据中来创建Color对象。
• fromBufferAttribute ( attribute : BufferAttribute, index : Integer ) : this attribute - 数据源 index - 索引值 根据参数 attribute 设置该颜色。

    const geometry = new THREE.BufferGeometry();
    // 顶点位置 (三角形的三个顶点)
    const vertices = new Float32Array([
    -1, -1, 0,  // 第一个顶点
    1, -1, 0,  // 第二个顶点
    0,  1, 0   // 第三个顶点
    ]);
    // 添加顶点位置到几何体
    geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3)); // 3 表示每个顶点有 3 个分量 (x, y, z)
    // 顶点颜色 (每个顶点的 RGB 值)
    const colors = new Float32Array([
    1, 0, 0,   // 第一个顶点的颜色：红色
    0, 1, 0,   // 第二个顶点的颜色：绿色
    0, 0, 1    // 第三个顶点的颜色：蓝色
    ]);
    // 将颜色属性添加到几何体
    geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3)); // 3 表示每个顶点 3 个分量 (R, G, B)
    // 创建材质并启用顶点颜色
    const material = new THREE.MeshBasicMaterial({ vertexColors: true }); // 使用顶点颜色
    // 创建网格对象
    const mesh = new THREE.Mesh(geometry, material);
    mesh.rotation.y = 90
    mesh.rotation.x = 90
    scene.add(mesh);
    // 提取第一个顶点的颜色 (红色)
    color.fromBufferAttribute(geometry.attributes.color, 0);
    console.log("第一个顶点的颜色:", color); // 输出红色
    // 提取第二个顶点的颜色 (绿色)
    color.fromBufferAttribute(geometry.attributes.color, 1);
    console.log("第二个顶点的颜色:", color); // 输出绿色
    // 提取第三个顶点的颜色 (蓝色)
    color.fromBufferAttribute(geometry.attributes.color, 2);
    console.log("第三个顶点的颜色:", color); // 输出蓝色

• getHex ( colorSpace : string = SRGBColorSpace ) : Integer 返回此颜色的十六进制值。
• getHexString ( colorSpace : string = SRGBColorSpace ) : String 将此颜色的十六进制值作为字符串返回 (例如, 'FFFFFF')。
• getHSL ( target : Object, colorSpace : string = LinearSRGBColorSpace ) : Object target 结果将复制到这个对象中。向对象添加h、s和l键(如果不存在)。 将此颜色的 r, g 和 b 值转换为 HSL格式，然后返回一个格式如下的对象：{ h: 0, s: 0, l: 0 }
• getRGB ( target : Color, colorSpace : string = LinearSRGBColorSpace ) : Color target - 结果将复制到这个对象中. 返回此颜色的 RGB 值作为 Color 的实例。
• getStyle ( colorSpace : string = SRGBColorSpace ) : String 以CSS样式字符串的形式返回该颜色的值。例如:“rgb(255,0,0)”。
• lerp ( color : Color, alpha : Float ) : this color - 用于收敛的颜色。 alpha - 介于0到1的数字。 将该颜色的RGB值线性插值到传入参数的RGB值。alpha参数可以被认为是两种颜色之间的比例值，其中0是当前颜色和1.0是第一个参数的颜色。

    // 创建当前颜色为红色
    const currentColor = new THREE.Color(1, 0, 0); // 红色 (1, 0, 0)
    // 目标颜色为蓝色
    const targetColor = new THREE.Color(0, 0, 1); // 蓝色 (0, 0, 1)
    // 插值因子 alpha
    const alpha = 0.5; // 表示两者各占一半
    // 使用 lerp 方法在红色和蓝色之间进行线性插值
    currentColor.lerp(targetColor, alpha);
    console.log(currentColor); // 输出：紫色 (0.5, 0, 0.5)

• lerpColors ( color1 : Color, color2 : Color, alpha : Float ) : this color1 - 开始的颜色。 color2 - 结束收敛的颜色。 alpha - 介于0到1的数字。 将该颜色设置为线性插值颜色 color1 和 color2 - 在此 alpha 是连接两种颜色的直线百分比距离 alpha = 0 时为 color1， alpha = 1 时为 color2。
• lerpHSL ( color : Color, alpha : Float ) : this color - 用于收敛的颜色。 alpha - 介于0到1的数字。 将该颜色的HSL值线性插值到传递参数的HSL值。它不同于上诉的lerp。通过不直接从一种颜色插入到另一种颜色， 而是通过插值这两种颜色之间的所有色相(H)、亮度(L)、饱和度(S)。alpha参数可以被认为是两种颜色之间的比例值， 其中0是当前颜色和1.0是第一个参数的颜色。
• multiply ( color : Color ) : this 将此颜色的RGB值乘以给定的 color 的RGB值。
• multiplyScalar ( s : Number ) : this 将此颜色的RGB值乘以给定的s的值。
• offsetHSL ( h : Float, s : Float, l : Float ) : this 将给定的 h, s, 和 l值加到当前颜色值。 内部的机制为：先将该颜色的 r, g 和 b 值转换为HSL，然后与传入的h, s, 和 l 相加，最后再将结果转成RGB值。
• set ( r : Color_Hex_or_String, g : Float, b : Float ) : this 设置RGB颜色值

   r:
      可以是以下几种格式之一：
        -   **十六进制（Hex）值**：一个代表颜色的 16 进制数值（如 `0xff0000` 表示红色）。
        -   **颜色字符串**：代表颜色的字符串名称（如 `'red'`, `'blue'`, `'green'` 等）。
        -   **`THREE.Color` 实例**：可以直接将一个现有的 `THREE.Color` 对象传递给 `r`，以复制其颜色值。
      当 `r` 是 `Float` 值时，它会表示红色通道的数值。
   g (可选):
      当 `r` 是 RGB 模式的红色分量时，`g` 表示绿色分量，取值范围为 `0.0` 到 `1.0` 的浮点数。
   b (可选):
      当 `r` 是 RGB 模式的红色分量时，`b` 表示蓝色分量，取值范围为 `0.0` 到 `1.0` 的浮点数。
    // 使用方式
    const color = new THREE.Color();
    color.set(0xff0000); // 设置为红色
    console.log(color); // 输出：THREE.Color {r: 1, g: 0, b: 0}    
    
    const color = new THREE.Color();
    color.set('blue'); // 设置为蓝色
    console.log(color); // 输出：THREE.Color {r: 0, g: 0, b: 1}
    
    const color = new THREE.Color();
    color.set(1, 0, 0); // 设置为红色 (R: 1, G: 0, B: 0)
    console.log(color); // 输出：THREE.Color {r: 1, g: 0, b: 0}

• setHex ( hex : Integer, colorSpace : string = SRGBColorSpace ) : this hex — hexadecimal triplet 格式。 采用十六进制值设置此颜色。
• 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之间。采用HLS值设置此颜色。
• setRGB ( r : Float, g : Float, b : Float, colorSpace : string = LinearSRGBColorSpace ) : this r — 红色通道的值在0到1之间。 g — 绿色通道的值在0到1之间。 b — 蓝色通道的值在0到1之间。 采用RGB值设置此颜色。
• setScalar ( scalar : Float ) : this scalar — 处于0到1之间的值 将颜色的RGB值都设为该 scalar 的值。
• setStyle ( style : String, colorSpace : string = SRGBColorSpace ) : this style — 颜色css样式的字符串 采用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”。
• setColorName ( style : String, colorSpace : string = SRGBColorSpace ) : this style — 颜色名字的英文单词 ( 具体请查阅 X11 color names ) 通过颜色名字设置该颜色。如果你不使用其他 CSS 颜色样式形式，那么这种方式会略快于 .setStyle 方法。 为了方便使用，颜色名称都可以通过 Color.NAMES 访问，例如：Color.NAMES.aliceblue // returns 0xF0F8FF
• sub ( color : Color ) : this 从该颜色的RGB分量中减去传入颜色的RGB分量。如果分量结果是负，则该分量为零。
• toArray ( array : Array, offset : Integer ) : Array array - 存储颜色的可选数组 offset - 数组的可选偏移量 返回一个格式为[ r, g, b ] 数组。
• toJSON () : Number 该方法定义了Color的序列化结果。以十六进制值形式返回颜色。