0
# Lights
1

2
Lighting system providing illumination for 3D scenes through various light types, shadow casting, and physically-based lighting calculations. Lights determine how materials appear under different illumination conditions.
3

4
## Capabilities
5

6
### Light Base Class
7

8
Abstract foundation for all light types providing common color, intensity, and transformation properties.
9

10
```typescript { .api }
11
import { Light, Object3D, Color, LightShadow } from 'three';
12

13
/**
14
 * Abstract base class for all light types
15
 */
16
abstract class Light extends Object3D {
17
  /** Type flag for light detection */
18
  readonly isLight: true;
19
  
20
  /** Light color */
21
  color: Color;
22
  
23
  /** Light intensity */
24
  intensity: number;
25
  
26
  /** Shadow configuration (if supported) */
27
  shadow?: LightShadow;
28
  
29
  /**
30
   * Create base light
31
   * @param color - Light color (default: 0xffffff)
32
   * @param intensity - Light intensity (default: 1)
33
   */
34
  constructor(color?: Color | string | number, intensity?: number);
35
  
36
  /**
37
   * Dispose light resources
38
   */
39
  dispose(): void;
40
  
41
  /**
42
   * Copy properties from another light
43
   * @param source - Source light
44
   * @param recursive - Copy children recursively
45
   * @returns This light for chaining
46
   */
47
  copy(source: Light, recursive?: boolean): this;
48
  
49
  /**
50
   * Serialize to JSON
51
   * @param meta - Metadata object
52
   * @returns JSON representation
53
   */
54
  toJSON(meta?: any): any;
55
}
56
```
57

58
**Usage Examples:**
59

60
```typescript
61
import { Light, Color } from 'three';
62

63
// Basic light properties (available on all lights)
64
light.color = new Color(0xff0000);
65
light.intensity = 2.0;
66
light.position.set(10, 10, 10);
67

68
// Enable shadows (if supported)
69
if (light.shadow) {
70
  light.castShadow = true;
71
  light.shadow.mapSize.width = 2048;
72
  light.shadow.mapSize.height = 2048;
73
}
74

75
// Dispose when no longer needed
76
light.dispose();
77
```
78

79
### Directional Light
80

81
Parallel light rays simulating distant sources like the sun, with configurable target and shadow mapping.
82

83
```typescript { .api }
84
import { DirectionalLight, Light, Object3D, DirectionalLightShadow } from 'three';
85

86
/**
87
 * Directional light with parallel rays (sun-like illumination)
88
 */
89
class DirectionalLight extends Light {
90
  /** Type flag for directional light detection */
91
  readonly isDirectionalLight: true;
92
  
93
  /** Light target object (determines direction) */
94
  target: Object3D;
95
  
96
  /** Shadow configuration */
97
  shadow: DirectionalLightShadow;
98
  
99
  /**
100
   * Create directional light
101
   * @param color - Light color (default: 0xffffff)
102
   * @param intensity - Light intensity (default: 1)
103
   */
104
  constructor(color?: Color | string | number, intensity?: number);
105
  
106
  /**
107
   * Dispose directional light resources
108
   */
109
  dispose(): void;
110
  
111
  /**
112
   * Copy from another directional light
113
   * @param source - Source light
114
   * @param recursive - Copy children recursively
115
   * @returns This light for chaining
116
   */
117
  copy(source: DirectionalLight, recursive?: boolean): this;
118
}
119

120
/**
121
 * Shadow configuration for directional lights
122
 */
123
class DirectionalLightShadow extends LightShadow {
124
  /** Type flag for directional shadow detection */
125
  readonly isDirectionalLightShadow: true;
126
  
127
  /** Shadow camera (orthographic) */
128
  camera: OrthographicCamera;
129
  
130
  /**
131
   * Create directional light shadow
132
   */
133
  constructor();
134
}
135
```
136

137
**Usage Examples:**
138

