Three.js API手册

动画
AnimationAction AnimationClip AnimationMixer AnimationObjectGroup AnimationUtils KeyframeTrack PropertyBinding PropertyMixer
动画 / 轨道
BooleanKeyframeTrack ColorKeyframeTrack NumberKeyframeTrack QuaternionKeyframeTrack StringKeyframeTrack VectorKeyframeTrack
音频
Audio AudioAnalyser AudioContext AudioListener PositionalAudio
摄像机
ArrayCamera Camera CubeCamera OrthographicCamera PerspectiveCamera StereoCamera
常量
Animation Core CustomBlendingEquation DrawModes Materials Renderer Textures
核心
BufferAttribute BufferGeometry Clock DirectGeometry EventDispatcher Face3 Geometry InstancedBufferAttribute InstancedBufferGeometry InstancedInterleavedBuffer InterleavedBuffer InterleavedBufferAttribute Layers Object3D Raycaster Uniform
核心 / BufferAttributes
BufferAttribute_Types
弃用列表
DeprecatedList
附件
Earcut ShapeUtils
附件 / 核心
Curve CurvePath Font Interpolations Path Shape ShapePath
附件 / 曲线
ArcCurve CatmullRomCurve3 CubicBezierCurve CubicBezierCurve3 EllipseCurve LineCurve LineCurve3 QuadraticBezierCurve QuadraticBezierCurve3 SplineCurve
附件 / 物体
ImmediateRenderObject
几何体
BoxBufferGeometry BoxGeometry CircleBufferGeometry CircleGeometry ConeBufferGeometry ConeGeometry CylinderBufferGeometry CylinderGeometry DodecahedronBufferGeometry DodecahedronGeometry EdgesGeometry ExtrudeBufferGeometry ExtrudeGeometry IcosahedronBufferGeometry IcosahedronGeometry LatheBufferGeometry LatheGeometry OctahedronBufferGeometry OctahedronGeometry ParametricBufferGeometry ParametricGeometry PlaneBufferGeometry PlaneGeometry PolyhedronBufferGeometry PolyhedronGeometry RingBufferGeometry RingGeometry ShapeBufferGeometry ShapeGeometry SphereBufferGeometry SphereGeometry TetrahedronBufferGeometry TetrahedronGeometry TextBufferGeometry TextGeometry TorusBufferGeometry TorusGeometry TorusKnotBufferGeometry TorusKnotGeometry TubeBufferGeometry TubeGeometry WireframeGeometry
辅助对象
ArrowHelper AxesHelper BoxHelper Box3Helper CameraHelper DirectionalLightHelper FaceNormalsHelper GridHelper PolarGridHelper PositionalAudioHelper HemisphereLightHelper PlaneHelper PointLightHelper RectAreaLightHelper SkeletonHelper SpotLightHelper VertexNormalsHelper
灯光
AmbientLight DirectionalLight HemisphereLight Light PointLight RectAreaLight SpotLight
灯光 / 阴影
DirectionalLightShadow LightShadow SpotLightShadow
加载器
AnimationLoader AudioLoader BufferGeometryLoader Cache CompressedTextureLoader CubeTextureLoader DataTextureLoader FileLoader FontLoader ImageBitmapLoader ImageLoader Loader LoaderUtils MaterialLoader ObjectLoader TextureLoader
加载器 / 管理器
DefaultLoadingManager LoadingManager
材质
LineBasicMaterial LineDashedMaterial Material MeshBasicMaterial MeshDepthMaterial MeshDistanceMaterial MeshLambertMaterial MeshMatcapMaterial MeshNormalMaterial MeshPhongMaterial MeshPhysicalMaterial MeshStandardMaterial MeshToonMaterial PointsMaterial RawShaderMaterial ShaderMaterial ShadowMaterial SpriteMaterial
数学库
Box2 Box3 Color Cylindrical Euler Frustum Interpolant Line3 Math Matrix3 Matrix4 Plane Quaternion Ray Sphere Spherical Triangle Vector2 Vector3 Vector4
数学库 / 插值
CubicInterpolant DiscreteInterpolant LinearInterpolant QuaternionLinearInterpolant
物体
Bone Group Line LineLoop LineSegments LOD Mesh Points Skeleton SkinnedMesh Sprite
渲染器
WebGLMultisampleRenderTarget WebGLRenderer WebGLRenderTarget WebGLRenderTargetCube
渲染器 / 着色器
ShaderChunk ShaderLib UniformsLib UniformsUtils
场景
Fog FogExp2 Scene
纹理贴图
CanvasTexture CompressedTexture CubeTexture DataTexture DataTexture3D DepthTexture Texture VideoTexture
在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

颜色(Color)

表示一个颜色。

示例(Examples)

颜色可以用以下任意一种方式初始化。

//empty constructor - will default white 
var color = new THREE.Color(); //Hexadecimal color (recommended) 
var color = new THREE.Color( 0xff0000 ); //RGB string 
var color = new THREE.Color("rgb(255, 0, 0)"); 
var color = new THREE.Color("rgb(100%, 0%, 0%)"); //X11 color name - all 140 color names are supported. 

//Note the lack of CamelCase in the name 
var color = new THREE.Color( 'skyblue' ); 
//HSL string 
var color = new THREE.Color("hsl(0, 100%, 50%)"); 
//Separate RGB values between 0 and 1 
var color = 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)

# .isColor : Boolean

用来检测此类或者派生类是否为颜色。默认值是 true

不应该去改变这个值,因为它在内部用于优化。

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

返回一个与当前颜色的 r, g 和 b 相同的颜色。

# .copy ( color : Color ) : Color

从 color 中拷贝 r, g 和 b 值到当前的颜色。

# .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对象。

# .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是第一个参数的颜色。

# .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”(全部是小写字母)。

# .sub ( color : Color ) : Color

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

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

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

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

源码(Source)

src/math/Color.js