NgtsStage

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

scene-graph.ts

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

@Component({
    selector: 'app-scene-graph',
    template: `
        <ngts-stage [options]="{ environment: 'city', intensity: 0.5 }">
            <ngt-mesh>
                <ngt-torus-knot-geometry *args="[0.5, 0.2, 128, 32]" />
                <ngt-mesh-standard-material color="#ff6b6b" [metalness]="0.8" [roughness]="0.2" />
            </ngt-mesh>
        </ngts-stage>
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgtArgs, NgtsStage],
})
export class SceneGraph {}

NgtsStage is a port of Drei’s Stage which provides a complete stage setup for presenting 3D models with lighting, shadows, and environment.

Automatically centers content, sets up professional lighting presets, and configures shadows.

Usage

Basic Stage

<ngts-stage>
  <ngt-mesh>
    <ngt-box-geometry />
    <ngt-mesh-standard-material color="orange" />
  </ngt-mesh>
</ngts-stage>

With Lighting Preset

<ngts-stage [options]="{ preset: 'rembrandt' }">
  <app-model />
</ngts-stage>

Available presets:

• rembrandt - Classic Rembrandt lighting (default)
• portrait - Portrait photography lighting
• upfront - Front-facing even lighting
• soft - Soft, diffused lighting

Contact Shadows

<ngts-stage [options]="{ shadows: 'contact', preset: 'portrait' }">
  <app-model />
</ngts-stage>

Accumulative Shadows

<ngts-stage [options]="{ shadows: 'accumulative', preset: 'soft' }">
  <app-model />
</ngts-stage>

No Shadows

<ngts-stage [options]="{ shadows: false }">
  <app-model />
</ngts-stage>

Custom Environment

<ngts-stage [options]="{ environment: 'sunset', preset: 'rembrandt' }">
  <app-model />
</ngts-stage>

No Environment

<ngts-stage [options]="{ environment: null }">
  <ngt-ambient-light [intensity]="0.5" />
  <app-model />
</ngts-stage>

Adjusted Intensity

<ngts-stage [options]="{ intensity: 1, preset: 'upfront' }">
  <app-model />
</ngts-stage>

Manual Camera Control

Disable automatic camera adjustment:

<ngts-stage [options]="{ adjustCamera: false }">
  <app-model />
</ngts-stage>

<ngts-orbit-controls />

Custom Shadow Options

<ngts-stage
  [options]="{
    shadows: {
      type: 'contact',
      opacity: 0.8,
      blur: 2,
      far: 10
    }
  }"
>
  <app-model />
</ngts-stage>

With Center Options

<ngts-stage [options]="{ center: { top: true } }">
  <app-model />
</ngts-stage>

Product Showcase

<ngts-stage
  [options]="{
    preset: 'portrait',
    environment: 'studio',
    shadows: 'contact',
    intensity: 0.8
  }"
>
  @if (productGltf(); as gltf) {
    <ngt-primitive *args="[gltf.scene]" />
  }
</ngts-stage>

<ngts-orbit-controls [options]="{ enableZoom: false, autoRotate: true }" />

Lighting Presets

Preset	Description
rembrandt	Classic dramatic lighting with strong shadows
portrait	Flattering front-side lighting for subjects
upfront	Even, front-facing lighting with minimal shadow
soft	Diffused, ambient-like lighting

Notes

• Stage automatically centers its children using NgtsCenter
• The adjustCamera option uses NgtsBounds to fit the camera
• Environment maps are applied using NgtsEnvironment
• Shadows can be either NgtsContactShadows or NgtsAccumulativeShadows
• Use camera controls with makeDefault: true for proper bounds integration
• The intensity option multiplies the lighting intensity of the preset

Options

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

Properties

name	type	description
preset	'rembrandt' | 'portrait' | 'upfront' | 'soft' | NgtsStageLightingOptions	Lighting preset or custom lighting configuration. Default: 'rembrandt'
shadows	false | 'contact' | 'accumulative' | NgtsStageShadowsOptions	Shadow type configuration. Default: 'contact'
adjustCamera	boolean	Whether to automatically adjust the camera to fit the content. Default: true
environment	string | NgtsEnvironmentOptions | null	Environment map configuration: preset name, options object, or null. Default: 'city'
intensity	number	Overall lighting intensity multiplier. Default: 0.5
center	NgtsCenterOptions	Options for centering the content within the stage.