139
```typescript
140
import { DirectionalLight, Object3D } from 'three';
141

142
// Create sun-like directional light
143
const sunlight = new DirectionalLight(0xffffff, 1);
144
sunlight.position.set(10, 10, 5);
145
sunlight.castShadow = true;
146

147
// Configure target (light direction)
148
const target = new Object3D();
149
target.position.set(0, 0, 0);
150
scene.add(target);
151
sunlight.target = target;
152

153
// Configure shadows
154
sunlight.shadow.mapSize.width = 2048;
155
sunlight.shadow.mapSize.height = 2048;
156
sunlight.shadow.camera.near = 0.5;
157
sunlight.shadow.camera.far = 50;
158

159
// Set shadow camera frustum
160
sunlight.shadow.camera.left = -10;
161
sunlight.shadow.camera.right = 10;
162
sunlight.shadow.camera.top = 10;
163
sunlight.shadow.camera.bottom = -10;
164

165
scene.add(sunlight);
166

167
// Helper for visualizing light direction
168
const helper = new DirectionalLightHelper(sunlight, 5);
169
scene.add(helper);
170
```
171

172
### Point Light
173

174
Omnidirectional light emitting from a single point with distance-based attenuation and cube shadow mapping.
175

176
```typescript { .api }
177
import { PointLight, Light, PointLightShadow } from 'three';
178

179
/**
180
 * Point light emitting in all directions (bulb-like illumination)
181
 */
182
class PointLight extends Light {
183
  /** Type flag for point light detection */
184
  readonly isPointLight: true;
185
  
186
  /** Maximum light distance (0 = infinite) */
187
  distance: number;
188
  
189
  /** Light decay rate */
190
  decay: number;
191
  
192
  /** Shadow configuration */
193
  shadow: PointLightShadow;
194
  
195
  /** Power in lumens (WebGPURenderer only) */
196
  power: number;
197
  
198
  /**
199
   * Create point light
200
   * @param color - Light color (default: 0xffffff)
201
   * @param intensity - Light intensity (default: 1)
202
   * @param distance - Maximum distance (default: 0)
203
   * @param decay - Decay rate (default: 2)
204
   */
205
  constructor(
206
    color?: Color | string | number,
207
    intensity?: number,
208
    distance?: number,
209
    decay?: number
210
  );
211
  
212
  /** Get power in lumens */
213
  readonly power: number;
214
  
215
  /** Set power in lumens */
216
  set power(power: number);
217
  
218
  /**
219
   * Dispose point light resources
220
   */
221
  dispose(): void;
222
  
223
  /**
224
   * Copy from another point light
225
   * @param source - Source light
226
   * @param recursive - Copy children recursively
227
   * @returns This light for chaining
228
   */
229
  copy(source: PointLight, recursive?: boolean): this;
230
}
231

232
/**
233
 * Shadow configuration for point lights (cube shadow mapping)
234
 */
235
class PointLightShadow extends LightShadow {
236
  /** Type flag for point shadow detection */
237
  readonly isPointLightShadow: true;
238
  
239
  /** Shadow camera (perspective) */
240
  camera: PerspectiveCamera;
241
  
242
  /**
243
   * Create point light shadow
244
   */
245
  constructor();
246
  
247
  /**
248
   * Update shadow matrices for cube faces
249
   * @param light - Point light casting shadow
250
   * @param viewportIndex - Cube face index
251
   */
252
  updateMatrices(light: Light, viewportIndex?: number): void;
253
}
254
```
255

256
**Usage Examples:**
257

258
```typescript
259
import { PointLight } from 'three';
260

261
// Create light bulb
262
const bulb = new PointLight(0xffaa00, 1, 100);
263
bulb.position.set(0, 10, 0);
264
bulb.castShadow = true;
265

266
// Configure attenuation
267
bulb.distance = 50; // Light reaches 50 units
268
bulb.decay = 1;     // Linear decay
269

270
// Configure shadows (cube mapping)
271
bulb.shadow.mapSize.width = 512;
272
bulb.shadow.mapSize.height = 512;
273
bulb.shadow.camera.near = 0.5;
274
bulb.shadow.camera.far = 50;
275

276
scene.add(bulb);
277

278
// Power-based intensity (physically correct)
279
bulb.power = 4 * Math.PI * 100; // 100 cd * 4π sr
280

281
// Helper for visualization
282
const helper = new PointLightHelper(bulb, 1);
283
scene.add(helper);
284
```
285

286
### Spot Light
287

288
Cone-shaped light with configurable angle, penumbra, and target-based direction control.
289

