NgtsLightformer

Preview

canvas.ts

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

@Component({
    selector: 'app-lightformer',
    template: `
        <ngt-canvas [camera]="{ position: [0, 0, 6], fov: 50 }">
            <app-soba-wrapper *canvasContent [grid]="false" [lights]="false">
                <app-scene-graph />
            </app-soba-wrapper>
        </ngt-canvas>
    `,
    changeDetection: ChangeDetectionStrategy.OnPush,
    host: { class: 'lightformer-demo relative block h-full' },
    imports: [NgtCanvas, SobaWrapper, SceneGraph],
})
export default class Lightformer {
    static clientProviders = [provideNgtRenderer()];
}

scene-graph.ts

import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { NgtArgs } from 'angular-three';
import { NgtsEnvironment, NgtsLightformer } from 'angular-three-soba/staging';

@Component({
    selector: 'app-scene-graph',
    template: `
        <ngt-mesh>
            <ngt-sphere-geometry *args="[1, 64, 64]" />
            <ngt-mesh-standard-material [metalness]="1" [roughness]="0" color="white" />
        </ngt-mesh>

        <ngts-environment [options]="{ background: true }">
            <ng-template>
                <ngt-color *args="['#111']" attach="background" />

                <!-- Ring lightformer behind -->
                <ngts-lightformer
                    [options]="{
                        position: [0, 0, -5],
                        scale: 10,
                        intensity: 4,
                        form: 'ring',
                        color: '#ff4040',
                    }"
                />

                <!-- Rectangle lightformers on sides -->
                <ngts-lightformer
                    [options]="{
                        position: [5, 0, 0],
                        rotation: [0, Math.PI / 2, 0],
                        scale: [5, 3, 1],
                        intensity: 2,
                        form: 'rect',
                        color: '#4080ff',
                    }"
                />
                <ngts-lightformer
                    [options]="{
                        position: [-5, 0, 0],
                        rotation: [0, -Math.PI / 2, 0],
                        scale: [5, 3, 1],
                        intensity: 2,
                        form: 'rect',
                        color: '#40ff80',
                    }"
                />

                <!-- Circle lightformer above -->
                <ngts-lightformer
                    [options]="{
                        position: [0, 5, 0],
                        rotation: [Math.PI / 2, 0, 0],
                        scale: 3,
                        intensity: 3,
                        form: 'circle',
                        color: 'white',
                    }"
                />
            </ng-template>
        </ngts-environment>
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgtArgs, NgtsEnvironment, NgtsLightformer],
})
export class SceneGraph {
    protected readonly Math = Math;
}

NgtsLightformer is a port of Drei’s Lightformer which draws flat rectangles, circles, or rings that mimic the look of a light-former.

When placed inside an HDRI NgtsEnvironment, the lightformer affects scene lighting through emissiveness - acting like a real light without the rendering expense. You can have as many as you want.

Usage

Basic Lightformer in Environment

<ngts-environment>
  <ng-template>
    <ngts-lightformer
      [options]="{
        form: 'rect',
        color: 'white',
        intensity: 1,
        scale: [10, 5, 1],
        position: [0, 10, -10]
      }"
    />
  </ng-template>
</ngts-environment>

Multiple Lightformers (Studio Setup)

<ngts-environment [options]="{ background: true }">
  <ng-template>
    <!-- Main key light -->
    <ngts-lightformer
      [options]="{
        form: 'rect',
        color: 'white',
        intensity: 2,
        scale: [10, 5, 1],
        position: [5, 5, -5],
        target: [0, 0, 0]
      }"
    />

    <!-- Fill light -->
    <ngts-lightformer
      [options]="{
        form: 'circle',
        color: '#ffe0d0',
        intensity: 0.5,
        scale: 8,
        position: [-8, 3, 2]
      }"
    />

    <!-- Rim light -->
    <ngts-lightformer
      [options]="{
        form: 'ring',
        color: 'cyan',
        intensity: 1.5,
        scale: 3,
        position: [0, 4, 8]
      }"
    />
  </ng-template>
</ngts-environment>

Colored Accent Lighting

<ngts-environment>
  <ng-template>
    <ngts-lightformer
      [options]="{
        form: 'rect',
        color: 'orange',
        intensity: 3,
        scale: [15, 2, 1],
        position: [0, -5, -10],
        rotation: [Math.PI / 4, 0, 0]
      }"
    />

    <ngts-lightformer
      [options]="{
        form: 'rect',
        color: 'blue',
        intensity: 2,
        scale: [15, 2, 1],
        position: [0, 10, -10],
        rotation: [-Math.PI / 4, 0, 0]
      }"
    />
  </ng-template>
</ngts-environment>

With Texture Map

<ngts-environment>
  <ng-template>
    <ngts-lightformer
      [options]="{
        form: 'rect',
        map: gradientTexture,
        intensity: 2,
        scale: [20, 10, 1],
        position: [0, 0, -15]
      }"
    />
  </ng-template>
</ngts-environment>

Notes

• Lightformers work by emitting light through the environment map
• Higher intensity values create stronger lighting effects
• Use multiple lightformers to create professional studio-like lighting setups
• The target option makes the lightformer face a specific point

Options

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

Properties

name	type	description
toneMapped	boolean	Whether the material is tone mapped. Default: false
color	THREE.ColorRepresentation	The color of the lightformer. Default: 'white'
form	'circle' | 'ring' | 'rect'	The shape of the lightformer. Default: 'rect'
scale	number | [number, number, number]	The scale of the lightformer. Can be a number or an array [x, y, z]. Default: 1
intensity	number	The intensity of the light emitted by the lightformer. Default: 1
target	[number, number, number] | THREE.Vector3	The target position for the lightformer to look at.
map	THREE.Texture	Texture map to apply to the lightformer.