ThreeJS-3D教学四-光源

three模拟的真实3D环境，一个非常炫酷的功能便是对光源的操控，之前教学一中已经简单的描述了多种光源，这次咱们就详细的讲下一些最常见的光源：

AmbientLight
该灯光在全局范围内平等地照亮场景中的所有对象。
该灯光不能用于投射阴影，因为它没有方向。

AmbientLight( color : Integer, intensity : Float )
color - （可选）颜色的RGB分量的数值。默认值为0xffffff。
intensity - （可选）灯光强度/强度的数值。默认值为1。

DirectionalLight
向特定方向发射的光。这种光的行为就像它是无限遥远的，并且从它产生的光线都是平行的。这方面的常见用例是模拟日光；太阳离得足够远，它的位置可以被认为是无限的，所有来自它的光线都是平行的。

DirectionalLight( color : Integer, intensity : Float )
color - （可选）灯光的十六进制颜色。默认值为0xffffff（白色）。
intensity - （可选）灯光强度/强度的数值。默认值为1。

PointLight
从一个点向所有方向发射的光。这方面的一个常见用例是复制裸灯泡发出的光。

PointLight( color : Integer, intensity : Float, distance : Number, decay : Float )
color - （可选）灯光的十六进制颜色。默认值为0xffffff（白色）
intensity - （可选）灯光强度/强度的数值。默认值为1.
distance - 光线的最大范围。默认值为0（无限制）
decay - 灯光沿着灯光的距离变暗的量。默认值为2.

HemisphereLight
位于场景正上方的光源，颜色从天空颜色渐变为地面颜色。此灯光不能用于投射阴影。

HemisphereLight( skyColor : Integer, groundColor : Integer, intensity : Float )
skyColor - （可选）天空的十六进制颜色。默认为0xffffff。
groundColor - （可选）地球的十六进制颜色。默认为0xffffff。
intensity - 可选）光的强度/强度的数值。默认为1。

SpotLight
这种光从一个方向的单个点发射，沿着一个圆锥体，该圆锥体的大小随着光的传播而增加。类似车灯的效果，可以做射灯、车灯等

SpotLight( color : Integer, intensity : Float, distance : Float, angle : Radians, penumbra : Float, decay : Float )
color -（可选）灯光的十六进制颜色。默认值为0xffffff（白色）。
intensity -（可选）灯光强度/强度的数值。默认值为1。
distance - 灯光的最大范围。默认值为0（无限制）。
angle - 光从其方向散射的最大角度，其上限为Math。π/2。
penumbra - 由于半影而衰减的聚光灯圆锥体的百分比。取值介于0和1之间。默认值为零。
decay - 光线沿着光线的距离变暗的量。

看了定义后，我们先看下本次案例的效果图

这个案例中涉及到了以上所有光源效果，其中DirectionalLight和HemisphereLight是注释掉了的，为的是突出PointLight 和 SpotLight的效果，在代码中会发现AmbientLight的灯光强度我也特意变暗了。
案例中首次使用了GUI操作器和物体阴影效果。
GUI主要作用：
1、获取一个对象和该对象上的属性名，并根据属性的类型自动生成一个界面组件来操作该属性。
2、使用它后，我们可以通过界面组件来控制场景中的物体，提高调试效率。

看代码：

  
  
  








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

关于shadow效果的设置我们需要特别注意：
1、我们需要首先在renderer中设置
2、需要阴影的物体需要设置
3、这一点是比较容易遗忘的，那就是物体通过光源产生的阴影 投射在哪，相应的物体也需要设置，这个点写这个案例时，我也忘了 折腾半天模型的投影看不到，突然想到我addPlane函数创建的平面没有设置，简直了，耗费了很长时间
当然案例中只是shadow的一种设置方式，后面会讲到别的方式。

案例中还有一个知识点，之所以我将人像模型放在边缘，也是为了这个。那就是spotLight光源默认指向中心点也就是 (0, 0, 0)点，这时我们还需要spotLight实现案例中的效果，必须改变spotLight的指向：

  const targetObject = new THREE.Object3D();
  targetObject.position.set(-50, 0, -50);
  scene.add(targetObject);
  // 这样就可以了
  spotLight.target = targetObject;
1
2
3
4
5