290
```typescript { .api }
291
import { SpotLight, Light, Object3D, SpotLightShadow, Texture } from 'three';
292

293
/**
294
 * Spot light emitting in a cone (flashlight-like illumination)
295
 */
296
class SpotLight extends Light {
297
  /** Type flag for spot light detection */
298
  readonly isSpotLight: true;
299
  
300
  /** Light target object (determines direction) */
301
  target: Object3D;
302
  
303
  /** Maximum light distance (0 = infinite) */
304
  distance: number;
305
  
306
  /** Cone angle in radians */
307
  angle: number;
308
  
309
  /** Penumbra soft edge (0-1) */
310
  penumbra: number;
311
  
312
  /** Light decay rate */
313
  decay: number;
314
  
315
  /** Light texture/cookie */
316
  map: Texture | null;
317
  
318
  /** Shadow configuration */
319
  shadow: SpotLightShadow;
320
  
321
  /** Power in lumens (WebGPURenderer only) */
322
  power: number;
323
  
324
  /**
325
   * Create spot light
326
   * @param color - Light color (default: 0xffffff)
327
   * @param intensity - Light intensity (default: 1)
328
   * @param distance - Maximum distance (default: 0)
329
   * @param angle - Cone angle (default: Math.PI/3)
330
   * @param penumbra - Penumbra softness (default: 0)
331
   * @param decay - Decay rate (default: 2)
332
   */
333
  constructor(
334
    color?: Color | string | number,
335
    intensity?: number,
336
    distance?: number,
337
    angle?: number,
338
    penumbra?: number,
339
    decay?: number
340
  );
341
  
342
  /** Get power in lumens */
343
  readonly power: number;
344
  
345
  /** Set power in lumens */
346
  set power(power: number);
347
  
348
  /**
349
   * Dispose spot light resources
350
   */
351
  dispose(): void;
352
  
353
  /**
354
   * Copy from another spot light
355
   * @param source - Source light
356
   * @param recursive - Copy children recursively
357
   * @returns This light for chaining
358
   */
359
  copy(source: SpotLight, recursive?: boolean): this;
360
}
361

362
/**
363
 * Shadow configuration for spot lights
364
 */
365
class SpotLightShadow extends LightShadow {
366
  /** Type flag for spot shadow detection */
367
  readonly isSpotLightShadow: true;
368
  
369
  /** Shadow camera (perspective) */
370
  camera: PerspectiveCamera;
371
  
372
  /** Focus for shadow camera */
373
  focus: number;
374
  
375
  /**
376
   * Create spot light shadow
377
   */
378
  constructor();
379
  
380
  /**
381
   * Update shadow matrices
382
   * @param light - Spot light casting shadow
383
   */
384
  updateMatrices(light: Light): void;
385
}
386
```
387

388
**Usage Examples:**
389

390
```typescript
391
import { SpotLight, Object3D, TextureLoader } from 'three';
392

393
// Create flashlight/headlight
394
const spotlight = new SpotLight(0xffffff, 1);
395
spotlight.position.set(10, 10, 5);
396
spotlight.angle = Math.PI / 6;     // 30 degree cone
397
spotlight.penumbra = 0.2;          // Soft edges
398
spotlight.decay = 2;               // Physical decay
399
spotlight.distance = 100;
400

401
// Set target
402
const target = new Object3D();
403
target.position.set(0, 0, 0);
404
scene.add(target);
405
spotlight.target = target;
406

407
// Add texture projection (cookie/gobo)
408
const loader = new TextureLoader();
409
const lightTexture = loader.load('textures/spotlight-pattern.jpg');
410
spotlight.map = lightTexture;
411

412
// Configure shadows
413
spotlight.castShadow = true;
414
spotlight.shadow.mapSize.width = 1024;
415
spotlight.shadow.mapSize.height = 1024;
416
spotlight.shadow.camera.near = 0.5;
417
spotlight.shadow.camera.far = 50;
418
spotlight.shadow.camera.fov = 30;
419

420
scene.add(spotlight);
421

422
// Helper for visualization
423
const helper = new SpotLightHelper(spotlight);
424
scene.add(helper);
425
```
426

427
### Ambient and Hemisphere Light
428

429
Global illumination providing base lighting without directional characteristics.
430

