NgtsCubeCamera

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-soba-cube-camera',
    template: `
        <ngt-canvas [camera]="{ position: [0, 5, 20] }">
            <app-soba-wrapper *canvasContent>
                <app-scene-graph />
            </app-soba-wrapper>
        </ngt-canvas>
    `,
    imports: [NgtCanvas, SceneGraph, SobaWrapper],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class CubeCamera {
    static clientProviders = [provideNgtRenderer()];
}

scene-graph.ts

import {
    ChangeDetectionStrategy,
    Component,
    CUSTOM_ELEMENTS_SCHEMA,
    ElementRef,
    input,
    viewChild,
} from '@angular/core';
import { beforeRender, NgtArgs, type NgtVector3 } from 'angular-three';
import { NgtsCameraContent, NgtsCubeCamera } from 'angular-three-soba/cameras';
import * as THREE from 'three';

@Component({
    selector: 'app-cube-camera-sphere',
    template: `
        <ngts-cube-camera [options]="{ position: position() }">
            <ngt-mesh *cameraContent="let texture" #mesh>
                <ngt-sphere-geometry *args="[5, 64, 64]" />
                <ngt-mesh-standard-material [roughness]="0" [metalness]="1" [envMap]="texture" />
            </ngt-mesh>
        </ngts-cube-camera>
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgtsCubeCamera, NgtsCameraContent, NgtArgs],
})
export class CubeCameraSphere {
    position = input<NgtVector3>([0, 0, 0]);
    offset = input(0);

    private mesh = viewChild<ElementRef<THREE.Mesh>>('mesh');

    constructor() {
        beforeRender(({ clock }) => {
            const mesh = this.mesh()?.nativeElement;
            if (!mesh) return;
            mesh.position.y = Math.sin(this.offset() + clock.elapsedTime) * 5;
        });
    }
}

@Component({
    selector: 'app-scene-graph',
    template: `
        <ngt-fog *args="['#f0f0f0', 100, 200]" attach="fog" />

        <app-cube-camera-sphere [position]="[-10, 10, 0]" />
        <app-cube-camera-sphere [position]="[10, 9, 0]" [offset]="2000" />

        <ngt-mesh [position]="[0, 2.5, 0]">
            <ngt-box-geometry *args="[5, 5, 5]" />
            <ngt-mesh-basic-material color="hotpink" />
        </ngt-mesh>
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgtArgs, CubeCameraSphere],
})
export class SceneGraph {}

An abstraction around THREE.CubeCamera that exposes its texture (render target) via NgtsCameraContent directive. Before rendering to the render target, NgtsCameraContent will be set to invisible to exclude from reflections.

Usage

import { NgtsCubeCamera, NgtsCameraContent } from 'angular-three-soba/cameras';

<ngts-cube-camera>
    <ngt-mesh *cameraContent="let texture">
        <ngt-sphere-geometry />
        <ngt-mesh-standard-material [envMap]="texture" />
    </ngt-mesh>
</ngts-cube-camera>

Controlling updates

By default, frames is set to Infinity, which means that the FBO will be rendered on every frame. This is sometimes unnecessary if you have static scenes. You can control the number of frames to render by passing a number to frames option via [options]="{ frames: 10 }".

For moving objects, you can keep frames as Infinity but use a smaller resolution instead. For static scenes, a good default is to set frames to the same number of NgtsCubeCamera instances. This allows each camera to render and then be picked up in each other’s reflection.

Options

options input accepts any properties from THREE.CubeCamera 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
near	number	the near plane of the camera, default to 0.1
far	number	the far plane of the camera, default to 1000
envMap	THREE.Texture	custom environment map that is temporarily set as the scene background
fog	THREE.Fog | THREE.FogExp2	custom fog that is temporarily set as the scene fog