fix(core): routed scene should work

Author: nartc

apps/astro-docs/src/content/docs/core/advanced/routed-scene.mdx

@@ -5,10 +5,10 @@ description: Details about the Angular Three `NgtRoutedScene`
 
 import { Tabs, TabItem } from '@astrojs/starlight/components';
 
-:::danger
+:::caution
 
-This is no longer working due to [a fix in Angular Router](https://github.com/angular/angular/commit/3839cfbb18fcc70cae5a6ba4ba7676b1c4acf7a0).
-We will re-enable this feature once a workaround is found or a new fix is released.
+Due to [a fix in Angular Router](https://github.com/angular/angular/commit/3839cfbb18fcc70cae5a6ba4ba7676b1c4acf7a0), Angular Three
+implements a custom `RouterOutlet` to enable this feature. Use with caution. File an issue if you encounter any problems.
 
 :::
 
@@ -95,17 +95,42 @@ import { provideRouter } from '@angular/router';
 import { AppComponent } from './app/app.component';
 
 bootstrapApplication(AppComponent, {
-	providers: [
-		provideRouter([
-			{
-				path: '',
-				loadComponent: () => import('./app/red-scene.component'),
-			},
-			{
-				path: 'blue',
-				loadComponent: () => import('./app/blue-scene.component'),
-			},
-		]),
-	],
+ providers: [
+  provideRouter([
+   {
+    path: '',
+    loadComponent: () => import('./app/red-scene.component'),
+   },
+   {
+    path: 'blue',
+    loadComponent: () => import('./app/blue-scene.component'),
+   },
+  ]),
+ ],
 }).catch((err) => console.error(err));
 ```
+
+## Custom routed scene
+
+Using `'routed'` will use the default `NgtRoutedScene` component provided by Angular Three. It is also possible to have your own routed scene component.
+
+```html
+<ngt-canvas [sceneGraph]="CustomRoutedScene" />
+```
+
+```angular-ts
+@Component({
+  template: `
+    <ngt-router-outlet />
+    <!-- All routed scenes will have a CameraControls instead of each routed rendering their own camera controls -->
+    <ngts-camara-controls />
+  `,
+  imports: [
+    NgtRouterOutlet, // a custom router-outlet
+    NgtsCameraControls,
+  ],
+})
+export class CustomRoutedScene {
+  static [ROUTED_SCENE] = true; // flag for `NgtRenderer`
+}
+```

apps/kitchen-sink/src/app/app.component.ts

@@ -15,6 +15,7 @@ import { filter } from 'rxjs';
 				<option value="postprocessing">/postprocessing</option>
 				<option value="rapier">/rapier</option>
 				<option value="misc">/misc</option>
+				<option value="routed">/routed</option>
 			</select>
 
 			<div class="bg-white rounded-full p-2 text-black border border-white border-dashed">

apps/kitchen-sink/src/app/app.routes.ts

@@ -31,6 +31,12 @@ export const appRoutes: Route[] = [
 		loadChildren: () => import('./misc/misc.routes'),
 		title: 'Misc - Angular Three Demo',
 	},
+	{
+		path: 'routed',
+		loadComponent: () => import('./routed/routed'),
+		loadChildren: () => import('./routed/routed.routes'),
+		title: 'Routed - Angular Three Demo',
+	},
 	{
 		path: '',
 		// redirectTo: 'cannon',

apps/kitchen-sink/src/app/routed/blue-cube.ts

@@ -0,0 +1,24 @@
+import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, viewChild } from '@angular/core';
+import { injectBeforeRender } from 'angular-three';
+import { Mesh } from 'three';
+
+@Component({
+	template: `
+		<ngt-mesh #cube>
+			<ngt-box-geometry />
+			<ngt-mesh-basic-material color="blue" />
+		</ngt-mesh>
+	`,
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export default class BlueCube {
+	cubeRef = viewChild.required<ElementRef<Mesh>>('cube');
+
+	constructor() {
+		injectBeforeRender(({ clock }) => {
+			this.cubeRef().nativeElement.rotation.x = clock.elapsedTime;
+			this.cubeRef().nativeElement.rotation.y = clock.elapsedTime;
+		});
+	}
+}

apps/kitchen-sink/src/app/routed/custom-routed-scene.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { NgtRouterOutlet } from 'angular-three';
+import { NgtsCameraControls } from 'angular-three-soba/controls';
+
+@Component({
+	template: `
+		<ngt-router-outlet />
+		<ngts-camera-controls />
+	`,
+	imports: [NgtRouterOutlet, NgtsCameraControls],
+})
+export class CustomRoutedScene {}

apps/kitchen-sink/src/app/routed/red-cube.ts

@@ -0,0 +1,24 @@
+import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, viewChild } from '@angular/core';
+import { injectBeforeRender } from 'angular-three';
+import { Mesh } from 'three';
+
+@Component({
+	template: `
+		<ngt-mesh #cube>
+			<ngt-box-geometry />
+			<ngt-mesh-basic-material color="red" />
+		</ngt-mesh>
+	`,
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export default class RedCube {
+	private cubeRef = viewChild.required<ElementRef<Mesh>>('cube');
+
+	constructor() {
+		injectBeforeRender(({ clock }) => {
+			this.cubeRef().nativeElement.rotation.x = clock.elapsedTime;
+			this.cubeRef().nativeElement.rotation.y = clock.elapsedTime;
+		});
+	}
+}

apps/kitchen-sink/src/app/routed/routed.routes.ts

@@ -0,0 +1,19 @@
+import { Routes } from '@angular/router';
+
+const routes: Routes = [
+	{
+		path: 'red',
+		loadComponent: () => import('./red-cube'),
+	},
+	{
+		path: 'blue',
+		loadComponent: () => import('./blue-cube'),
+	},
+	{
+		path: '',
+		redirectTo: 'red',
+		pathMatch: 'full',
+	},
+];
+
+export default routes;

apps/kitchen-sink/src/app/routed/routed.ts

@@ -0,0 +1,44 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+import { extend, NgtCanvas } from 'angular-three';
+import * as THREE from 'three';
+import { CustomRoutedScene } from './custom-routed-scene';
+
+extend(THREE);
+
+@Component({
+	template: `
+		<div class="h-svh">
+			<ngt-canvas [sceneGraph]="routedScene" />
+		</div>
+
+		<ul class="absolute bottom-0 left-0 flex items-center gap-2">
+			<li>
+				<a
+					routerLink="red"
+					class="underline"
+					routerLinkActive="text-blue-500"
+					[routerLinkActiveOptions]="{ exact: true }"
+				>
+					Red Cube
+				</a>
+			</li>
+			<li>
+				<a
+					routerLink="blue"
+					class="underline"
+					routerLinkActive="text-blue-500"
+					[routerLinkActiveOptions]="{ exact: true }"
+				>
+					Blue Cube
+				</a>
+			</li>
+		</ul>
+	`,
+	imports: [NgtCanvas, RouterLink, RouterLinkActive],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: { class: 'routed' },
+})
+export default class Routed {
+	routedScene = CustomRoutedScene;
+}

libs/core/src/lib/canvas.ts

@@ -65,10 +65,7 @@ export class NgtCanvas {
 
 	sceneGraph = input.required<Type<any>, Type<any> | 'routed'>({
 		transform: (value) => {
-			if (value === 'routed') {
-				console.warn(`[NGT] 'routed' sceneGraph is not working properly.`);
-				return NgtRoutedScene;
-			}
+			if (value === 'routed') return NgtRoutedScene;
 			return value;
 		},
 	});

libs/core/src/lib/renderer/index.ts

@@ -296,6 +296,11 @@ export class NgtRenderer implements Renderer2 {
 				if (cRS[NgtRendererClassId.type] === 'three') {
 					removeThreeChild(oldChild, undefined, true);
 				}
+
+				// if the child is the root scene, we don't want to destroy it
+				if (is.scene(oldChild) && oldChild.name === '__ngt_root_scene__') return;
+
+				// otherwise, we'll destroy it
 				this.destroyInternal(oldChild, undefined);
 			}
 

libs/core/src/lib/roots.ts

@@ -162,6 +162,7 @@ export function injectCanvasRootInitializer(injector?: Injector) {
 						}
 
 						applyProps(scene, {
+							name: '__ngt_root_scene__',
 							setAttribute: (name: string, value: string) => {
 								if (canvas instanceof HTMLCanvasElement) {
 									if (canvas.parentElement) {

libs/core/src/lib/routed-scene.ts

@@ -1,25 +1,104 @@
-import { ChangeDetectorRef, Component } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { ActivationEnd, Router, RouterOutlet } from '@angular/router';
+import {
+	ChangeDetectorRef,
+	Component,
+	Directive,
+	effect,
+	EnvironmentInjector,
+	inject,
+	InjectFlags,
+	InjectOptions,
+	ProviderToken,
+	RendererFactory2,
+	runInInjectionContext,
+} from '@angular/core';
+import { ActivatedRoute, ActivationEnd, Router, RouterOutlet } from '@angular/router';
 import { filter } from 'rxjs';
 import { ROUTED_SCENE } from './renderer/constants';
 
+/**
+ * This is a custom EnvironmentInjector that returns the RendererFactory2 from the `ngtEnvironmentInjector`
+ * for `NgtRendererFactory`
+ */
+class NgtOutletEnvironmentInjector extends EnvironmentInjector {
+	constructor(
+		private readonly routeEnvInjector: EnvironmentInjector,
+		private readonly ngtEnvInjector: EnvironmentInjector,
+	) {
+		super();
+	}
+
+	override get<T>(
+		token: ProviderToken<T>,
+		notFoundValue?: unknown,
+		flags: InjectFlags | InjectOptions = InjectFlags.Default,
+	): any {
+		const options: InjectOptions = {};
+
+		if (typeof flags === 'object') {
+			Object.assign(options, flags);
+		} else {
+			Object.assign(options, {
+				optional: !!(flags & InjectFlags.Optional),
+				host: !!(flags & InjectFlags.Host),
+				self: !!(flags & InjectFlags.Self),
+				skipSelf: !!(flags & InjectFlags.SkipSelf),
+			});
+		}
+
+		if (token === RendererFactory2) {
+			return this.ngtEnvInjector.get(token, notFoundValue, options);
+		}
+
+		return this.routeEnvInjector.get(token, notFoundValue, options);
+	}
+
+	override runInContext<ReturnT>(fn: () => ReturnT): ReturnT {
+		try {
+			return runInInjectionContext(this.routeEnvInjector, fn);
+		} catch {}
+
+		return runInInjectionContext(this.ngtEnvInjector, fn);
+	}
+
+	override destroy(): void {
+		this.routeEnvInjector.destroy();
+	}
+}
+
+@Directive({ selector: 'ngt-router-outlet' })
+/**
+ * This is a custom RouterOutlet that modifies `activateWith` to inherit the `EnvironmentInjector`
+ * that contains the custom `NgtRendererFactory`.
+ *
+ * Use this with extreme caution.
+ */
+export class NgtRouterOutlet extends RouterOutlet {
+	private environmentInjector = inject(EnvironmentInjector);
+
+	override activateWith(activatedRoute: ActivatedRoute, environmentInjector: EnvironmentInjector): void {
+		return super.activateWith(
+			activatedRoute,
+			new NgtOutletEnvironmentInjector(environmentInjector, this.environmentInjector),
+		);
+	}
+}
+
 @Component({
 	selector: 'ngt-routed-scene',
 	template: `
-		<router-outlet />
+		<ngt-router-outlet />
 	`,
-	imports: [RouterOutlet],
+	imports: [NgtRouterOutlet],
 })
 export class NgtRoutedScene {
 	static [ROUTED_SCENE] = true;
 
 	constructor(router: Router, cdr: ChangeDetectorRef) {
-		router.events
-			.pipe(
-				filter((event) => event instanceof ActivationEnd),
-				takeUntilDestroyed(),
-			)
-			.subscribe(cdr.detectChanges.bind(cdr));
+		effect((onCleanup) => {
+			const sub = router.events
+				.pipe(filter((event) => event instanceof ActivationEnd))
+				.subscribe(cdr.detectChanges.bind(cdr));
+			onCleanup(() => sub.unsubscribe());
+		});
 	}
 }