431
```typescript { .api }
432
import { AmbientLight, HemisphereLight, Light, Color } from 'three';
433

434
/**
435
 * Ambient light providing uniform illumination from all directions
436
 */
437
class AmbientLight extends Light {
438
  /** Type flag for ambient light detection */
439
  readonly isAmbientLight: true;
440
  
441
  /**
442
   * Create ambient light
443
   * @param color - Light color (default: 0xffffff)
444
   * @param intensity - Light intensity (default: 1)
445
   */
446
  constructor(color?: Color | string | number, intensity?: number);
447
  
448
  /**
449
   * Copy from another ambient light
450
   * @param source - Source light
451
   * @returns This light for chaining
452
   */
453
  copy(source: AmbientLight): this;
454
}
455

456
/**
457
 * Hemisphere light with sky and ground colors
458
 */
459
class HemisphereLight extends Light {
460
  /** Type flag for hemisphere light detection */
461
  readonly isHemisphereLight: true;
462
  
463
  /** Ground color (bottom hemisphere) */
464
  groundColor: Color;
465
  
466
  /**
467
   * Create hemisphere light
468
   * @param skyColor - Sky color (default: 0xffffff)
469
   * @param groundColor - Ground color (default: 0xffffff)
470
   * @param intensity - Light intensity (default: 1)
471
   */
472
  constructor(
473
    skyColor?: Color | string | number,
474
    groundColor?: Color | string | number,
475
    intensity?: number
476
  );
477
  
478
  /**
479
   * Copy from another hemisphere light
480
   * @param source - Source light
481
   * @param recursive - Copy children recursively
482
   * @returns This light for chaining
483
   */
484
  copy(source: HemisphereLight, recursive?: boolean): this;
485
}
486
```
487

488
**Usage Examples:**
489

490
```typescript
491
import { AmbientLight, HemisphereLight, Color } from 'three';
492

493
// Basic ambient lighting
494
const ambient = new AmbientLight(0x404040, 0.4); // Dim white
495
scene.add(ambient);
496

497
// Natural hemisphere lighting
498
const hemisphere = new HemisphereLight(
499
  0x87CEEB, // Sky blue
500
  0x8B4513, // Ground brown
501
  0.6
502
);
503
hemisphere.position.set(0, 50, 0);
504
scene.add(hemisphere);
505

506
// Colored ambient for mood
507
const coloredAmbient = new AmbientLight(0x330066, 0.2); // Purple tint
508
scene.add(coloredAmbient);
509
```
510

511
### Area and Probe Lights
512

513
Advanced lighting for realistic illumination and image-based lighting.
514

515
```typescript { .api }
516
import { 
517
  RectAreaLight, 
518
  LightProbe, 
519
  Light, 
520
  SphericalHarmonics3 
521
} from 'three';
522

523
/**
524
 * Rectangular area light for realistic lighting
525
 */
526
class RectAreaLight extends Light {
527
  /** Type flag for area light detection */
528
  readonly isRectAreaLight: true;
529
  
530
  /** Light width */
531
  width: number;
532
  
533
  /** Light height */
534
  height: number;
535
  
536
  /**
537
   * Create rectangular area light
538
   * @param color - Light color (default: 0xffffff)
539
   * @param intensity - Light intensity (default: 1)
540
   * @param width - Light width (default: 10)
541
   * @param height - Light height (default: 10)
542
   */
543
  constructor(
544
    color?: Color | string | number,
545
    intensity?: number,
546
    width?: number,
547
    height?: number
548
  );
549
  
550
  /** Get power in lumens */
551
  readonly power: number;
552
  
553
  /** Set power in lumens */
554
  set power(power: number);
555
  
556
  /**
557
   * Copy from another area light
558
   * @param source - Source light
559
   * @param recursive - Copy children recursively
560
   * @returns This light for chaining
561
   */
562
  copy(source: RectAreaLight, recursive?: boolean): this;
563
}
564

565
/**
566
 * Light probe for image-based lighting
567
 */
568
class LightProbe extends Light {
569
  /** Type flag for light probe detection */
570
  readonly isLightProbe: true;
571
  
572
  /** Spherical harmonics coefficients */
573
  sh: SphericalHarmonics3;
574
  
575
  /**
576
   * Create light probe
577
   * @param sh - Spherical harmonics (optional)
578
   * @param intensity - Light intensity (default: 1)
579
   */
580
  constructor(sh?: SphericalHarmonics3, intensity?: number);
581
  
582
  /**
583
   * Copy from another light probe
584
   * @param source - Source light probe
585
   * @returns This light for chaining
586
   */
587
  copy(source: LightProbe): this;
588
  
589
  /**
590
   * Initialize from cube texture
591
   * @param cubeTexture - Environment cube texture
592
   * @param size - Sample size
593
   * @returns This light probe for chaining
594
   */
595
  fromJSON(json: any): this;
596
}
597
```
598

599
**Usage Examples:**
600

