NgtsTransformControls

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-transform-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: 'transform-controls-demo relative block h-full' },
    imports: [NgtCanvas, SobaWrapper, SceneGraph],
})
export default class TransformControls {
    static clientProviders = [provideNgtRenderer()];
}

scene-graph.ts

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

@Component({
    selector: 'app-scene-graph',
    template: `
        <ngts-transform-controls [options]="{ mode: mode() }">
            <ngt-mesh>
                <ngt-box-geometry *args="[1.5, 1.5, 1.5]" />
                <ngt-mesh-normal-material />
            </ngt-mesh>
        </ngts-transform-controls>

        <ngt-group [position]="[0, -2, 0]">
            <ngt-mesh [position]="[-2, 0, 0]" (click)="mode.set('translate')">
                <ngt-sphere-geometry *args="[0.3]" />
                <ngt-mesh-basic-material [color]="mode() === 'translate' ? '#ff6b6b' : '#666'" />
            </ngt-mesh>
            <ngt-mesh (click)="mode.set('rotate')">
                <ngt-sphere-geometry *args="[0.3]" />
                <ngt-mesh-basic-material [color]="mode() === 'rotate' ? '#4ecdc4' : '#666'" />
            </ngt-mesh>
            <ngt-mesh [position]="[2, 0, 0]" (click)="mode.set('scale')">
                <ngt-sphere-geometry *args="[0.3]" />
                <ngt-mesh-basic-material [color]="mode() === 'scale' ? '#ffe66d' : '#666'" />
            </ngt-mesh>
        </ngt-group>
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgtArgs, NgtsTransformControls],
})
export class SceneGraph {
    mode = signal<'translate' | 'rotate' | 'scale'>('translate');

    @HostListener('document:keydown', ['$event'])
    onKeyDown(event: KeyboardEvent) {
        if (event.key === 't') this.mode.set('translate');
        if (event.key === 'r') this.mode.set('rotate');
        if (event.key === 's') this.mode.set('scale');
    }
}

NgtsTransformControls provides interactive transform controls for manipulating 3D objects. It wraps Three.js TransformControls to provide translation, rotation, and scaling gizmos.

Usage

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

Wrap content directly:

<ngts-transform-controls [options]="{ mode: 'translate' }">
  <ngt-mesh>
    <ngt-box-geometry />
    <ngt-mesh-standard-material />
  </ngt-mesh>
</ngts-transform-controls>

Or attach to an existing object:

<ngts-transform-controls
  [object]="meshRef"
  [options]="{ mode: 'rotate', showX: false }"
  (change)="onTransform($event)"
/>

Outputs

name	type	description
change	any	Emits on any transformation change.
mouseDown	any	Emits when mouse is pressed on gizmo.
mouseUp	any	Emits when mouse is released.
objectChange	any	Emits when the object's transform changes.

Options

Properties

name	type	description
object	Object3D	The target object to transform (optional). Can also wrap content directly.
enabled	boolean	Whether the controls are enabled. Default: true
mode	'translate' | 'rotate' | 'scale'	The transformation mode. Default: 'translate'
axis	'X' | 'Y' | 'Z' | 'XY' | 'YZ' | 'XZ' | 'XYZ' | null	Restricts transformation to specific axis. Default: null
space	'world' | 'local'	Coordinate space for transformations. Default: 'world'
size	number	Size of the gizmo. Default: 1
showX	boolean	Whether to show the X axis handle. Default: true
showY	boolean	Whether to show the Y axis handle. Default: true
showZ	boolean	Whether to show the Z axis handle. Default: true
translationSnap	number	Snap increment for translation. Default: null
rotationSnap	number	Snap increment for rotation in radians. Default: null
scaleSnap	number	Snap increment for scaling. Default: null
makeDefault	boolean	Whether to make these the default controls. Default: false