NgtsBackdrop

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-backdrop',
    template: `
        <ngt-canvas [camera]="{ position: [0, 2, 5], fov: 50 }">
            <app-soba-wrapper *canvasContent [grid]="false">
                <app-scene-graph />
            </app-soba-wrapper>
        </ngt-canvas>
    `,
    changeDetection: ChangeDetectionStrategy.OnPush,
    host: { class: 'backdrop-demo relative block h-full' },
    imports: [NgtCanvas, SobaWrapper, SceneGraph],
})
export default class Backdrop {
    static clientProviders = [provideNgtRenderer()];
}

scene-graph.ts

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

@Component({
    selector: 'app-scene-graph',
    template: `
        <!-- Product showcase object -->
        <ngt-mesh [position]="[0, 0.5, 0]">
            <ngt-dodecahedron-geometry *args="[0.75]" />
            <ngt-mesh-standard-material color="#ff6b6b" [metalness]="0.3" [roughness]="0.4" />
        </ngt-mesh>

        <!-- Studio backdrop -->
        <ngts-backdrop [options]="{ floor: 0.5, segments: 20, scale: [10, 5, 3], position: [0, -0.01, -2] }">
            <ngt-mesh-standard-material color="#e0e0e0" />
        </ngts-backdrop>
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgtArgs, NgtsBackdrop],
})
export class SceneGraph {}

NgtsBackdrop is a port of Drei’s Backdrop which creates a curved plane, like a studio backdrop.

This is for presentational purposes, to break up light and shadows more interestingly in product visualization or artistic scenes.

Usage

Basic Backdrop

<ngts-backdrop [options]="{ floor: 0.25, segments: 20 }">
  <ngt-mesh-standard-material color="#353540" />
</ngts-backdrop>

With Product Model

<ngts-backdrop
  [options]="{ floor: 0.25, segments: 20, receiveShadow: true }"
  [scale]="[10, 5, 5]"
>
  <ngt-mesh-standard-material color="#f0f0f0" />
</ngts-backdrop>

<app-product-model [position]="[0, 0, 0]" />

<ngt-directional-light [position]="[5, 5, 5]" [castShadow]="true" />

Extended Floor

<ngts-backdrop
  [options]="{ floor: 0.5, segments: 30 }"
  [scale]="[15, 8, 8]"
>
  <ngt-mesh-standard-material color="#2a2a2a" />
</ngts-backdrop>

High Resolution

<ngts-backdrop [options]="{ floor: 0.25, segments: 50 }">
  <ngt-mesh-standard-material color="#404040" />
</ngts-backdrop>

With Shadows

<ngts-backdrop
  [options]="{ receiveShadow: true, floor: 0.25 }"
  [scale]="[12, 6, 6]"
>
  <ngt-mesh-standard-material color="#e0e0e0" />
</ngts-backdrop>

<ngt-mesh [position]="[0, 1, 0]" [castShadow]="true">
  <ngt-sphere-geometry />
  <ngt-mesh-standard-material color="hotpink" />
</ngt-mesh>

<ngt-directional-light
  [position]="[10, 10, 5]"
  [castShadow]="true"
  [intensity]="1.5"
/>

Colored Backdrop

<ngts-backdrop [options]="{ floor: 0.3 }" [scale]="[10, 5, 5]">
  <ngt-mesh-standard-material color="#1a1a2e" />
</ngts-backdrop>

With Gradient Material

<ngts-backdrop [options]="{ floor: 0.25 }" [scale]="[10, 5, 5]">
  <ngt-shader-material
    [vertexShader]="vertexShader"
    [fragmentShader]="fragmentShader"
  />
</ngts-backdrop>

Studio Setup

<!-- Backdrop -->
<ngts-backdrop
  [options]="{ receiveShadow: true, floor: 0.25 }"
  [scale]="[20, 10, 10]"
  [position]="[0, -0.5, -5]"
>
  <ngt-mesh-standard-material color="#fafafa" />
</ngts-backdrop>

<!-- Product -->
<app-product />

<!-- Lighting -->
<ngt-ambient-light [intensity]="0.5" />
<ngt-spot-light
  [position]="[10, 10, 10]"
  [angle]="0.3"
  [castShadow]="true"
/>
<ngt-spot-light
  [position]="[-10, 10, 10]"
  [angle]="0.3"
  [intensity]="0.5"
/>

With Environment

<ngts-environment [options]="{ preset: 'studio' }" />

<ngts-backdrop
  [options]="{ receiveShadow: true, floor: 0.3 }"
  [scale]="[15, 8, 8]"
>
  <ngt-mesh-standard-material
    color="white"
    [roughness]="0.8"
    [metalness]="0"
  />
</ngts-backdrop>

<app-model />

Notes

• The backdrop creates a curved surface transitioning from wall to floor
• floor controls how far the floor extends (0 = no floor, 1 = full extension)
• segments affects smoothness of the curve (higher = smoother but more geometry)
• Materials are passed as children and applied to the backdrop mesh
• Position and scale the backdrop to fit your scene requirements
• Combine with shadows for realistic grounding of objects
• Works well with NgtsStage or custom lighting setups

Options

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

Properties

name	type	description
floor	number	Stretches the floor segment. Default: 0.25
segments	number	Mesh resolution (number of segments). Default: 20
receiveShadow	boolean	Whether the backdrop should receive shadows.