NgtsPivotControls

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

scene-graph.ts

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

@Component({
    selector: 'app-scene-graph',
    template: `
        <ngts-pivot-controls
            [options]="{
                anchor: [-1, -1, -1],
                scale: 0.75,
                depthTest: false,
                annotations: true,
            }"
        >
            <ngt-mesh>
                <ngt-box-geometry *args="[1.5, 1.5, 1.5]" />
                <ngt-mesh-normal-material />
            </ngt-mesh>
        </ngts-pivot-controls>
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgtArgs, NgtsPivotControls],
})
export class SceneGraph {}

NgtsPivotControls is an interactive pivot-style gizmo with arrows for translation, plane sliders for 2D movement, rotators for rotation, and spheres for scaling. Supports transformation limits and anchor points.

Usage

import { NgtsPivotControls } from 'angular-three-soba/gizmos';

Basic usage:

<ngts-pivot-controls [options]="{ scale: 0.5 }">
  <ngt-mesh>
    <ngt-box-geometry />
    <ngt-mesh-standard-material />
  </ngt-mesh>
</ngts-pivot-controls>

With limits and callbacks:

<ngts-pivot-controls
  [options]="{
    disableRotations: true,
    disableScaling: true,
    translationLimits: [[-1, 1], undefined, undefined]
  }"
  (dragged)="onDrag($event)"
  (dragStarted)="onDragStart($event)"
  (dragEnded)="onDragEnd()"
>
  <ngt-mesh />
</ngts-pivot-controls>

Outputs

name	type	description
dragStarted	any	Emits when drag operation starts.
dragged	any	Emits during drag with transform matrices.
dragEnded	any	Emits when drag operation ends.

Options

Properties

name	type	description
enabled	boolean	Whether the control is enabled. Default: true
scale	number	Scale of the gizmo. Default: 1
lineWidth	number	Width of the gizmo lines. Default: 4
fixed	boolean	If true, gizmo remains constant in screen size. Default: false
offset	[number, number, number]	Position offset of the pivot point. Default: [0, 0, 0]
rotation	[number, number, number]	Starting rotation of the gizmo in radians. Default: [0, 0, 0]
matrix	Matrix4	Starting transformation matrix. Default: undefined
anchor	[number, number, number]	Bounding box anchor point [-1, 0, +1] per axis. Default: undefined
autoTransform	boolean	Auto-apply local transform on drag. Default: true
activeAxes	[boolean, boolean, boolean]	Which axes are active [x, y, z]. Default: [true, true, true]
disableAxes	boolean	Disables all translation arrows. Default: false
disableSliders	boolean	Disables all plane sliders. Default: false
disableRotations	boolean	Disables all rotation handles. Default: false
disableScaling	boolean	Disables all scaling spheres. Default: false
translationLimits	[[number, number] | undefined, [number, number] | undefined, [number, number] | undefined]	Translation limits per axis as [min, max] pairs. Default: undefined
rotationLimits	[[number, number] | undefined, [number, number] | undefined, [number, number] | undefined]	Rotation limits per axis as [min, max] pairs. Default: undefined
scaleLimits	[[number, number] | undefined, [number, number] | undefined, [number, number] | undefined]	Scale limits per axis as [min, max] pairs. Default: undefined
axisColors	[string, string, string]	Colors for the X, Y, and Z axes. Default: ['#ff2060', '#20df80', '#2080ff']
hoveredColor	string	Color when a gizmo element is hovered. Default: '#ffff40'
annotations	boolean	Whether to show HTML value annotations. Default: false
depthTest	boolean	Whether gizmo is occluded by scene geometry. Default: true
opacity	number	Opacity of the gizmo elements. Default: 1
visible	boolean	Whether the gizmo is visible. Default: true