three.js 颜色color的几种设置方式

最新推荐文章于 2024-09-30 12:30:00 发布

helloyangkl

最新推荐文章于 2024-09-30 12:30:00 发布

阅读量9.2k

点赞数 21

文章标签： javascript three.js

本文链接：https://blog.csdn.net/helloyangkl/article/details/122874778

版权

这篇博客深入介绍了Three.js库中Color类的使用，包括构造器、属性、方法等，如设置RGB、HSL值，颜色的线性与伽玛空间转换，以及颜色的混合和比较。通过实例展示了如何通过十六进制、CSS样式字符串等方式初始化和操作颜色对象。

摘要由CSDN通过智能技术生成

颜色（Color）

代表一个颜色。

例子

var color = new THREE.Color();var color = new THREE.Color( 0xff0000 );var color = new THREE.Color("rgb(255, 0, 0)");var color = new THREE.Color("rgb(100%, 0%, 0%)");var color = new THREE.Color("hsl(0, 100%, 50%)");var color = new THREE.Color( 1, 0, 0 );

构造器（Constructor）

Color( r, g, b )

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

所有参数都是可选的。默认颜色为白色。
当所有的参数都被定义，那么r是红色分量，g是绿色分量，b是蓝色分量。
当只有r被定义时：

它可以是一个十六进制的颜色。
它可以是一个另一个颜色实例。
它可以是另外一个CSS样式。例如：
- rgb(250, 0,0)
- rgb(100%,0%,0%)
- hsl(0, 100%, 50%)
- #ff0000
- #f00
- red

属性（Properties）

#.r

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

#.g

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

#.b

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

方法（Methods）

#.set ( value ) this

value -- 或者是一个 Color 实例，一个 hexadecimal 值，或者一个css样式 string

根据输入类型把调用委托给.copy, .setStyle, 或 .setHex方法。

#.copy ( color ) this

color — 要拷贝的颜色。

拷贝给定的颜色。

#.fromArray ( array, offset ) this

array -- Array [r, g, b]
offset -- Integer 数组中的一个可选偏移量。

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

#.copyGammaToLinear ( color ) this

color — 要拷贝的颜色。

拷贝给定颜色完成从伽玛到线性空间的转换。

#.copyLinearToGamma ( color ) this

color — 要拷贝的颜色。

拷贝给定颜色完成从线性到伽玛空间的转换。

#.convertGammaToLinear () this

将此颜色从伽玛转换为线性空间。

#.convertLinearToGamma () this

将此颜色转换为线性到伽玛空间。

#.setRGB ( r, g, b ) this

r — 红色通道值在1和0之间。
g — 绿色通道值在1和0之间。
b — 蓝色通道值在1和0之间。

设置颜色的RGB值。

#.getHex ()

返回该颜色的十六进制值。

#.getHexString ()

返回字符串格式的十六进制值颜色。

#.setHex ( hex ) this

hex — 颜色的十六进制。

以一个十六进制值设置颜色。

#.setStyle ( style ) this

style — 代表颜色的CSS样式字符串。

以一个CSS样式字符串来设置颜色。比如："rgb(250, 0,0)", "rgb(100%, 0%, 0%)", "hsl(0, 100%, 50%)", "#ff0000", "#f00", 或者 "red"。也可以使用透明色如 "rgba(255, 0, 0, 0.5)" and "hsla(0, 100%, 50%, 0.5)"，但是alpha通道会被忽略。