NgtsMeshWobbleMaterial

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

scene-graph.ts

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

@Component({
    selector: 'app-scene-graph',
    template: `
        <ngt-mesh>
            <ngt-torus-geometry *args="[1, 0.4, 32, 100]" />
            <ngts-mesh-wobble-material
                [options]="{
                    color: '#4ecdc4',
                    speed: 2,
                    factor: 0.6,
                }"
            />
        </ngt-mesh>
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgtArgs, NgtsMeshWobbleMaterial],
})
export class SceneGraph {}

NgtsMeshWobbleMaterial is a port of Drei’s MeshWobbleMaterial that applies animated sine-wave wobble distortion to mesh surfaces. It extends THREE.MeshStandardMaterial with vertex displacement for organic, jelly-like motion.

Usage

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

<ngt-mesh>
    <ngt-torus-geometry />
    <ngts-mesh-wobble-material [options]="{ speed: 2, factor: 0.6, color: 'cyan' }" />
</ngt-mesh>

Jelly Cube Example

@Component({
    template: `
        <ngt-mesh>
            <ngt-box-geometry *args="[1, 1, 1, 10, 10, 10]" />
            <ngts-mesh-wobble-material
                [options]="{
                    speed: 1.5,
                    factor: 0.4,
                    color: '#ff69b4',
                    roughness: 0,
                    metalness: 0.1
                }"
            />
        </ngt-mesh>
    `
})
export class JellyCube {}

Tips

• The wobble effect works best with geometries that have enough vertices for smooth deformation
• Use higher segment counts in your geometry (e.g., BoxGeometry(1, 1, 1, 10, 10, 10)) for smoother wobble
• Combine with low roughness and some metalness for a jelly-like appearance
• Lower factor values create subtle wobble, higher values create dramatic deformation

Options

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

Properties

name	type	description
speed	number	Animation speed multiplier for the wobble.
factor	number	The strength of the wobble effect.