NgtsFloat

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

scene-graph.ts

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

@Component({
    selector: 'app-scene-graph',
    template: `
        <ngts-float [options]="{ speed: 2, rotationIntensity: 1, floatIntensity: 2 }">
            <ngt-mesh>
                <ngt-dodecahedron-geometry *args="[1]" />
                <ngt-mesh-standard-material color="#ff6b6b" [metalness]="0.5" [roughness]="0.3" />
            </ngt-mesh>
        </ngts-float>
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgtArgs, NgtsFloat],
})
export class SceneGraph {}

NgtsFloat is a port of Drei’s Float which simulates floating objects by applying a configurable up-and-down motion with optional rotation.

Usage

Basic Floating Object

<ngts-float [options]="{ speed: 1, rotationIntensity: 1, floatIntensity: 1 }">
  <ngt-mesh>
    <ngt-sphere-geometry />
    <ngt-mesh-standard-material color="hotpink" />
  </ngt-mesh>
</ngts-float>

Gentle Float with No Rotation

<ngts-float
  [options]="{
    speed: 0.5,
    rotationIntensity: 0,
    floatIntensity: 0.5,
    floatingRange: [-0.05, 0.05]
  }"
>
  <ngt-mesh>
    <ngt-box-geometry />
    <ngt-mesh-standard-material color="skyblue" />
  </ngt-mesh>
</ngts-float>

Dramatic Floating Effect

<ngts-float
  [options]="{
    speed: 2,
    rotationIntensity: 2,
    floatIntensity: 3,
    floatingRange: [-0.5, 0.5]
  }"
>
  <app-model />
</ngts-float>

Conditional Animation

@let isFloating = floatingEnabled();

<ngts-float [options]="{ enabled: isFloating, speed: 1 }">
  <ngt-mesh>
    <ngt-torus-geometry *args="[1, 0.4, 16, 32]" />
    <ngt-mesh-standard-material color="gold" />
  </ngt-mesh>
</ngts-float>

With On-Demand Rendering

When using on-demand rendering (frameloop: ‘demand’), enable auto-invalidation:

<ngts-float [options]="{ autoInvalidate: true, speed: 1 }">
  <ngt-mesh>
    <ngt-icosahedron-geometry />
    <ngt-mesh-standard-material color="coral" />
  </ngt-mesh>
</ngts-float>

Floating Text

<ngts-float [options]="{ speed: 0.8, floatIntensity: 0.8, rotationIntensity: 0.3 }">
  <ngts-text3d [options]="{ font: 'fonts/helvetiker_bold.typeface.json' }">
    Hello
    <ngt-mesh-standard-material color="white" />
  </ngts-text3d>
</ngts-float>

Notes

• The floating effect uses sine waves for smooth, natural motion
• Rotation affects all three axes with slight variations
• The floatingRange determines the vertical distance of the floating motion
• Use autoInvalidate when your scene uses on-demand rendering

Options

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

Properties

name	type	description
enabled	boolean	Whether the floating animation is enabled. Default: true
speed	number	The speed of the floating animation. Default: 1
rotationIntensity	number	The intensity of the rotation during the floating animation. Default: 1
floatIntensity	number	The intensity of the vertical movement during the floating animation. Default: 1
floatingRange	[number, number]	Range of the floating animation [min, max] in world units. Default: [-0.1, 0.1]
autoInvalidate	boolean	Automatically invalidates the scene when the frameloop is set to 'demand'. Default: false