NgtsOrthographicCamera

Preview

canvas.ts

import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { NgtArgs } from 'angular-three';
import { NgtsOrthographicCamera } from 'angular-three-soba/cameras';
import { NgtCanvas, provideNgtRenderer } from 'angular-three/dom';

import { SobaWrapper } from '@soba/wrapper.ts';
import { positions } from '../positions';

@Component({
    selector: 'app-orthographic-camera-demo',
    template: `
        <ngt-canvas>
            <app-soba-wrapper *canvasContent>
                <ngts-orthographic-camera [options]="{ makeDefault: true, zoom: 40, position: [0, 0, 10] }" />

                <ngt-group [position]="[0, 0, -10]">
                    @for (position of positions; track position.id) {
                        <ngt-mesh [position]="position.position">
                            <ngt-icosahedron-geometry *args="[1, 1]" />
                            <ngt-mesh-basic-material color="white" wireframe />
                        </ngt-mesh>
                    }
                </ngt-group>
            </app-soba-wrapper>
        </ngt-canvas>
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgtCanvas, NgtArgs, NgtsOrthographicCamera, SobaWrapper],
})
export default class OrthographicCamera {
    static clientProviders = [provideNgtRenderer()];

    protected readonly positions = positions;
}

A responsive THREE.OrthographicCamera with the ability to set itself as the default camera.

Usage

import { NgtsOrthographicCamera } from 'angular-three-soba/cameras';

<ngt-canvas>
    <ng-template canvasContent>
        <ngts-orthographic-camera [options]="{ makeDefault: true }" />
    </ng-template>
</ngt-canvas>

NgtsOrthographicCamera API is the same as NgtsPerspectiveCamera.

Options

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

Properties

name	type	description
frames	number	how many frames to render the FBO, default to Infinity
resolution	number	the resolution of the FBO, default to 256
envMap	THREE.Texture	custom environment map that is temporarily set as the scene background
makeDefault	boolean	registers the camera as the system default, default to false
manual	boolean	makes the camera manual, default to false