cameras

Author: nartc

libs/soba/cameras/README.md

@@ -0,0 +1,3 @@
+# angular-three-soba/cameras
+
+Secondary entry point of `angular-three-soba`. It can be used by importing from `angular-three-soba/cameras`.

libs/soba/cameras/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "src/index.ts"
+  }
+}

libs/soba/cameras/src/camera/camera-content.ts

@@ -0,0 +1,15 @@
+import { Directive, inject, Input, TemplateRef } from '@angular/core';
+import * as THREE from 'three';
+
+@Directive({ selector: 'ng-template[ngtsCameraContent]', standalone: true })
+export class NgtsCameraContent {
+	template = inject(TemplateRef);
+	@Input() ngtsCameraContent: true | '' = '';
+
+	static ngTemplateContextGuard(
+		_: NgtsCameraContent,
+		ctx: unknown,
+	): ctx is { fbo: THREE.WebGLRenderTarget; group?: THREE.Group } {
+		return true;
+	}
+}

libs/soba/cameras/src/camera/camera.ts

@@ -0,0 +1,72 @@
+import { Directive, effect, Input } from '@angular/core';
+import { injectNgtRef, injectNgtStore, signalStore, type NgtCamera } from 'angular-three';
+import { injectNgtsFBO } from 'angular-three-soba/misc';
+
+export type NgtsCameraState = {
+	makeDefault: boolean;
+	manual: boolean;
+	frames: number;
+	resolution: number;
+	envMap?: THREE.Texture;
+};
+
+@Directive()
+export abstract class NgtsCamera<TCamera extends NgtCamera> {
+	protected inputs = signalStore<NgtsCameraState>({
+		resolution: 256,
+		frames: Infinity,
+		makeDefault: false,
+		manual: false,
+	});
+
+	@Input() set makeDefault(makeDefault: boolean) {
+		this.inputs.set({ makeDefault });
+	}
+
+	@Input() set manual(manual: boolean) {
+		this.inputs.set({ manual });
+	}
+
+	@Input() set frames(frames: number) {
+		this.inputs.set({ frames });
+	}
+
+	@Input() set resolution(resolution: number) {
+		this.inputs.set({ resolution });
+	}
+
+	@Input() set envMap(envMap: THREE.Texture) {
+		this.inputs.set({ envMap });
+	}
+
+	@Input() cameraRef = injectNgtRef<TCamera>();
+
+	protected store = injectNgtStore();
+	private cameraResolution = this.inputs.select('resolution');
+	protected fboRef = injectNgtsFBO(() => ({ width: this.cameraResolution() }));
+
+	constructor() {
+		this.setDefaultCamera();
+		this.updateProjectionMatrix();
+	}
+
+	private setDefaultCamera() {
+		const makeDefault = this.inputs.select('makeDefault');
+		effect((onCleanup) => {
+			const camera = this.cameraRef.nativeElement;
+			if (camera && makeDefault()) {
+				const { camera: oldCamera } = this.store.get();
+				this.store.set({ camera });
+				onCleanup(() => this.store.set({ camera: oldCamera }));
+			}
+		});
+	}
+
+	private updateProjectionMatrix() {
+		const manual = this.inputs.select('manual');
+		effect(() => {
+			const camera = this.cameraRef.nativeElement;
+			if (!manual() && camera) camera.updateProjectionMatrix();
+		});
+	}
+}

libs/soba/cameras/src/index.ts

@@ -0,0 +1,2 @@
+export * from './orthographic-camera/orthographic-camera';
+export * from './perspective-camera/perspective-camera';

libs/soba/cameras/src/orthographic-camera/orthographic-camera.ts