601
```typescript
602
import { RectAreaLight, LightProbe, CubeTextureLoader } from 'three';
603

604
// Rectangular area light (like LED panel)
605
const areaLight = new RectAreaLight(0xffffff, 5, 4, 4);
606
areaLight.position.set(0, 10, 0);
607
areaLight.lookAt(0, 0, 0);
608
scene.add(areaLight);
609

610
// Requires RectAreaLightUniformsLib
611
import { RectAreaLightUniformsLib } from 'three/addons/lights/RectAreaLightUniformsLib.js';
612
RectAreaLightUniformsLib.init();
613

614
// Image-based lighting with probe
615
const loader = new CubeTextureLoader();
616
const cubeTexture = loader.load([
617
  'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg'
618
]);
619

620
const lightProbe = new LightProbe();
621
// Use LightProbeGenerator to create from cube texture
622
// lightProbe.copy(LightProbeGenerator.fromCubeTexture(cubeTexture));
623
scene.add(lightProbe);
624
```
625

626
### Shadow System
627

628
Shadow casting and receiving configuration for realistic depth and occlusion effects.
629

630
```typescript { .api }
631
import { 
632
  LightShadow,
633
  DirectionalLightShadow,
634
  PointLightShadow,
635
  SpotLightShadow,
636
  Camera,
637
  WebGLRenderTarget,
638
  Vector2,
639
  Vector4,
640
  Matrix4
641
} from 'three';
642

643
/**
644
 * Base shadow configuration class
645
 */
646
abstract class LightShadow {
647
  /** Shadow camera for rendering */
648
  camera: Camera;
649
  
650
  /** Shadow map render target */
651
  map: WebGLRenderTarget | null;
652
  
653
  /** Shadow map size */
654
  mapSize: Vector2;
655
  
656
  /** Shadow camera matrices */
657
  matrix: Matrix4;
658
  
659
  /** Auto-update shadow */
660
  autoUpdate: boolean;
661
  
662
  /** Needs shadow update */
663
  needsUpdate: boolean;
664
  
665
  /** Shadow bias to prevent acne */
666
  bias: number;
667
  
668
  /** Normal bias */
669
  normalBias: number;
670
  
671
  /** Shadow map radius for soft shadows */
672
  radius: number;
673
  
674
  /** Blur samples for soft shadows */
675
  blurSamples: number;
676
  
677
  /**
678
   * Get shadow viewport
679
   * @returns Shadow viewport
680
   */
681
  getViewport(viewportIndex: number): Vector4;
682
  
683
  /**
684
   * Get viewport count
685
   * @returns Number of viewports
686
   */
687
  getViewportCount(): number;
688
  
689
  /**
690
   * Update shadow matrices
691
   * @param light - Light casting shadow
692
   */
693
  updateMatrices(light: Light): void;
694
  
695
  /**
696
   * Get shadow frame extents
697
   * @returns Frame extents
698
   */
699
  getFrameExtents(): Vector2;
700
  
701
  /**
702
   * Dispose shadow resources
703
   */
704
  dispose(): void;
705
  
706
  /**
707
   * Copy from another shadow
708
   * @param source - Source shadow
709
   * @returns This shadow for chaining
710
   */
711
  copy(source: LightShadow): this;
712
  
713
  /**
714
   * Clone shadow
715
   * @returns Cloned shadow
716
   */
717
  clone(): this;
718
  
719
  /**
720
   * Serialize to JSON
721
   * @returns JSON representation
722
   */
723
  toJSON(): any;
724
}
725
```
726

727
**Usage Examples:**
728

729
```typescript
730
import { DirectionalLight, PCFSoftShadowMap } from 'three';
731

732
// Configure renderer for shadows
733
renderer.shadowMap.enabled = true;
734
renderer.shadowMap.type = PCFSoftShadowMap;
735

736
// Setup directional light with shadows
737
const dirLight = new DirectionalLight(0xffffff, 1);
738
dirLight.position.set(10, 10, 5);
739
dirLight.castShadow = true;
740

741
// Configure shadow quality
742
dirLight.shadow.mapSize.width = 2048;
743
dirLight.shadow.mapSize.height = 2048;
744

745
// Reduce shadow acne
746
dirLight.shadow.bias = -0.001;
747
dirLight.shadow.normalBias = 0.02;
748

749
// Configure shadow camera
750
dirLight.shadow.camera.near = 0.1;
751
dirLight.shadow.camera.far = 50;
752
dirLight.shadow.camera.left = -10;
753
dirLight.shadow.camera.right = 10;
754
dirLight.shadow.camera.top = 10;
755
dirLight.shadow.camera.bottom = -10;
756

757
// Soft shadows
758
dirLight.shadow.radius = 4;
759
dirLight.shadow.blurSamples = 25;
760

761
scene.add(dirLight);
762

763
// Enable shadows on objects
764
mesh.castShadow = true;
765
plane.receiveShadow = true;
766
```
767

