three.js Color

表示一個顏色。

對 Color 實例進行遍歷將按相應的順序生成它的分量 (r, g, b)。

代碼示例

顏色可以用以下任意一種方式初始化。

//empty constructor - will default white const color1 = new THREE.Color(); 
//Hexadecimal color (recommended) const color2 = new THREE.Color( 0xff0000 ); 
//RGB string const color3 = new THREE.Color("rgb(255, 0, 0)"); const color4 = new THREE.Color("rgb(100%, 0%, 0%)"); 
//X11 color name - all 140 color names are supported. 
//Note the lack of CamelCase in the name const color5 = new THREE.Color( 'skyblue' ); 
//HSL string const color6 = new THREE.Color("hsl(0, 100%, 50%)"); 
//Separate RGB values between 0 and 1 const color7 = new THREE.Color( 1, 0, 0 );

構造器（Constructor）

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

r - (可選參數(shù)) 如果參數(shù)g和b被定義，則r表示顏色中的紅色分量。 如果未被定義，r可以是一個十六進制 hexadecimal triplet 顏色值或CSS樣式的字符串或一個Color實例。
g - (可選參數(shù)) 如果被定義，表示顏色中的綠色分量。
b - (可選參數(shù)) 如果被定義，表示顏色中的藍色分量。

注意使用十六進制 hexadecimal triplet 定義一個顏色在three.js中是標準的方法，而且其余 文檔也將會使用這個方法。
當所有參數(shù)被定義時，r是紅色分量，g是綠色分量，b是藍色分量。
當只有 r 被定義時：

• 它可用一個十六進制 hexadecimal triplet 值表示顏色（推薦）。
• 它可以是一個另一個顏色實例。
• 它可以是另外一個CSS樣式。例如：
  • 'rgb(250, 0,0)'
  • 'rgb(100%,0%,0%)'
  • 'hsl(0, 100%, 50%)'
  • '#ff0000'
  • '#f00'
  • 'red'

屬性（Properties）

.isColor : Boolean

只讀標志，用于檢查給定對象是否為 Color 類型。

.r : Float

紅色通道的值在0到1之間。默認值為1。

.g : Float

綠色通道的值在0到1之間。默認值為1。

.b : Float

藍色通道的值在0到1之間。默認值為1。

方法（Methods）

.add ( color : Color ) : this

將給定顏色的RGB值添加到此顏色的RGB值。

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

將此顏色的RGB值設置為 color1 和 color2 的RGB值之和。

.addScalar ( s : Number ) : this

給現(xiàn)有的RGB值都加上 s 。

.clone () : Color

返回一個與當前顏色的 r, g 和 b 相同的顏色。

.copy ( color : Color ) : this

從 color 中拷貝 r, g 和 b 值到當前的顏色。

.convertLinearToSRGB () : this

將此顏色從線性空間轉換成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 ] 的數(shù)組 Array。
offset - 數(shù)組中可選偏移量

從格式為[ r, g, b ]的數(shù)組數(shù)據(jù)中來創(chuàng)建Color對象。

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

attribute - 數(shù)據(jù)源
index - 索引值

根據(jù)參數(shù) attribute 設置該顏色。

.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 }

.getStyle ( colorSpace : string = SRGBColorSpace ) : String

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

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

color - 用于收斂的顏色。
alpha - 介于0到1的數(shù)字。

將該顏色的RGB值線性插值到傳入?yún)?shù)的RGB值。alpha參數(shù)可以被認為是兩種顏色之間的比例值，其中0是當前顏色和1.0是第一個參數(shù)的顏色。

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

color1 - 開始的顏色。
color2 - 結束收斂的顏色。
alpha - 介于0到1的數(shù)字。

將該顏色設置為線性插值顏色 color1 和 color2 - 在此 alpha 是連接兩種顏色的直線百分比距離 alpha = 0 時為 color1， alpha = 1 時為 color2。

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

color - 用于收斂的顏色。
alpha - 介于0到1的數(shù)字。

將該顏色的HSL值線性插值到傳遞參數(shù)的HSL值。它不同于上訴的lerp。通過不直接從一種顏色插入到另一種顏色， 而是通過插值這兩種顏色之間的所有色相(H)、亮度(L)、飽和度(S)。alpha參數(shù)可以被認為是兩種顏色之間的比例值， 其中0是當前顏色和1.0是第一個參數(shù)的顏色。

.multiply ( color : Color ) : this

將此顏色的RGB值乘以給定的 color 的RGB值。

.multiplyScalar ( s : Number ) : this

將此顏色的RGB值乘以給定的s的值。

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

將給定的 h, s, 和 l值加到當前顏色值。 內(nèi)部的機制為：先將該顏色的 r, g 和 b 值轉換為HSL，然后與傳入的h, s, 和 l 相加，最后再將結果轉成RGB值。

.set ( value : Color_Hex_or_String ) : this

value - 用于設置該顏色的值。

有關 value 的詳細信息，請參閱上面的構造函數(shù)。 根據(jù)輸入類型，將會委托給 .copy, .setStyle, 或者 .setHex 函數(shù)處理。

.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 - 存儲顏色的可選數(shù)組
offset - 數(shù)組的可選偏移量

返回一個格式為[ r, g, b ] 數(shù)組。

源碼（Source）

src/math/Color.js