@@ -0,0 +1,86 @@
+import { NgIf, NgTemplateOutlet } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, Component, ContentChild, Input, computed } from '@angular/core';
+import { extend, signalStore, type NgtOrthographicCamera } from 'angular-three';
+import { Group, OrthographicCamera } from 'three';
+import { NgtsCamera, type NgtsCameraState } from '../camera/camera';
+import { NgtsCameraContent } from '../camera/camera-content';
+
+extend({ OrthographicCamera, Group });
+
+export type NgtsOrthographicCameraState = {
+	left: number;
+	top: number;
+	right: number;
+	bottom: number;
+};
+
+declare global {
+	interface HTMLElementTagNameMap {
+		/**
+		 * @extends ngt-orthographic-camera
+		 */
+		'ngts-orthographic-camera': NgtsCameraState & NgtsOrthographicCameraState & NgtOrthographicCamera;
+	}
+}
+
+@Component({
+	selector: 'ngts-orthographic-camera',
+	standalone: true,
+	template: `
+		<ngt-orthographic-camera
+			ngtCompound
+			[ref]="cameraRef"
+			[left]="cameraLeft()"
+			[right]="cameraRight()"
+			[top]="cameraTop()"
+			[bottom]="cameraBottom()"
+		>
+			<ng-container
+				*ngIf="cameraContent && !cameraContent.ngtsCameraContent"
+				[ngTemplateOutlet]="cameraContent.template"
+			/>
+		</ngt-orthographic-camera>
+		<ngt-group #group *ngIf="cameraContent && cameraContent.ngtsCameraContent">
+			<ng-container *ngTemplateOutlet="cameraContent.template; context: { fbo: fboRef(), group }" />
+		</ngt-group>
+	`,
+	imports: [NgIf, NgTemplateOutlet],
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class NgtsOrthographicCamera extends NgtsCamera<THREE.OrthographicCamera> {
+	private orthographicInputs = signalStore<NgtsOrthographicCameraState>({
+		left: 0,
+		right: 0,
+		top: 0,
+		bottom: 0,
+	});
+
+	@ContentChild(NgtsCameraContent) cameraContent?: NgtsCameraContent;
+
+	@Input() set left(left: number) {
+		this.orthographicInputs.set({ left });
+	}
+
+	@Input() set right(right: number) {
+		this.orthographicInputs.set({ right });
+	}
+
+	@Input() set top(top: number) {
+		this.orthographicInputs.set({ top });
+	}
+
+	@Input() set bottom(bottom: number) {
+		this.orthographicInputs.set({ bottom });
+	}
+
+	private _left = this.orthographicInputs.select('left');
+	private _right = this.orthographicInputs.select('right');
+	private _top = this.orthographicInputs.select('top');
+	private _bottom = this.orthographicInputs.select('bottom');
+	private size = this.store.select('size');
+
+	cameraLeft = computed(() => this._left() || this.size().width / -2);
+	cameraRight = computed(() => this._right() || this.size().width / 2);
+	cameraTop = computed(() => this._top() || this.size().height / 2);
+	cameraBottom = computed(() => this._bottom() || this.size().height / -2);
+}

libs/soba/cameras/src/perspective-camera/perspective-camera.ts

@@ -0,0 +1,38 @@
+import { NgIf, NgTemplateOutlet } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, Component, ContentChild } from '@angular/core';
+import { extend, type NgtPerspectiveCamera } from 'angular-three';
+import { Group, PerspectiveCamera } from 'three';
+import { NgtsCamera, type NgtsCameraState } from '../camera/camera';
+import { NgtsCameraContent } from '../camera/camera-content';
+
+extend({ PerspectiveCamera, Group });
+
+declare global {
+	interface HTMLElementTagNameMap {
+		/**
+		 * @extends ngt-perspective-camera
+		 */
+		'ngts-perspective-camera': NgtsCameraState & NgtPerspectiveCamera;
+	}
+}
+
+@Component({
+	selector: 'ngts-perspective-camera',
+	standalone: true,
+	template: `
+		<ngt-perspective-camera [ref]="cameraRef" ngtCompound>
+			<ng-container
+				*ngIf="cameraContent && !cameraContent.ngtsCameraContent"
+				[ngTemplateOutlet]="cameraContent.template"
+			/>
+		</ngt-perspective-camera>
+		<ngt-group #group *ngIf="cameraContent && cameraContent.ngtsCameraContent">
+			<ng-container *ngTemplateOutlet="cameraContent.template; context: { fbo: fboRef.nativeElement, group }" />
+		</ngt-group>
+	`,
+	imports: [NgIf, NgTemplateOutlet],
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class NgtsPerspectiveCamera extends NgtsCamera<PerspectiveCamera> {
+	@ContentChild(NgtsCameraContent) cameraContent?: NgtsCameraContent;
+}