NgtsTrackballControls

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

scene-graph.ts

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

@Component({
    selector: 'app-scene-graph',
    template: `
        <ngt-mesh>
            <ngt-icosahedron-geometry *args="[1, 1]" />
            <ngt-mesh-normal-material [flatShading]="true" />
        </ngt-mesh>

        <ngts-trackball-controls [options]="{ makeDefault: true }" />
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgtArgs, NgtsTrackballControls],
})
export class SceneGraph {}

NgtsTrackballControls is a wrapper around Three.js TrackballControls which provides trackball-style camera controls. Unlike OrbitControls, TrackballControls have no restrictions on vertical rotation, allowing the camera to flip upside down.

Usage

import { NgtsTrackballControls } from 'angular-three-soba/controls';

<ngts-trackball-controls />

With Options

<ngts-trackball-controls [options]="{ makeDefault: true }" />

Handling Events

<ngts-trackball-controls
  (changed)="onControlsChange($event)"
  (started)="onStart()"
  (ended)="onEnd()"
/>

onControlsChange(event: any) {
  console.log('Camera changed');
}

onStart() {
  console.log('User interaction started');
}

onEnd() {
  console.log('User interaction ended');
}

Outputs

name	type	description
changed	any	Emits when the camera position/orientation changes.
started	any	Emits when user interaction starts.
ended	any	Emits when user interaction ends.

Options

options input accepts any properties from TrackballControls in addition to the following:

Properties

name	type	description
camera	THREE.Camera	The camera to control. If not provided, the default camera will be used.
domElement	HTMLElement	The DOM element to attach the controls to. If not provided, the current connected element will be used.
target	[number, number, number]	The target point to orbit around. Default: [0, 0, 0]
makeDefault	boolean	Whether to make this control the default one. Default: false
regress	boolean	Whether to regress performance. Default: false