NgtsEnvironment

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

scene-graph.ts

import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { NgtArgs } from 'angular-three';
import { NgtsEnvironment } 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]="{ preset: 'sunset', background: true, blur: 0.5 }" />
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgtArgs, NgtsEnvironment],
})
export class SceneGraph {}

NgtsEnvironment is a port of Drei’s Environment which sets up a global cubemap affecting the default scene.environment and optionally scene.background.

Available Presets

Presets link to common HDRI Haven assets hosted on GitHub CDN:

Preset	HDRI File
apartment	lebombo_1k.hdr
city	potsdamer_platz_1k.hdr
dawn	kiara_1_dawn_1k.hdr
forest	forest_slope_1k.hdr
lobby	st_fagans_interior_1k.hdr
night	dikhololo_night_1k.hdr
park	rooitou_park_1k.hdr
studio	studio_small_03_1k.hdr
sunset	venice_sunset_1k.hdr
warehouse	empty_warehouse_01_1k.hdr

Note: Presets are not meant for production environments as they rely on CDNs.

Usage

Using a Preset

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

With Background

<ngts-environment [options]="{ preset: 'sunset', background: true }" />

Blurred Background

<ngts-environment
  [options]="{
    preset: 'forest',
    background: true,
    backgroundBlurriness: 0.5,
    backgroundIntensity: 0.8
  }"
/>

Custom Environment File

<ngts-environment
  [options]="{
    files: 'path/to/environment.hdr',
    background: true
  }"
/>

Custom Rendered Environment

Render custom content into an environment map using a cube camera:

<ngts-environment [options]="{ background: true }">
  <ng-template>
    <ngt-mesh>
      <ngt-sphere-geometry *args="[10]" />
      <ngt-mesh-basic-material [side]="BackSide" color="skyblue" />
    </ngt-mesh>
  </ng-template>
</ngts-environment>

Ground Projection

Project the environment map onto the ground for more realistic scene integration:

<ngts-environment [options]="{ preset: 'park', ground: true }" />

With custom ground options:

<ngts-environment
  [options]="{
    preset: 'warehouse',
    ground: {
      height: 15,
      radius: 60,
      scale: 1000
    }
  }"
/>

Adjusted Lighting Intensity

<ngts-environment
  [options]="{
    preset: 'studio',
    environmentIntensity: 0.5,
    environmentRotation: [0, Math.PI / 2, 0]
  }"
/>

Options

Properties

name	type	description
background	boolean	Whether to use the environment map as the scene background. Default: false
files	string | string[]	Array of cubemap files OR single equirectangular file path.
path	string	Base path to the cubemap files OR single equirectangular file.
preset	string	One of the available presets: 'apartment', 'city', 'dawn', 'forest', 'lobby', 'night', 'park', 'studio', 'sunset', 'warehouse'.
scene	THREE.Scene	Custom scene to apply the environment map to.
map	THREE.Texture	Pre-loaded texture to use as environment map.
blur	number	Background blur amount (deprecated, use backgroundBlurriness). Default: 0
backgroundBlurriness	number	Background blur amount (0 to 1). Default: 0
backgroundIntensity	number	Intensity of the background. Default: 1
backgroundRotation	[number, number, number]	Rotation of the background as Euler angles. Default: [0, 0, 0]
environmentIntensity	number	Intensity of the environment lighting. Default: 1
environmentRotation	[number, number, number]	Rotation of the environment lighting as Euler angles. Default: [0, 0, 0]
ground	boolean | { height?: number; radius?: number; scale?: number }	Configuration for ground-projected environment.
frames	number	Number of frames to render the environment cube camera. Default: 1
near	number	Near clipping plane for the cube camera. Default: 1
far	number	Far clipping plane for the cube camera. Default: 1000
resolution	number	Resolution of the cube render target. Default: 256