NgtsPerspectiveCamera

Preview

canvas.ts

import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { SobaWrapper } from '@soba/wrapper.ts';
import { NgtArgs } from 'angular-three';
import { NgtsPerspectiveCamera } from 'angular-three-soba/cameras';
import { NgtCanvas, provideNgtRenderer } from 'angular-three/dom';

import { positions } from '../positions';

@Component({
    selector: 'app-perspective-camera-demo',
    template: `
        <ngt-canvas>
            <app-soba-wrapper *canvasContent>
                <ngts-perspective-camera [options]="{ makeDefault: true, 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, NgtsPerspectiveCamera, NgtArgs, SobaWrapper],
})
export default class PerspectiveCamera {
    static clientProviders = [provideNgtRenderer()];

    protected readonly positions = positions;
}

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

Usage

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

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

Content

You can also provide content which will follow the camera as it moves.

<ngts-perspective-camera [options]="{ makeDefault: true }">
    <ngt-mesh>
        <ngt-box-geometry />
    </ngt-mesh>
</ngts-perspective-camera>

Render Target

You can use the NgtsPerspectiveCamera to project content onto an FBO, similar to THREE.CubeCamera, via NgtsCameraContent. The projected content will not follow the camera. NgtsCameraContent exposes a THREE.Texture which you can use to assign to a material.

<ngts-perspective-camera>
    <ngt-mesh *cameraContent="let texture">
        <ngt-mesh-basic-material [map]="texture" />
    </ngt-mesh>
</ngts-perspective-camera>

Options

options input accepts any properties from THREE.PerspectiveCamera 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