forked from serjIII/threejsSDK
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathColor.html
416 lines (339 loc) · 13.6 KB
/
Color.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<p class="desc">Class representing a color.</p>
<p>
Iterating through a [name] instance will yield its components (r, g, b) in
the corresponding order.
</p>
<h2>Code Examples</h2>
<p>A Color can be initialised in any of the following ways:</p>
<code>
//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 );
</code>
<h2>Constructor</h2>
<h3>
[name]( [param:Color_Hex_or_String r], [param:Float g], [param:Float b] )
</h3>
<p>
[page:Color_Hex_or_String r] - (optional) If arguments [page:Float g] and
[page:Float b] are defined, the red component of the color. If they are
not defined, it can be a
[link:https://en.wikipedia.org/wiki/Web_colors#Hex_triplet hexadecimal triplet] (recommended),
a CSS-style string, or another `Color` instance.<br />
[page:Float g] - (optional) If it is defined, the green component of the
color.<br />
[page:Float b] - (optional) If it is defined, the blue component of the
color.<br /><br />
Note that standard method of specifying color in three.js is with a
[link:https://en.wikipedia.org/wiki/Web_colors#Hex_triplet hexadecimal triplet],
and that method is used throughout the rest of the
documentation.<br /><br />
When all arguments are defined then [page:Color_Hex_or_String r] is the
red component, [page:Float g] is the green component and [page:Float b] is
the blue component of the color.<br />
When only [page:Color_Hex_or_String r] is defined:<br />
</p>
<ul>
<li>
It can be a [link:https://en.wikipedia.org/wiki/Web_colors#Hex_triplet hexadecimal triplet] representing the color (recommended).
</li>
<li>It can be an another Color instance.</li>
<li>
It can be a CSS-style string. For example:
<ul>
<li>'rgb(250, 0,0)'</li>
<li>'rgb(100%,0%,0%)'</li>
<li>'hsl(0, 100%, 50%)'</li>
<li>'#ff0000'</li>
<li>'#f00'</li>
<li>'red'</li>
</ul>
</li>
</ul>
<h2>Properties</h2>
<h3>[property:Boolean isColor]</h3>
<p>Read-only flag to check if a given object is of type [name].</p>
<h3>[property:Float r]</h3>
<p>Red channel value between `0` and `1`. Default is `1`.</p>
<h3>[property:Float g]</h3>
<p>Green channel value between `0` and `1`. Default is `1`.</p>
<h3>[property:Float b]</h3>
<p>Blue channel value between `0` and `1`. Default is `1`.</p>
<h2>Methods</h2>
<h3>[method:this add]( [param:Color color] )</h3>
<p>
Adds the RGB values of [page:Color color] to the RGB values of this color.
</p>
<h3>
[method:this addColors]( [param:Color color1], [param:Color color2] )
</h3>
<p>
Sets this color's RGB values to the sum of the RGB values of [page:Color color1] and [page:Color color2].
</p>
<h3>[method:this addScalar]( [param:Number s] )</h3>
<p>Adds [page:Number s] to the RGB values of this color.</p>
<h3>[method:this applyMatrix3]( [param:Matrix3 m] )</h3>
<p>
Applies the transform [page:Matrix3 m] to this color's RGB components.
</p>
<h3>[method:Color clone]()</h3>
<p>
Returns a new Color with the same [page:.r r], [page:.g g] and [page:.b b]
values as this one.
</p>
<h3>[method:this copy]( [param:Color color] )</h3>
<p>
Copies the [page:.r r], [page:.g g] and [page:.b b] parameters from
[page:Color color] in to this color.
</p>
<h3>[method:this convertLinearToSRGB]()</h3>
<p>Converts this color from linear space to sRGB space.</p>
<h3>[method:this convertSRGBToLinear]()</h3>
<p>Converts this color from sRGB space to linear space.</p>
<h3>[method:this copyLinearToSRGB]( [param:Color color] )</h3>
<p>
[page:Color color] — Color to copy.<br />
Copies the given color into this color, and then converts this color from
linear space to sRGB space.
</p>
<h3>[method:this copySRGBToLinear]( [param:Color color] )</h3>
<p>
[page:Color color] — Color to copy.<br />
Copies the given color into this color, and then converts this color from
sRGB space to linear space.
</p>
<h3>[method:Boolean equals]( [param:Color color] )</h3>
<p>
Compares the RGB values of [page:Color color] with those of this object.
Returns true if they are the same, false otherwise.
</p>
<h3>
[method:this fromArray]( [param:Array array], [param:Integer offset] )
</h3>
<p>
[page:Array array] - [page:Array] of floats in the form [ [page:Float r],
[page:Float g], [page:Float b] ].<br />
[page:Integer offset] - An optional offset into the array.<br /><br />
Sets this color's components based on an array formatted like [
[page:Float r], [page:Float g], [page:Float b] ].
</p>
<h3>
[method:this fromBufferAttribute]( [param:BufferAttribute attribute], [param:Integer index] )
</h3>
<p>
[page:BufferAttribute attribute] - the source attribute.<br />
[page:Integer index] - index in the attribute.<br /><br />
Sets this color's components from the [page:BufferAttribute attribute].
</p>
<h3>
[method:Integer getHex]( [param:string colorSpace] = SRGBColorSpace )
</h3>
<p>Returns the hexadecimal value of this color.</p>
<h3>
[method:String getHexString]( [param:string colorSpace] = SRGBColorSpace )
</h3>
<p>
Returns the hexadecimal value of this color as a string (for example,
'FFFFFF').
</p>
<h3>
[method:Object getHSL]( [param:Object target], [param:string colorSpace] = LinearSRGBColorSpace )
</h3>
<p>
[page:Object target] — the result will be copied into this Object. Adds h,
s and l keys to the object (if not already present).<br /><br />
Convert this Color's [page:.r r], [page:.g g] and [page:.b b] values to
[link:https://en.wikipedia.org/wiki/HSL_and_HSV HSL] format and returns an
object of the form:
<code>
{
h: 0,
s: 0,
l: 0
}
</code>
</p>
<h3>
[method:Color getRGB]( [param:Color target], [param:string colorSpace] = LinearSRGBColorSpace )
</h3>
<p>
[page:Color target] — the result will be copied into this object.<br /><br />
Returns the RGB values of this color as an instance of [page:Color].
</p>
<h3>
[method:String getStyle]( [param:string colorSpace] = SRGBColorSpace )
</h3>
<p>
Returns the value of this color as a CSS style string. Example:
`rgb(255,0,0)`.
</p>
<h3>[method:this lerp]( [param:Color color], [param:Float alpha] )</h3>
<p>
[page:Color color] - color to converge on.<br />
[page:Float alpha] - interpolation factor in the closed interval `[0,
1]`.<br /><br />
Linearly interpolates this color's RGB values toward the RGB values of the
passed argument. The alpha argument can be thought of as the ratio between
the two colors, where `0.0` is this color and `1.0` is the first argument.
</p>
<h3>
[method:this lerpColors]( [param:Color color1], [param:Color color2], [param:Float alpha] )
</h3>
<p>
[page:Color color1] - the starting [page:Color].<br />
[page:Color color2] - [page:Color] to interpolate towards.<br />
[page:Float alpha] - interpolation factor, typically in the closed
interval `[0, 1]`.<br /><br />
Sets this color to be the color linearly interpolated between [page:Color color1]
and [page:Color color2] where alpha is the percent distance along
the line connecting the two colors - alpha = 0 will be [page:Color color1],
and alpha = 1 will be [page:Color color2].
</p>
<h3>[method:this lerpHSL]( [param:Color color], [param:Float alpha] )</h3>
<p>
[page:Color color] - color to converge on.<br />
[page:Float alpha] - interpolation factor in the closed interval `[0,
1]`.<br /><br />
Linearly interpolates this color's HSL values toward the HSL values of the
passed argument. It differs from the classic [page:.lerp] by not
interpolating straight from one color to the other, but instead going
through all the hues in between those two colors. The alpha argument can
be thought of as the ratio between the two colors, where 0.0 is this color
and 1.0 is the first argument.
</p>
<h3>[method:this multiply]( [param:Color color] )</h3>
<p>
Multiplies this color's RGB values by the given [page:Color color]'s RGB
values.
</p>
<h3>[method:this multiplyScalar]( [param:Number s] )</h3>
<p>Multiplies this color's RGB values by [page:Number s].</p>
<h3>
[method:this offsetHSL]( [param:Float h], [param:Float s], [param:Float l] )
</h3>
<p>
Adds the given [page:Float h], [page:Float s], and [page:Float l] to this
color's values. Internally, this converts the color's [page:.r r],
[page:.g g] and [page:.b b] values to HSL, adds [page:Float h],
[page:Float s], and [page:Float l], and then converts the color back to
RGB.
</p>
<h3>[method:this set]( [param:Color_Hex_or_String r], [param:Float g], [param:Float b] )</h3>
<p>
[page:Color_Hex_or_String r] - (optional) If arguments [page:Float g] and [page:Float b] are defined, the red component of the color. If they are
not defined, it can be a [link:https://en.wikipedia.org/wiki/Web_colors#Hex_triplet hexadecimal triplet] (recommended), a CSS-style string, or another `Color` instance.<br />
[page:Float g] - (optional) If it is defined, the green component of the color.<br />
[page:Float b] - (optional) If it is defined, the blue component of the color.<br /><br />
See the Constructor above for full details about possible arguments. Delegates to [page:.copy],
[page:.setStyle], [page:.setRGB] or [page:.setHex] depending on input type.
</p>
<h3>[method:this setFromVector3]( [param:Vector3 vector] )</h3>
<p>
Sets this colors's [page:.r r], [page:.g g] and [page:.b b] components
from the x, y, and z components of the specified [page:Vector3 vector].
</p>
<h3>
[method:this setHex]( [param:Integer hex], [param:string colorSpace] = SRGBColorSpace )
</h3>
<p>
[page:Integer hex] —
[link:https://en.wikipedia.org/wiki/Web_colors#Hex_triplet hexadecimal triplet] format.<br /><br />
Sets this color from a hexadecimal value.
</p>
<h3>
[method:this setHSL]( [param:Float h], [param:Float s], [param:Float l], [param:string colorSpace] = LinearSRGBColorSpace )
</h3>
<p>
[page:Float h] — hue value between `0.0` and `1.0` <br />
[page:Float s] — saturation value between `0.0` and `1.0` <br />
[page:Float l] — lightness value between `0.0` and `1.0`<br /><br />
Sets color from HSL values.
</p>
<h3>
[method:this setRGB]( [param:Float r], [param:Float g], [param:Float b], [param:string colorSpace] = LinearSRGBColorSpace )
</h3>
<p>
[page:Float r] — Red channel value between `0.0` and `1.0`.<br />
[page:Float g] — Green channel value between `0.0` and `1.0`.<br />
[page:Float b] — Blue channel value between `0.0` and `1.0`.<br /><br />
Sets this color from RGB values.
</p>
<h3>[method:this setScalar]( [param:Float scalar] )</h3>
<p>
[page:Float scalar] — a value between `0.0` and `1.0`.<br /><br />
Sets all three color components to the value [page:Float scalar].
</p>
<h3>
[method:this setStyle]( [param:String style], [param:string colorSpace] = SRGBColorSpace )
</h3>
<p>
[page:String style] — color as a CSS-style string.<br /><br />
Sets this color from a CSS-style string. For example, "rgb(250, 0,0)",
"rgb(100%, 0%, 0%)", "hsl(0, 100%, 50%)", "#ff0000", "#f00", or "red" ( or
any [link:https://en.wikipedia.org/wiki/X11_color_names#Color_name_chart X11 color name] -
all 140 color names are supported ).<br />
Translucent colors such as "rgba(255, 0, 0, 0.5)" and "hsla(0, 100%, 50%,
0.5)" are also accepted, but the alpha-channel coordinate will be
discarded.<br /><br />
Note that for X11 color names, multiple words such as Dark Orange become
the string 'darkorange'.
</p>
<h3>
[method:this setColorName]( [param:String style], [param:string colorSpace] = SRGBColorSpace )
</h3>
<p>
[page:String style] — color name ( from
[link:https://en.wikipedia.org/wiki/X11_color_names#Color_name_chart X11 color names] ).<br /><br />
Sets this color from a color name. Faster than [page:.setStyle] method if
you don't need the other CSS-style formats.<br /><br />
For convenience, the list of names is exposed in Color.NAMES as a hash:
<code>
Color.NAMES.aliceblue // returns 0xF0F8FF
</code>
</p>
<h3>[method:this sub]( [param:Color color] )</h3>
<p>
Subtracts the RGB components of the given color from the RGB components of
this color. If this results in a negative component, that component is set
to zero.
</p>
<h3>
[method:Array toArray]( [param:Array array], [param:Integer offset] )
</h3>
<p>
[page:Array array] - An optional array to store the color to. <br />
[page:Integer offset] - An optional offset into the array.<br /><br />
Returns an array of the form [ r, g, b ].
</p>
<h3>[method:Number toJSON]()</h3>
<p>
This methods defines the serialization result of [name]. Returns the color
as a hexadecimal value.
</p>
<h2>Source</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>