/
Color.html
244 lines (204 loc) · 6.93 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<div class="desc">
Represents a color.
</div>
<h2>Example</h2>
<code>var color = new THREE.Color();</code>
<code>var color = new THREE.Color( 0xff0000 );</code>
<code>var color = new THREE.Color("rgb(255, 0, 0)");</code>
<code>var color = new THREE.Color("rgb(100%, 0%, 0%)");</code>
<code>var color = new THREE.Color("hsl(0, 100%, 50%)");</code>
<code>var color = new THREE.Color( 1, 0, 0 );</code>
<h2>Constructor</h2>
<h3>[name]( r, g, b )</h3>
<div>
r - the red component of the color if arguments g and b are defined. If they are not defined, it can be a hexadecimal or a CSS-style string or a Color instance.<br />
g - The green component of the color if it is defined.<br />
b - The blue component of the color if it is defined.
</div>
<div>
All arguments are optional. The default color is White.<br />
When all arguments are defined then r is the red component, g is the green component and b is the blue component of the color.<br />
When only r is defined:<br />
<ul>
<li>It can be a hexadecimal of the color.</li>
<li>It can be an another color instance.</li>
<li>It can be a CSS style. For Instance:
<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>
</div>
<h2>Properties</h2>
<h3>[property:Float r]</h3>
<div>
Red channel value between 0 and 1. Default is 1.
</div>
<h3>[property:Float g]</h3>
<div>
Green channel value between 0 and 1. Default is 1.
</div>
<h3>[property:Float b]</h3>
<div>
Blue channel value between 0 and 1. Default is 1.
</div>
<h2>Methods</h2>
<h3>[method:Color set]( value ) [page:Color this]</h3>
<div>
value -- either an instance of [page:Color], a [page:Integer hexadecimal] value, or a css style [page:String string]
</div>
<div>
Delegates to .copy, .setStyle, or .setHex depending on input type.
</div>
<h3>[method:Color copy]( [page:Color color] ) [page:Color this]</h3>
<div>
color — Color to copy.
</div>
<div>
Copies given color.
</div>
<h3>[method:Color fromArray]( [page:Array array], [page:Integer offset] ) [page:Color this]</h3>
<div>
array -- [page:Array] [r, g, b] <br />
offset -- [page:Integer] An optional offset into the array.
</div>
<div>
Sets this color's components based on an array formatted like [r, g, b]
</div>
<h3>[method:Color copyGammaToLinear]( [page:Color color] ) [page:Color this]</h3>
<div>
color — Color to copy.
</div>
<div>
Copies given color making conversion from gamma to linear space.
</div>
<h3>[method:Color copyLinearToGamma]( [page:Color color] ) [page:Color this]</h3>
<div>
color — Color to copy.
</div>
<div>
Copies given color making conversion from linear to gamma space.
</div>
<h3>[method:Color convertGammaToLinear]() [page:Color this]</h3>
<div>
Converts this color from gamma to linear space.
</div>
<h3>[method:Color convertLinearToGamma]() [page:Color this]</h3>
<div>
Converts this color from linear to gamma space.
</div>
<h3>[method:Color setRGB]( [page:Float r], [page:Float g], [page:Float b] ) [page:Color this]</h3>
<div>
r — Red channel value between 0 and 1.<br />
g — Green channel value between 0 and 1.<br />
b — Blue channel value between 0 and 1.
</div>
<div>
Sets this color from RGB values.
</div>
<h3>[method:Integer getHex]()</h3>
<div>
Returns the hexadecimal value of this color.
</div>
<h3>[method:String getHexString]()</h3>
<div>
Returns the string formated hexadecimal value of this color.
</div>
<h3>[method:Color setHex]( [page:Integer hex] ) [page:Color this]</h3>
<div>
hex — Color in hexadecimal.<br />
</div>
<div>
Sets this color from a hexadecimal value.
</div>
<h3>[method:Color setStyle]( [page:String style] ) [page:Color this]</h3>
<div>
style — color as a CSS-style string.
</div>
<div>
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". Transluent 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.
</div>
<h3>[method:String getStyle]()</h3>
<div>
Returns the value of this color as a CSS-style string. Example: rgb(255,0,0)
</div>
<h3>[method:Color setHSL]( [page:Float h], [page:Float s], [page:Float l] ) [page:Color this]</h3>
<div>
h — hue value between 0.0 and 1.0 <br />
s — saturation value between 0.0 and 1.0 <br />
l — lightness value between 0.0 and 1.0
</div>
<div>
Sets color from hsl
</div>
<h3>[method:Object getHSL]() [page:Object hsl]</h3>
<div>
Returns an object with properties h, s, and l.
</div>
<h3>[method:Color offsetHSL]( [page:Float h], [page:Float s], [page:Float l] ) [page:Color this]</h3>
<div>
Adds given h, s, and l to this color's existing h, s, and l values.
</div>
<h3>[method:Color add]( [page:Color color] ) [page:Color this]</h3>
<div>
Adds rgb values of given color to rgb values of this color
</div>
<h3>[method:Color addColors]( [page:Color color1], [page:Color color2] ) [page:Color this]</h3>
<div>
Sets this color to the sum of color1 and color2
</div>
<h3>[method:Color addScalar]( [page:Number s] ) [page:Color this]</h3>
<div>
Adds s to the rgb values of this color
</div>
<h3>[method:Color multiply]( [page:Color color] ) [page:Color this]</h3>
<div>
Multiplies this color's rgb values by given color's rgb values
</div>
<h3>[method:Color multiplyScalar]( [page:Number s] ) [page:Color this]</h3>
<div>
Multiplies this color's rgb values by s
</div>
<h3>[method:Color lerp]( [page:Color color], alpha ) [page:Color this]</h3>
<div>
alpha -- a number between 0 and 1.
</div>
<div>
Linear interpolation of this colors rgb values and the rgb values of the first argument. The alpha argument can be thought of as the percent between the two colors, where 0 is this color and 1 is the first argument.
</div>
<h3>[method:Color equals]( [page:Color c] ) [page:Color this]</h3>
<div>
Compares this color and c and returns true if they are the same, false otherwise.
</div>
<h3>[method:Color clone]() [page:Color this]</h3>
<div>
Clones this color.
</div>
<h3>[method:Array toArray]( [page:Array array], [page:Integer offset] ) [page:Color this]</h3>
<div>
array -- An optional array to store the color to. <br />
offset -- An optional offset into the array.
</div>
<div>
Returns an array [r,g,b]
</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>