NgtsGradientTexture

Preview

canvas.ts

import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, inject, signal } from '@angular/core';
import { SobaWrapper } from '@soba/wrapper.ts';
import { NgtArgs } from 'angular-three';
import { NgtsGradientTexture } from 'angular-three-soba/abstractions';
import { NgtsMeshWobbleMaterial } from 'angular-three-soba/materials';
import { NgtsFloat } from 'angular-three-soba/staging';
import { TweakpaneColor, TweakpaneNumber, TweakpanePane } from 'angular-three-tweakpane';
import { NgtCanvas, provideNgtRenderer } from 'angular-three/dom';
import * as THREE from 'three';

@Component({
    selector: 'app-gradient-texture-soba',
    template: `
        <ngt-canvas>
            <app-soba-wrapper *canvasContent>
                <ngts-float>
                    <ngt-mesh [scale]="[2, 4, 1]">
                        <ngt-plane-geometry *args="[1, 1, 32, 32]" />
                        <ngts-mesh-wobble-material [options]="{ side: DoubleSide }">
                            <ngts-gradient-texture
                                [stops]="[0, midPoint(), 1]"
                                [colors]="[startColor(), midColor(), endColor()]"
                                [options]="{ size: 100 }"
                            />
                        </ngts-mesh-wobble-material>
                    </ngt-mesh>
                </ngts-float>
            </app-soba-wrapper>
        </ngt-canvas>

        <tweakpane-pane title="GradientTexture" [container]="host">
            <tweakpane-color [(value)]="startColor" label="startColor" />
            <tweakpane-color [(value)]="midColor" label="midColor" />
            <tweakpane-color [(value)]="endColor" label="endColor" />
            <tweakpane-number [(value)]="midPoint" label="midPoint" [params]="{ min: 0.05, max: 0.95, step: 0.01 }" />
        </tweakpane-pane>
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    host: { class: 'gradient-texture-demo relative block h-full' },
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [
        NgtCanvas,
        SobaWrapper,
        NgtsFloat,
        NgtsMeshWobbleMaterial,
        NgtsGradientTexture,
        NgtArgs,
        TweakpanePane,
        TweakpaneColor,
        TweakpaneNumber,
    ],
})
export default class GradientTexture {
    static clientProviders = [provideNgtRenderer()];

    protected readonly DoubleSide = THREE.DoubleSide;

    protected host = inject(ElementRef);

    protected startColor = signal('#e63946');
    protected midColor = signal('#f1faee');
    protected endColor = signal('#a8dadc');
    protected midPoint = signal(0.8);
}

NgtsGradientTexture is a port of Drei’s GradientTexture which is a declarative THREE.CanvasTexture that attaches to map by default. You can use this to create gradient backgrounds.

Usage

import { NgtsGradientTexture } from 'angular-three-soba/abstractions';

<ngt-mesh>
    <ngt-plane-geometry />
    <ngt-mesh-basic-material>
        <ngts-gradient-texture
            [stops]="[0, 1]"
            [colors]="['turquoise', 'mediumpurple']"
            [options]="{ size: 1024 }"
         />
    </ngt-mesh-basic-material>
</ngt-mesh>

Radial gradient

<ngt-mesh>
    <ngt-plane-geometry />
    <ngt-mesh-basic-material>
        <ngts-gradient-texture
            [stops]="[0, 0.5, 1]"
            [colors]="['aquamarine', 'hotpink', 'yellow']"
            [options]="{ size: 1024, width: 1024, type: 'radial', innerCircleRadius: 0, outerCircleRadius: 'auto' }"/>
    </ngt-mesh-basic-material>
</ngt-mesh>

Inputs

name	type	description	required
stops	Array<number>	An array of numbers that define the position of the color stops. These values must be between 0 and 1.	yes
colors	Array<THREE.ColorRepresentation>	An array of colors that define the color of the gradient. These colors can be in any format that is accepted by THREE.Color.	yes
attach	NgtAttachable	The attachment point of the texture on the parent. Default: 'map'	no

Options

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

Properties

name	type	description
size	number	The size of the canvas texture in pixels. Default: 1024
width	number	The width of the canvas texture in pixels. Default: 16
type	'linear' | 'radial'	The type of the gradient. Default: 'linear'
innerCircleRadius	number	The inner radius of the gradient. Default: 0
outerCircleRadius	string | number	The outer radius of the gradient. Default: 'auto'