NgtsMeshDistortMaterial

1
import { ChangeDetectionStrategy, Component } from '@angular/core';
2
import { SobaWrapper } from '@soba/wrapper.ts';
3
import { NgtCanvas, provideNgtRenderer } from 'angular-three/dom';
4
import { SceneGraph } from './scene-graph';
5

6
@Component({
7
    selector: 'app-mesh-distort-material',
8
    template: `
9
        <ngt-canvas [camera]="{ position: [0, 0, 3], fov: 50 }">
10
            <app-soba-wrapper *canvasContent [grid]="false">
11
                <app-scene-graph />
12
            </app-soba-wrapper>
13
        </ngt-canvas>
14
    `,
15
    changeDetection: ChangeDetectionStrategy.OnPush,
16
    host: { class: 'mesh-distort-material-demo relative block h-full' },
17
    imports: [NgtCanvas, SobaWrapper, SceneGraph],
18
})
19
export default class MeshDistortMaterial {
20
    static clientProviders = [provideNgtRenderer()];
21
}

1
import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2
import { NgtArgs } from 'angular-three';
3
import { NgtsMeshDistortMaterial } from 'angular-three-soba/materials';
4

5
@Component({
6
    selector: 'app-scene-graph',
7
    template: `
8
        <ngt-mesh>
9
            <ngt-icosahedron-geometry *args="[1, 4]" />
10
            <ngts-mesh-distort-material
11
                [options]="{
12
                    color: '#f25042',
13
                    speed: 2,
14
                    distort: 0.5,
15
                    radius: 1,
16
                }"
17
            />
18
        </ngt-mesh>
19
    `,
20
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
21
    changeDetection: ChangeDetectionStrategy.OnPush,
22
    imports: [NgtArgs, NgtsMeshDistortMaterial],
23
})
24
export class SceneGraph {}

NgtsMeshDistortMaterial is a port of Drei’s MeshDistortMaterial that applies animated noise-based distortion to mesh surfaces. It extends THREE.MeshPhysicalMaterial with vertex displacement using simplex noise.

Usage

1
import { NgtsMeshDistortMaterial } from 'angular-three-soba/materials';

1
<ngt-mesh>
2
    <ngt-sphere-geometry />
3
    <ngts-mesh-distort-material [options]="{ speed: 2, factor: 0.5, color: 'hotpink' }" />
4
</ngt-mesh>

Advanced Example

1
@Component({
2
    template: `
3
        <ngt-mesh>
4
            <ngt-icosahedron-geometry *args="[1, 4]" />
5
            <ngts-mesh-distort-material
6
                [options]="{
7
                    speed: 5,
8
                    factor: 0.8,
9
                    color: '#ff6b6b',
10
                    roughness: 0,
11
                    metalness: 0.8,
12
                    clearcoat: 1
13
                }"
14
            />
15
        </ngt-mesh>
16
    `
17
})
18
export class DistortedSphere {}

The distortion effect works best with geometries that have enough vertices for smooth deformation, such as spheres or icosahedrons with higher subdivisions.

Options

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

Properties

name	type	description
speed	number	Animation speed multiplier for the distortion.
factor	number	Distortion intensity factor.