NgtsSpotLight

1
import { ChangeDetectionStrategy, Component } from '@angular/core';
2
import { SobaWrapper } from '@soba/wrapper.ts';
3
import { NgtCanvas, provideNgtRenderer } from 'angular-three/dom';
4
import { SceneGraph } from './scene-graph';
5

6
@Component({
7
    selector: 'app-spot-light',
8
    template: `
9
        <ngt-canvas [camera]="{ position: [5, 3, 5], fov: 50 }">
10
            <app-soba-wrapper *canvasContent [grid]="false" [lights]="false">
11
                <app-scene-graph />
12
            </app-soba-wrapper>
13
        </ngt-canvas>
14
    `,
15
    changeDetection: ChangeDetectionStrategy.OnPush,
16
    host: { class: 'spot-light-demo relative block h-full' },
17
    imports: [NgtCanvas, SobaWrapper, SceneGraph],
18
})
19
export default class SpotLight {
20
    static clientProviders = [provideNgtRenderer()];
21
}

1
import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2
import { NgtArgs } from 'angular-three';
3
import { depthBuffer } from 'angular-three-soba/misc';
4
import { NgtsSpotLight } from 'angular-three-soba/staging';
5

6
@Component({
7
    selector: 'app-scene-graph',
8
    template: `
9
        <!-- Floor -->
10
        <ngt-mesh [rotation]="[-Math.PI / 2, 0, 0]" receiveShadow>
11
            <ngt-plane-geometry *args="[20, 20]" />
12
            <ngt-mesh-standard-material color="#222" />
13
        </ngt-mesh>
14

15
        <!-- Objects to illuminate -->
16
        <ngt-mesh [position]="[0, 0.5, 0]" castShadow>
17
            <ngt-box-geometry *args="[1, 1, 1]" />
18
            <ngt-mesh-standard-material color="white" />
19
        </ngt-mesh>
20

21
        <ngt-mesh [position]="[-2, 0.4, 1]" castShadow>
22
            <ngt-sphere-geometry *args="[0.4, 32, 32]" />
23
            <ngt-mesh-standard-material color="white" />
24
        </ngt-mesh>
25

26
        <ngt-mesh [position]="[2, 0.6, -1]" castShadow>
27
            <ngt-cone-geometry *args="[0.4, 0.8, 32]" />
28
            <ngt-mesh-standard-material color="white" />
29
        </ngt-mesh>
30

31
        <!-- Volumetric spot lights -->
32
        <ngts-spot-light
33
            [options]="{
34
                position: [-3, 4, 0],
35
                angle: 0.5,
36
                penumbra: 0.5,
37
                intensity: 2,
38
                color: '#ff005b',
39
                volumetric: true,
40
                attenuation: 5,
41
                anglePower: 5,
42
                depthBuffer: depth,
43
            }"
44
        />
45

46
        <ngts-spot-light
47
            [options]="{
48
                position: [3, 4, 0],
49
                angle: 0.5,
50
                penumbra: 0.5,
51
                intensity: 2,
52
                color: '#0EEC82',
53
                volumetric: true,
54
                attenuation: 5,
55
                anglePower: 5,
56
                depthBuffer: depth,
57
            }"
58
        />
59

60
        <!-- Ambient light for base illumination -->
61
        <ngt-ambient-light [intensity]="0.1" />
62
    `,
63
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
64
    changeDetection: ChangeDetectionStrategy.OnPush,
65
    imports: [NgtArgs, NgtsSpotLight],
66
})
67
export class SceneGraph {
68
    protected readonly Math = Math;
69

70
    // Depth buffer for soft volumetric lighting
71
    depth = depthBuffer(() => ({ size: 256, frames: Infinity }));
72
}

NgtsSpotLight is a port of Drei’s SpotLight which provides an enhanced spot light with optional volumetric lighting effect.

Creates a visible light cone that simulates light scattering through atmosphere or dust.

NgtsSpotLight

Basic Volumetric Spot Light

1
<ngts-spot-light
2
  [options]="{
3
    position: [0, 5, 0],
4
    angle: 0.5,
5
    intensity: 1,
6
    color: 'white'
7
  }"
8
/>

Stage Lighting Effect

1
<ngts-spot-light
2
  [options]="{
3
    position: [5, 10, 0],
4
    angle: 0.3,
5
    attenuation: 5,
6
    anglePower: 5,
7
    intensity: 2,
8
    color: '#ffaa00'
9
  }"
10
/>

Without Volumetric Cone

1
<ngts-spot-light
2
  [options]="{
3
    position: [0, 5, 0],
4
    volumetric: false,
5
    intensity: 1,
6
    angle: 0.5
7
  }"
8
/>

Debug Mode

