refactor(soba): update cameras with new renderer

nartc · nartc · commit cb9d20699fb0 · 2025-01-26T09:03:40.000-06:00
diff --git a/apps/docs/src/content/docs/index.mdx b/apps/docs/src/content/docs/index.mdx
@@ -23,30 +23,30 @@ import FloatingCodeBlock from '../../components/ui/floating-code-block.astro';
 import SimpleScene from '../../components/scenes/simple-scene/simple-scene';
 
 <section class="min-h-screen w-full flex justify-center items-center">
- <div class="relative h-full w-full grid grid-cols-8 gap-4">
+ <div class="h-full w-full grid grid-cols-8 gap-4">
   <div class="col-span-3">
-    <h1>
-      Declarative <span class="text-accent-600 dark:text-accent-200">scene graphs</span>
-    </h1>
-
-    <p>
-      Angular Three allows the users to declaratively build a scene graph using the familiar Angular template syntax. This
-      approach enables Angular developers to leverage familiar skills and tools of Angular template to build 3D scenes.
-    </p>
-
-    <div class="h-[200px] w-full">
-      <SimpleScene client:only />
-    </div>
-
+   <h1>
+    Declarative <span class="text-accent-600 dark:text-accent-200">scene graphs</span>
+   </h1>
+   <p>
+    Angular Three allows the users to use every feature of THREE.js in a declarative way via Angular{' '}
+    <strong>template syntax</strong>. Scale your 3D experiences with ease by leveraging Angular's batteries-included
+    APIs like <strong>Signal</strong>, and more
+   </p>
+   <div class="h-[200px] w-full">
+    <SimpleScene client:only />
+   </div>
   </div>
   <FloatingCodeBlock
-    class="col-span-5"
-    snippets={[
-      { title: 'scene-graph.ts', name: 'simple-scene' },
-      { title: 'canvas.ts', name: 'simple-scene-canvas' },
-    ]}
+   class="col-span-5"
+   snippets={[
+    { title: 'scene-graph.ts', name: 'simple-scene' },
+    { title: 'canvas.ts', name: 'simple-scene-canvas' },
+   ]}
   />
-
  </div>
+</section>
 
+<section class="min-h-screen w-full flex justify-center items-center">
+ <div class="h-full w-full grid grid-cols-8 gap-4"></div>
 </section>
diff --git a/libs/soba/cameras/src/lib/camera-content.ts b/libs/soba/cameras/src/lib/camera-content.ts
@@ -1,9 +1,9 @@
 import { Directive, Signal } from '@angular/core';
