NgtsOrbitControls

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

scene-graph.ts

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

@Component({
    selector: 'app-scene-graph',
    template: `
        <ngt-mesh>
            <ngt-torus-knot-geometry *args="[0.8, 0.25, 128, 32]" />
            <ngt-mesh-normal-material />
        </ngt-mesh>

        <ngts-orbit-controls
            [options]="{
                autoRotate: autoRotate(),
                enableDamping: true,
                makeDefault: true,
            }"
        />
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgtArgs, NgtsOrbitControls],
})
export class SceneGraph {
    protected autoRotate = signal(true);
}

NgtsOrbitControls is a wrapper around Three.js OrbitControls which allows you to rotate the camera around a target point using mouse and touch events.

Usage

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

<ngts-orbit-controls />

With Options

<ngts-orbit-controls [options]="{ autoRotate: true, enableZoom: false }" />

Make Default

When makeDefault is true, the controls will be set as the default controls in the store, allowing other components to access them.

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

Options

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

Properties

name	type	description
camera	NgtCamera	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 coordinates that the camera will 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
enableDamping	boolean	Whether to enable damping (smoothness) of the camera movement. Default: true
keyEvents	boolean | HTMLElement	Whether to enable keyboard events for the controls, or an HTML element to listen on. Default: false