1
<ngts-spot-light
2
  [options]="{
3
    position: [3, 5, 3],
4
    debug: true,
5
    angle: 0.4,
6
    intensity: 1
7
  }"
8
/>

With Depth Buffer for Soft Shadows

1
@Component({
2
  template: `
3
    <ngts-spot-light
4
      [options]="{
5
        position: [0, 5, 0],
6
        depthBuffer: depthBuffer.texture(),
7
        angle: 0.5
8
      }"
9
    />
10
  `,
11
})
12
export class Scene {
13
  depthBuffer = depthBuffer();
14
}

Colored Light Cone

1
<ngts-spot-light
2
  [options]="{
3
    position: [0, 8, 0],
4
    color: '#ff0066',
5
    angle: 0.6,
6
    attenuation: 8,
7
    opacity: 0.8,
8
    intensity: 2
9
  }"
10
/>

Custom Cone Shape

1
<ngts-spot-light
2
  [options]="{
3
    position: [0, 5, 0],
4
    radiusTop: 0.05,
5
    radiusBottom: 2,
6
    angle: 0.5,
7
    attenuation: 10
8
  }"
9
/>

NgtsSpotLightShadow

A shadow caster that projects textured shadow patterns.

Basic Shadow Pattern

1
<ngts-spot-light [options]="{ position: [0, 5, 0], angle: 0.5 }">
2
  <ngts-spot-light-shadow [options]="{ distance: 0.4, scale: 1 }" />
3
</ngts-spot-light>

With Texture Pattern

1
<ngts-spot-light [options]="{ position: [0, 5, 0], angle: 0.5 }">
2
  <ngts-spot-light-shadow
3
    [options]="{
4
      distance: 0.4,
5
      alphaTest: 0.5,
6
      scale: 1,
7
      width: 512,
8
      height: 512,
9
      map: shadowTexture
10
    }"
11
  />
12
</ngts-spot-light>

High Resolution Shadow

1
<ngts-spot-light [options]="{ position: [0, 8, 0], angle: 0.4 }">
2
  <ngts-spot-light-shadow
3
    [options]="{
4
      width: 1024,
5
      height: 1024,
6
      map: patternTexture
7
    }"
8
  />
9
</ngts-spot-light>

Custom Shader

Create animated or custom shadow effects with a GLSL shader:

1
<ngts-spot-light [options]="{ position: [0, 5, 0] }">
2
  <ngts-spot-light-shadow [shader]="customShader" [options]="{ scale: 2 }" />
3
</ngts-spot-light>

1
customShader = `
2
  varying vec2 vUv;
3
  uniform sampler2D uShadowMap;
4
  uniform float uTime;
5

6
  void main() {
7
    vec2 uv = vUv;
8
    // Animated wave effect
9
    float wave = sin(uv.x * 10.0 + uTime) * 0.5 + 0.5;
10
    gl_FragColor = vec4(vec3(wave), 1.0);
11
  }
12
`;

Shader Uniforms

The shadow shader provides these uniforms and varyings:

Type	Name	Description
`varying vec2`	`vUv`	UVs of the shadow casting plane
`uniform sampler2D`	`uShadowMap`	The texture provided to the map prop
`uniform float`	`uTime`	Current time for animations

Output the alpha channel where 1 is opaque shadow and 0 is transparent:

1
gl_FragColor = vec4(vec3(1.), 1.); // Opaque shadow
2
gl_FragColor = vec4(vec3(0.), 1.); // Transparent (no shadow)

Notes

Volumetric lighting creates a visible cone mesh simulating light scattering
The attenuation controls how quickly the volumetric effect fades
Use depthBuffer from the depthBuffer() function for soft volumetric shadows
anglePower affects the sharpness of the cone’s edge falloff
Shadow patterns require a texture with an alpha channel
Custom shaders allow for animated or procedural shadow effects

Options

options input accepts any properties from THREE.SpotLight in addition to the following:

Properties

name	type	description
depthBuffer	THREE.DepthTexture	Depth texture for soft volumetric lighting. Default: null
attenuation	number	Light attenuation factor. Controls how quickly light fades. Default: 5
anglePower	number	Power of the light cone angle falloff. Default: 5
radiusTop	number	Radius of the light cone at the top. Default: 0.1
radiusBottom	number	Radius of the light cone at the bottom. Default: angle * 7
opacity	number	Opacity of the volumetric light cone. Default: 1
color	THREE.ColorRepresentation	Color of the light. Default: 'white'
volumetric	boolean	Whether to render the volumetric light cone mesh. Default: true
debug	boolean	Whether to show the SpotLightHelper for debugging. Default: false
distance	number	Distance of the light. Default: 5
angle	number	Angle of the light cone. Default: 0.15