768
### Advanced Lighting (WebGPU)
769

770
Extended lighting features available in WebGPU renderer for enhanced realism.
771

772
```typescript { .api }
773
import { 
774
  IESSpotLight, 
775
  ProjectorLight,
776
  SpotLight,
777
  DirectionalLight,
778
  Texture
779
} from 'three/webgpu';
780

781
/**
782
 * IES profile spotlight for realistic architectural lighting
783
 */
784
class IESSpotLight extends SpotLight {
785
  /** Type flag for IES light detection */
786
  readonly isIESSpotLight: true;
787
  
788
  /** IES profile texture */
789
  iesMap: Texture | null;
790
  
791
  /**
792
   * Create IES spotlight
793
   * @param color - Light color
794
   * @param intensity - Light intensity
795
   * @param distance - Maximum distance
796
   * @param angle - Cone angle
797
   * @param penumbra - Penumbra softness
798
   * @param decay - Decay rate
799
   */
800
  constructor(
801
    color?: Color | string | number,
802
    intensity?: number,
803
    distance?: number,
804
    angle?: number,
805
    penumbra?: number,
806
    decay?: number
807
  );
808
}
809

810
/**
811
 * Projector light for texture projection
812
 */
813
class ProjectorLight extends DirectionalLight {
814
  /** Type flag for projector light detection */
815
  readonly isProjectorLight: true;
816
  
817
  /** Projection texture */
818
  map: Texture | null;
819
  
820
  /** Projection matrix */
821
  projectionMatrix: Matrix4;
822
  
823
  /** Projection near plane */
824
  near: number;
825
  
826
  /** Projection far plane */
827
  far: number;
828
  
829
  /** Projection field of view */
830
  fov: number;
831
  
832
  /**
833
   * Create projector light
834
   * @param color - Light color
835
   * @param intensity - Light intensity
836
   */
837
  constructor(color?: Color | string | number, intensity?: number);
838
  
839
  /**
840
   * Update projection matrix
841
   */
842
  updateProjectionMatrix(): void;
843
}
844
```
845

846
**Usage Examples:**
847

848
```typescript
849
import { IESSpotLight, ProjectorLight, TextureLoader } from 'three/webgpu';
850

851
// IES profile lighting for architecture
852
const iesLight = new IESSpotLight(0xffffff, 100);
853
iesLight.position.set(0, 5, 0);
854

855
const iesTexture = new TextureLoader().load('lighting/profile.ies');
856
iesLight.iesMap = iesTexture;
857

858
scene.add(iesLight);
859

860
// Projector light for texture projection
861
const projector = new ProjectorLight(0xffffff, 2);
862
projector.position.set(10, 10, 10);
863
projector.lookAt(0, 0, 0);
864

865
const slideTexture = new TextureLoader().load('textures/slide.jpg');
866
projector.map = slideTexture;
867
projector.fov = 45;
868
projector.near = 1;
869
projector.far = 20;
870

871
scene.add(projector);
872
```
873

874
## Light Helper Visualization
875

876
```typescript { .api }
877
import { 
878
  DirectionalLightHelper,
879
  PointLightHelper,
880
  SpotLightHelper,
881
  HemisphereLightHelper,
882
  RectAreaLightHelper
883
} from 'three';
884

885
// Visualize lights in scene
886
const dirHelper = new DirectionalLightHelper(directionalLight, 5);
887
const pointHelper = new PointLightHelper(pointLight, 1);
888
const spotHelper = new SpotLightHelper(spotLight);
889
const hemiHelper = new HemisphereLightHelper(hemisphereLight, 5);
890

891
scene.add(dirHelper);
892
scene.add(pointHelper);
893
scene.add(spotHelper);
894
scene.add(hemiHelper);
895

896
// Update helpers when lights change
897
spotHelper.update();
898
```
899

900
The lighting system provides comprehensive illumination control through physically-based light types, advanced shadow mapping, and specialized effects for realistic 3D rendering. Proper lighting setup is crucial for material appearance and scene atmosphere.