NgtsCloud

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

scene-graph.ts

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

@Component({
    selector: 'app-scene-graph',
    template: `
        <ngts-cloud [options]="{ opacity: 0.8, speed: 0.4, segments: 40 }">
            <ngts-cloud-instance [position]="[-4, -2, 0]" />
            <ngts-cloud-instance [position]="[4, 2, 0]" />
        </ngts-cloud>
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgtsCloud, NgtsCloudInstance],
})
export class SceneGraph {}

NgtsCloud components are ports of Drei’s Cloud which render volumetric clouds using instanced billboarded sprites. The clouds consist of depth-sorted particles that face the camera.

Components

NgtsClouds

Container component that manages multiple cloud instances using instanced mesh rendering for performance.

Property	Type	Description	Default
texture	string	URL to the cloud texture image	CLOUD_URL (hosted CDN)
limit	number	Maximum number of cloud segments. Keep tight to save memory	200
range	number	Number of segments to render. If undefined, renders all	-
material	typeof THREE.Material	Material class to use for cloud rendering	THREE.MeshLambertMaterial
frustumCulled	boolean	Whether to enable frustum culling	true

NgtsCloudInstance

Individual cloud formations placed inside a NgtsClouds container.

NgtsCloud

Convenience component that renders a single cloud. Automatically wraps itself in a NgtsClouds container if not already inside one.

Usage

Multiple Clouds with Container

<ngts-clouds [options]="{ limit: 400 }">
  <ngts-cloud-instance
    [options]="{
      segments: 40,
      color: '#f0f0f0',
      speed: 0.4,
      bounds: [6, 2, 2],
      position: [0, 2, 0]
    }"
  />
  <ngts-cloud-instance
    [options]="{
      segments: 20,
      color: 'white',
      position: [5, 0, 0],
      opacity: 0.8
    }"
  />
</ngts-clouds>

Single Cloud (Auto-wrapped)

<ngts-cloud
  [options]="{
    segments: 20,
    bounds: [5, 1, 1],
    color: 'white',
    fade: 10
  }"
/>

Animated Clouds

<ngts-clouds [options]="{ limit: 200 }">
  <ngts-cloud-instance
    [options]="{
      segments: 30,
      speed: 0.2,
      growth: 4,
      color: '#ffe0e0',
      fade: 25
    }"
  />
</ngts-clouds>

Options

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

Properties

name	type	description
seed	number	Random seed for consistent cloud generation. Default: Math.random()
segments	number	Number of segments/particles in the cloud. Default: 20
bounds	[number, number, number]	Bounding box dimensions for cloud distribution. Default: [5, 1, 1]
concentrate	'inside' | 'outside' | 'random'	How segments are distributed within bounds. Default: 'inside'
volume	number	Volume/thickness of the segments. Default: 6
smallestVolume	number	Minimum volume when distributing clouds. Default: 0.25
distribute	function	Custom distribution function for precise control over particle placement.
growth	number	Growth factor for animated clouds (when speed > 0). Default: 4
speed	number	Animation speed factor. Set to 0 to disable animation. Default: 0
fade	number	Camera distance at which segments start fading. Default: 10
opacity	number	Opacity of the cloud. Default: 1
color	THREE.ColorRepresentation	Color of the cloud. Default: '#ffffff'