NgtsSky

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

scene-graph.ts

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

@Component({
    selector: 'app-scene-graph',
    template: `
        <ngt-mesh [position]="[0, 0.5, 0]">
            <ngt-box-geometry *args="[1, 1, 1]" />
            <ngt-mesh-standard-material color="#ff6b6b" />
        </ngt-mesh>

        <ngt-mesh [rotation]="[-Math.PI / 2, 0, 0]" [position]="[0, 0, 0]">
            <ngt-plane-geometry *args="[20, 20]" />
            <ngt-mesh-standard-material color="#4a5568" />
        </ngt-mesh>

        <ngt-directional-light [position]="[5, 5, 5]" [intensity]="1" />
        <ngt-ambient-light [intensity]="0.3" />

        <ngts-sky [options]="{ sunPosition: [1, 0.5, 0], turbidity: 8, rayleigh: 2 }" />
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgtArgs, NgtsSky],
})
export class SceneGraph {
    protected readonly Math = Math;
}

NgtsSky is a port of Drei’s Sky which renders a procedural sky dome using atmospheric scattering simulation.

Based on the Three.js Sky shader which simulates realistic sky colors based on sun position.

Usage

Basic Sky

<ngts-sky />

Sunset Sky

<ngts-sky
  [options]="{
    turbidity: 8,
    rayleigh: 2,
    inclination: 0.49,
    azimuth: 0.25
  }"
/>

Midday Sky

<ngts-sky
  [options]="{
    turbidity: 10,
    rayleigh: 0.5,
    inclination: 0.6,
    azimuth: 0.1
  }"
/>

Night Sky (Low Sun)

<ngts-sky
  [options]="{
    turbidity: 20,
    rayleigh: 0.1,
    inclination: 0.05,
    azimuth: 0.5
  }"
/>

Dawn/Dusk

<ngts-sky
  [options]="{
    turbidity: 10,
    rayleigh: 3,
    mieCoefficient: 0.005,
    mieDirectionalG: 0.7,
    inclination: 0.52,
    azimuth: 0.25
  }"
/>

Hazy Atmosphere

<ngts-sky
  [options]="{
    turbidity: 20,
    rayleigh: 0.5,
    mieCoefficient: 0.03,
    mieDirectionalG: 0.9,
    inclination: 0.6
  }"
/>

Direct Sun Position

Override inclination/azimuth with a direct position vector:

<ngts-sky
  [options]="{
    sunPosition: sunPosition,
    turbidity: 10,
    rayleigh: 2
  }"
/>

// In component
sunPosition = new THREE.Vector3(100, 50, 100);

Animated Day/Night Cycle

@Component({
  template: `
    <ngts-sky [options]="{ inclination: inclination(), turbidity: 10, rayleigh: 2 }" />
  `,
})
export class Scene {
  inclination = signal(0.5);

  constructor() {
    // Animate sun position over time
    injectBeforeRender(({ clock }) => {
      const time = clock.getElapsedTime();
      this.inclination.set(0.5 + Math.sin(time * 0.1) * 0.4);
    });
  }
}

With Directional Light

Sync a directional light with the sky’s sun position:

<ngts-sky [options]="{ inclination: 0.5, azimuth: 0.25 }" />

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

Parameter Reference

Parameter	Effect	Low Value	High Value
turbidity	Atmospheric haziness	Clear sky	Foggy/dusty
rayleigh	Blue color intensity	Less blue	Deeper blue
mieCoefficient	Sun halo/glow intensity	No halo	Strong halo
mieDirectionalG	Sun disc size	Larger sun disc	Smaller sun disc
inclination	Sun height (0-1)	Below horizon	Above head
azimuth	Sun rotation (0-1)	East	Full circle

Notes

• The sky shader simulates Rayleigh and Mie scattering for realistic atmospheric effects
• inclination of 0.5 places the sun at the horizon; values above move it higher
• azimuth controls horizontal rotation of the sun around the scene
• Use sunPosition for precise control, overriding inclination/azimuth
• Combine with a directional light positioned at the same sun location for accurate shadows
• The distance parameter affects how large the sky sphere appears

Options

Properties

name	type	description
distance	number	Distance of the sky sphere from the camera. Default: 1000
inclination	number	Vertical angle of the sun (0-1, where 0.5 is horizon). Default: 0.6
azimuth	number	Horizontal angle of the sun (0-1, representing full rotation). Default: 0.1
mieCoefficient	number	Mie scattering coefficient. Controls haze and sun disc intensity. Default: 0.005
mieDirectionalG	number	Mie scattering directional parameter. Controls sun disc size. Default: 0.8
rayleigh	number	Rayleigh scattering coefficient. Higher values create bluer skies. Default: 0.5
turbidity	number	Atmospheric turbidity. Higher values create hazier atmospheres. Default: 10
sunPosition	THREE.Vector3	Direct sun position vector. Overrides inclination/azimuth if set.