手册
- 起步
- 进阶
- 构建工具
参考
- 动画
- 动画 / 轨道
- 音频
- 摄像机
- 常量
- 核心
- 核心 / BufferAttributes
- 附件
- 附件 / 核心
- 附件 / 曲线
- 附件 / 物体
- 几何体
- 立方缓冲几何体(BoxGeometry)
- 圆形缓冲几何体(CircleGeometry)
- 圆锥缓冲几何体(ConeGeometry)
- 圆柱缓冲几何体(CylinderGeometry)
- 十二面缓冲几何体(DodecahedronGeometry)
- 边缘几何体(EdgesGeometry)
- 挤压缓冲几何体(ExtrudeGeometry)
- 二十面缓冲几何体(IcosahedronGeometry)
- 车削缓冲几何体(LatheGeometry)
- 八面缓冲几何体(OctahedronGeometry)
- 参数化缓冲几何体(ParametricGeometry)
- 平面缓冲几何体(PlaneGeometry)
- 多面缓冲几何体(PolyhedronGeometry)
- 圆环缓冲几何体(RingGeometry)
- 形状缓冲几何体(ShapeGeometry)
- 球缓冲几何体(SphereGeometry)
- 四面缓冲几何体(TetrahedronGeometry)
- 文本缓冲几何体(TextGeometry)
- 圆环缓冲几何体(TorusGeometry)
- 圆环缓冲扭结几何体(TorusKnotGeometry)
- 管道缓冲几何体(TubeGeometry)
- 网格几何体(WireframeGeometry)
- 辅助对象
- 灯光
- 灯光 / 阴影
- 加载器
- 加载器 / 管理器
- 材质
- 基础线条材质(LineBasicMaterial)
- 虚线材质(LineDashedMaterial)
- 材质(Material)
- 基础网格材质(MeshBasicMaterial)
- 深度网格材质(MeshDepthMaterial)
- MeshDistanceMaterial
- Lambert网格材质(MeshLambertMaterial)
- MeshMatcapMaterial
- 法线网格材质(MeshNormalMaterial)
- Phong网格材质(MeshPhongMaterial)
- 物理网格材质(MeshPhysicalMaterial)
- 标准网格材质(MeshStandardMaterial)
- MeshToonMaterial
- 点材质(PointsMaterial)
- 原始着色器材质(RawShaderMaterial)
- 着色器材质(ShaderMaterial)
- 阴影材质(ShadowMaterial)
- 点精灵材质(SpriteMaterial)
- 数学库
- 数学库 / 插值
- 物体
- 渲染器
- 渲染器 / 着色器
- 渲染器 / WebXR
- 场景
- 纹理贴图
示例
- 动画
- 控制
- 几何体
- 辅助对象
- 灯光
- 加载器
- 物体
- 后期处理
- 导出器
- 数学库
- QuickHull
- 渲染器
- 实用工具
开发者参考
- 差异化支持
- WebGL 渲染器
颜色(Color)
表示一个颜色。
代码示例
颜色可以用以下任意一种方式初始化。//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 - (可选参数) 如果参数g和b被定义,则r表示颜色中的红色分量。 如果未被定义,r可以是一个十六进制 hexadecimal triplet 颜色值或CSS样式的字符串或一个Color实例。
g - (可选参数) 如果被定义,表示颜色中的绿色分量。
b - (可选参数) 如果被定义,表示颜色中的蓝色分量。
注意使用十六进制 hexadecimal triplet 定义一个颜色在three.js中是标准的方法,而且其余 文档也将会使用这个方法。
当所有参数被定义时,r是红色分量,g是绿色分量,b是蓝色分量。
当只有 r 被定义时:
- 它可用一个十六进制 hexadecimal triplet 值表示颜色(推荐)。
- 它可以是一个另一个颜色实例。
- 它可以是另外一个CSS样式。例如:
- 'rgb(250, 0,0)'
- 'rgb(100%,0%,0%)'
- 'hsl(0, 100%, 50%)'
- '#ff0000'
- '#f00'
- 'red'
属性(Properties)
.r : Float
红色通道的值在0到1之间。默认值为1。
.g : Float
绿色通道的值在0到1之间。默认值为1。
.b : Float
蓝色通道的值在0到1之间。默认值为1。
方法(Methods)
.add ( color : Color ) : Color
将给定颜色的RGB值添加到此颜色的RGB值。
.addColors ( color1 : Color, color2 : Color ) : Color
将此颜色的RGB值设置为 color1 和 color2 的RGB值之和。
.addScalar ( s : Number ) : Color
给现有的RGB值都加上 s 。
.clone () : Color
.copy ( color : Color ) : Color
.convertGammaToLinear ( gammaFactor : Float ) : Color
gammaFactor - (可选参数). 默认值 2.0.
通过取颜色 r, g and b 的 gammaFactor 次方将颜色从伽马空间转换成线性空间。
.convertLinearToGamma ( gammaFactor : Float ) : Color
gammaFactor - (可选参数). 默认值 2.0.
通过取颜色 r, g and b 的 1/gammaFactor 次方将颜色从线性空间转换成伽马空间。
.convertLinearToSRGB () : Color
将此颜色从线性空间转换成sRGB空间。
.convertSRGBToLinear () : Color
将此颜色从sRGB空间转换成线性空间。
.copyGammaToLinear ( color : Color, gammaFactor : Float ) : Color
color — 需要拷贝的颜色。
gammaFactor - (可选参数). 默认值为 2.0.
将传入的 color : Color 从伽马空间转换到线性空间然后复制给当前颜色。
.copyLinearToGamma ( color : Color, gammaFactor : Float ) : Color
color — 需要拷贝的颜色。
gammaFactor - (可选参数). 默认值为 2.0.
将传入的 color : Color 从线性空间转换到伽马空间然后复制给当前颜色。
.copyLinearToSRGB ( color : Color] ) : Color
color — 需要拷贝的颜色。
将传入的 color : Color 拷贝给当前颜色,然后将当前颜色从线性空间转换到sRGB空间。
.copySRGBToLinear ( color : Color ) : Color
color — 需要拷贝的颜色。
将传入的 color : Color 拷贝给当前颜色,然后将当前颜色从sRGB空间转换到线性空间。
.equals ( color : Color ) : Boolean
将 color : Color 的RGB值与该对象的RGB值进行比较。如果它们都是相同的,返回true,否则返回false。
.fromArray ( array : Array, offset : Integer ) : Color
array - 格式为 [ r, g, b ] 的数组 Array。
offset - 数组中可选偏移量
从格式为[ r, g, b ]的数组数据中来创建Color对象。
.fromBufferAttribute ( attribute : BufferAttribute, index : Integer ) : this
attribute - the source attribute.
index - index in the attribute.
Sets this color's components from the attribute.
.getHex () : Integer
返回此颜色的十六进制值。
.getHexString () : String
将此颜色的十六进制值作为字符串返回 (例如, 'FFFFFF')。
.getHSL ( target : Object ) : Object
target — 结果将复制到这个对象中。向对象添加h、s和l键(如果不存在)。
将此颜色的 r, g 和 b 值转换为 HSL格式,然后返回一个格式如下的对象:
{ h: 0, s: 0, l: 0 }
.getStyle () : String
以CSS样式字符串的形式返回该颜色的值。例如:“rgb(255,0,0)”。
.lerp ( color : Color, alpha : Float ) : Color
color - 用于收敛的颜色。
alpha - 介于0到1的数字。
将该颜色的RGB值线性插值到传入参数的RGB值。alpha参数可以被认为是两种颜色之间的比例值,其中0是当前颜色和1.0是第一个参数的颜色。
.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 ) : Color
color - 用于收敛的颜色。
alpha - 介于0到1的数字。
将该颜色的HSL值线性插值到传递参数的HSL值。它不同于上诉的lerp。通过不直接从一种颜色插入到另一种颜色, 而是通过插值这两种颜色之间的所有色相(H)、亮度(L)、饱和度(S)。alpha参数可以被认为是两种颜色之间的比例值, 其中0是当前颜色和1.0是第一个参数的颜色。
.multiply ( color : Color ) : Color
将此颜色的RGB值乘以给定的[page: color color]的RGB值。
.multiplyScalar ( s : Number ) : Color
将此颜色的RGB值乘以给定的s的值。
.offsetHSL ( h : Float, s : Float, l : Float ) : Color
将给定的 h, s, 和 l值加到当前颜色值。 内部的机制为:先将该颜色的 r, g 和 b 值转换为HSL,然后与传入的h, s, 和 l 相加,最后再将结果转成RGB值。
.set ( value : Color_Hex_or_String ) : Color
value - 用于设置该颜色的值。
有关 value 的详细信息,请参阅上面的构造函数。 根据输入类型,将会委托给 .copy, .setStyle, 或者 .setHex 函数处理。
.setHex ( hex : Integer ) : Color
hex — hexadecimal triplet 格式。
采用十六进制值设置此颜色。
.setHSL ( h : Float, s : Float, l : Float ) : Color
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 ) : Color
r — 红色通道的值在0到1之间。
g — 绿色通道的值在0到1之间。
b — 蓝色通道的值在0到1之间。
采用RGB值设置此颜色。
.setScalar ( scalar : Float ) : Color
scalar — 处于0到1之间的值
将颜色的RGB值都设为该 scalar 的值。
.setStyle ( style : String ) : Color
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 ) : Color
style — color name ( from X11 color names ).
Sets this color from a color name. Faster than .setStyle method if you don't need the other CSS-style formats.
For convenience, the list of names is exposed in Color.NAMES as a hash:
Color.NAMES.aliceblue // returns 0xF0F8FF
.sub ( color : Color ) : Color
从该颜色的RGB分量中减去传入颜色的RGB分量。如果分量结果是负,则该分量为零。
.toArray ( array : Array, offset : Integer ) : Array
array - 存储颜色的可选数组
offset - 数组的可选偏移量
返回一个格式为[ r, g, b ] 数组。
源码(Source)
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论