NgtsCenter

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

scene-graph.ts

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

@Component({
    selector: 'app-scene-graph',
    template: `
        <ngts-center [options]="{ top: true }">
            <ngt-mesh>
                <ngt-box-geometry *args="[2, 1, 1]" />
                <ngt-mesh-standard-material color="#ff6b6b" />
            </ngt-mesh>
        </ngts-center>
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgtArgs, NgtsCenter],
})
export class SceneGraph {}

NgtsCenter is a port of Drei’s Center which is a component that calculates a bounding box and center its children accordingly.

Outputs

name	type	description
centered	NgtsCenterState	Emits when the component centers its children.

Options

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

Properties

name	type	description
top	boolean	Whether to center the children along the top axis.
right	boolean	Whether to center the children along the right axis.
bottom	boolean	Whether to center the children along the bottom axis.
left	boolean	Whether to center the children along the left axis.
front	boolean	Whether to center the children along the front axis.
back	boolean	Whether to center the children along the back axis.
disable	boolean	Disable all axes.
disableX	boolean	Disable x-axis centering.
disableY	boolean	Disable y-axis centering.
disableZ	boolean	Disable z-axis centering.
precise	boolean	See https://threejs.org/docs/index.html?q=box3#api/en/math/Box3.setFromObject. Default: true
cacheKey	any	Optional cacheKey to keep the component from recalculating on every render. Default: 0