-import { Texture } from 'three';
+import * as THREE from 'three';
 
 @Directive({ selector: 'ng-template[cameraContent]' })
 export class NgtsCameraContent {
-	static ngTemplateContextGuard(_: NgtsCameraContent, ctx: unknown): ctx is { $implicit: Signal<Texture> } {
+	static ngTemplateContextGuard(_: NgtsCameraContent, ctx: unknown): ctx is { $implicit: Signal<THREE.Texture> } {
 		return true;
 	}
 }
diff --git a/libs/soba/cameras/src/lib/cube-camera.ts b/libs/soba/cameras/src/lib/cube-camera.ts
@@ -13,10 +13,11 @@ import {
 	untracked,
 	viewChild,
 } from '@angular/core';
-import { extend, injectBeforeRender, injectStore, merge, NgtArgs, NgtGroup, omit, pick } from 'angular-three';
+import { extend, injectBeforeRender, injectStore, merge, NgtArgs, NgtThreeElements, omit, pick } from 'angular-three';
 import { assertInjector } from 'ngxtension/assert-injector';
 import { mergeInputs } from 'ngxtension/inject-inputs';
-import { CubeCamera, Fog, FogExp2, Group, HalfFloatType, Texture, WebGLCubeRenderTarget } from 'three';
+import * as THREE from 'three';
+import { Group } from 'three';
 import { NgtsCameraContent } from './camera-content';
 
 export interface CubeCameraOptions {
@@ -27,16 +28,14 @@ export interface CubeCameraOptions {
 	/** Camera far, 1000 */
 	far?: number;
 	/** Custom environment map that is temporarily set as the scenes background */
-	envMap?: Texture;
+	envMap?: THREE.Texture;
 	/** Custom fog that is temporarily set as the scenes fog */
-	fog?: Fog | FogExp2;
+	fog?: THREE.Fog | THREE.FogExp2;
 }
 
 export function injectCubeCamera(options: () => CubeCameraOptions, { injector }: { injector?: Injector } = {}) {
 	return assertInjector(injectCubeCamera, injector, () => {
 		const store = injectStore();
-		const gl = store.select('gl');
-		const scene = store.select('scene');
 
 		// backfill the options with default values
 		const mergedOptions = merge(options, { resolution: 256, near: 0.1, far: 1000 }, 'backfill');
@@ -45,8 +44,8 @@ export function injectCubeCamera(options: () => CubeCameraOptions, { injector }:
 		const far = pick(mergedOptions, 'far');
 
 		const fbo = computed(() => {
-			const fbo = new WebGLCubeRenderTarget(resolution());
-			fbo.texture.type = HalfFloatType;
+			const fbo = new THREE.WebGLCubeRenderTarget(resolution());
+			fbo.texture.type = THREE.HalfFloatType;
 			return fbo;
 		});
 
@@ -55,26 +54,26 @@ export function injectCubeCamera(options: () => CubeCameraOptions, { injector }:
 			onCleanup(() => _fbo.dispose());
 		});
 
-		const camera = computed(() => new CubeCamera(near()!, far()!, fbo()));
+		const cubeCamera = computed(() => new THREE.CubeCamera(near()!, far()!, fbo()));
 		const update = () => {
-			const [_scene, _gl, _camera, { envMap, fog }] = [scene(), gl(), camera(), untracked(mergedOptions)];
-			let originalFog: Fog | FogExp2;
-			let originalBackground: Texture;
-
-			originalFog = _scene.fog as Fog | FogExp2;
-			originalBackground = _scene.background as Texture;
-			_scene.background = envMap || originalBackground;
-			_scene.fog = fog || originalFog;
-			_camera.update(_gl, _scene);
-			_scene.fog = originalFog;
-			_scene.background = originalBackground;
+			const [scene, gl, camera, { envMap, fog }] = [store.scene(), store.gl(), cubeCamera(), untracked(mergedOptions)];
+			let originalFog: THREE.Fog | THREE.FogExp2;
+			let originalBackground: THREE.Texture;
+
+			originalFog = scene.fog as THREE.Fog | THREE.FogExp2;
+			originalBackground = scene.background as THREE.Texture;
+			scene.background = envMap || originalBackground;
+			scene.fog = fog || originalFog;
+			camera.update(gl, scene);
+			scene.fog = originalFog;
+			scene.background = originalBackground;
 		};
 
-		return { fbo, camera, update };
+		return { fbo, camera: cubeCamera, update };
 	});
 }
 
-export interface NgtsCubeCameraOptions extends Partial<NgtGroup>, CubeCameraOptions {
+export interface NgtsCubeCameraOptions extends Partial<NgtThreeElements['ngt-group']>, CubeCameraOptions {
 	frames: number;
 }
 
@@ -101,15 +100,15 @@ const defaultOptions: NgtsCubeCameraOptions = {
 })
 export class NgtsCubeCamera {
 	options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
-	parameters = omit(this.options, ['fog', 'near', 'far', 'envMap', 'resolution', 'frames']);
+	protected parameters = omit(this.options, ['fog', 'near', 'far', 'envMap', 'resolution', 'frames']);
 
 	private cubeCamera = injectCubeCamera(pick(this.options, ['near', 'far', 'envMap', 'fog', 'resolution']));
 
-	camera = this.cubeCamera.camera;
-	texture = pick(this.cubeCamera.fbo, 'texture');
+	protected camera = this.cubeCamera.camera;
+	protected texture = pick(this.cubeCamera.fbo, 'texture');
 
-	groupRef = viewChild.required<ElementRef<Group>>('group');
-	cameraContent = contentChild(NgtsCameraContent, { read: TemplateRef });
+	groupRef = viewChild.required<ElementRef<THREE.Group>>('group');
+	protected cameraContent = contentChild(NgtsCameraContent, { read: TemplateRef });
 
 	constructor() {
 		extend({ Group });
diff --git a/libs/soba/cameras/src/lib/orthographic-camera.ts b/libs/soba/cameras/src/lib/orthographic-camera.ts
@@ -12,13 +12,14 @@ import {
 	untracked,
 	viewChild,
 } from '@angular/core';
-import { NgtOrthographicCamera, extend, injectBeforeRender, injectStore, omit, pick } from 'angular-three';
+import { NgtThreeElements, extend, injectBeforeRender, injectStore, omit, pick } from 'angular-three';
 import { injectFBO } from 'angular-three-soba/misc';
 import { mergeInputs } from 'ngxtension/inject-inputs';
-import { Color, Group, OrthographicCamera, Texture } from 'three';
+import * as THREE from 'three';
+import { Group, OrthographicCamera } from 'three';
 import { NgtsCameraContent } from './camera-content';
 
-export interface NgtsOrthographicCameraOptions extends Partial<NgtOrthographicCamera> {
+export interface NgtsOrthographicCameraOptions extends Partial<NgtThreeElements['ngt-orthographic-camera']> {
 	/** Registers the camera as the system default, fiber will start rendering with it */
 	makeDefault?: boolean;
 	/** Making it manual will stop responsiveness and you have to calculate aspect ratio yourself. */
@@ -28,7 +29,7 @@ export interface NgtsOrthographicCameraOptions extends Partial<NgtOrthographicCa
 	/** Resolution of the FBO, 256 */
 	resolution: number;
 	/** Optional environment map for functional use */
-	envMap?: Texture;
+	envMap?: THREE.Texture;
 }
 
 const defaultOptions: NgtsOrthographicCameraOptions = {
@@ -74,16 +75,16 @@ export class NgtsOrthographicCamera {
 		'right',
 	]);
 
-	content = contentChild(TemplateRef);
-	cameraContent = contentChild(NgtsCameraContent, { read: TemplateRef });
+	protected content = contentChild(TemplateRef);
+	protected cameraContent = contentChild(NgtsCameraContent, { read: TemplateRef });
 
-	cameraRef = viewChild.required<ElementRef<OrthographicCamera>>('camera');
-	groupRef = viewChild.required<ElementRef<Group>>('group');
+	cameraRef = viewChild.required<ElementRef<THREE.OrthographicCamera>>('camera');
+	groupRef = viewChild.required<ElementRef<THREE.Group>>('group');
 
 	private store = injectStore();
 
-	private camera = this.store.select('camera');
-	protected size = this.store.select('size');
+	private camera = this.store.camera;
+	private size = this.store.size;
 
 	protected left = computed(() => this.options().left ?? this.size().width / -2);
 	protected right = computed(() => this.options().right ?? this.size().width / 2);
@@ -122,7 +123,7 @@ export class NgtsOrthographicCamera {
 		});
 
 		let count = 0;
-		let oldEnvMap: Color | Texture | null = null;
+		let oldEnvMap: THREE.Color | THREE.Texture | null = null;
 		injectBeforeRender(({ gl, scene }) => {
 			const [{ frames, envMap }, group, camera, fbo] = [
 				this.options(),
diff --git a/libs/soba/cameras/src/lib/perspective-camera.ts b/libs/soba/cameras/src/lib/perspective-camera.ts
@@ -11,13 +11,14 @@ import {
 	untracked,
 	viewChild,
 } from '@angular/core';
-import { NgtPerspectiveCamera, extend, injectBeforeRender, injectStore, omit, pick } from 'angular-three';
+import { NgtThreeElements, extend, injectBeforeRender, injectStore, omit, pick } from 'angular-three';
 import { injectFBO } from 'angular-three-soba/misc';
 import { mergeInputs } from 'ngxtension/inject-inputs';
-import { Color, Group, PerspectiveCamera, Texture } from 'three';
+import * as THREE from 'three';
+import { Group, PerspectiveCamera } from 'three';
 import { NgtsCameraContent } from './camera-content';
 
-export interface NgtsPerspectiveCameraOptions extends Partial<NgtPerspectiveCamera> {
+export interface NgtsPerspectiveCameraOptions extends Partial<NgtThreeElements['ngt-perspective-camera']> {
 	/** Registers the camera as the system default, fiber will start rendering with it */
 	makeDefault?: boolean;
 	/** Making it manual will stop responsiveness and you have to calculate aspect ratio yourself. */
@@ -27,7 +28,7 @@ export interface NgtsPerspectiveCameraOptions extends Partial<NgtPerspectiveCame
 	/** Resolution of the FBO, 256 */
 	resolution: number;
 	/** Optional environment map for functional use */
-	envMap?: Texture;
+	envMap?: THREE.Texture;
 }
 
 const defaultOptions: NgtsPerspectiveCameraOptions = {
@@ -56,16 +57,16 @@ export class NgtsPerspectiveCamera {
 	options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
 	protected parameters = omit(this.options, ['envMap', 'makeDefault', 'manual', 'frames', 'resolution']);
 
-	content = contentChild(TemplateRef);
-	cameraContent = contentChild(NgtsCameraContent, { read: TemplateRef });
+	protected content = contentChild(TemplateRef);
+	protected cameraContent = contentChild(NgtsCameraContent, { read: TemplateRef });
 
-	cameraRef = viewChild.required<ElementRef<PerspectiveCamera>>('camera');
-	groupRef = viewChild.required<ElementRef<Group>>('group');
+	cameraRef = viewChild.required<ElementRef<THREE.PerspectiveCamera>>('camera');
+	groupRef = viewChild.required<ElementRef<THREE.Group>>('group');
 
 	private store = injectStore();
 
-	private camera = this.store.select('camera');
-	private size = this.store.select('size');
+	private camera = this.store.camera;
+	private size = this.store.size;
 
 	private manual = pick(this.options, 'manual');
 	private makeDefault = pick(this.options, 'makeDefault');
@@ -96,9 +97,9 @@ export class NgtsPerspectiveCamera {
 			this.store.update({ camera: this.cameraRef().nativeElement });
 			onCleanup(() => this.store.update(() => ({ camera: oldCam })));
 		});
-		/**/
+
 		let count = 0;
-		let oldEnvMap: Color | Texture | null = null;
+		let oldEnvMap: THREE.Color | THREE.Texture | null = null;
 		injectBeforeRender(({ gl, scene }) => {
 			const [{ frames, envMap }, group, camera, fbo] = [
 				this.options(),

Original file line number	Diff line number	Diff line change
`@@ -1,9 +1,9 @@`
`1`	`1`	`import { Directive, Signal } from '@angular/core';`
`2`		`-import { Texture } from 'three';`
	`2`	`+import * as THREE from 'three';`
`3`	`3`
`4`	`4`	`@Directive({ selector: 'ng-template[cameraContent]' })`
`5`	`5`	`export class NgtsCameraContent {`
`6`		`- static ngTemplateContextGuard(_: NgtsCameraContent, ctx: unknown): ctx is { $implicit: Signal<Texture> } {`
	`6`	`+ static ngTemplateContextGuard(_: NgtsCameraContent, ctx: unknown): ctx is { $implicit: Signal<THREE.Texture> } {`
`7`	`7`	`return true;`
`8`	`8`	`}`
`9`	`9`	`}`