docs: clean up extend(THREE)

Author: nartc

apps/examples/src/app/cannon/cannon.ts

@@ -1,11 +1,7 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
-import { extend } from 'angular-three';
-import * as THREE from 'three';
 import routes from './cannon.routes';
 
-extend(THREE);
-
 @Component({
 	template: `
 		<div class="h-svh">

apps/examples/src/app/misc/misc.ts

@@ -1,11 +1,7 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
-import { extend } from 'angular-three';
-import * as THREE from 'three';
 import routes from './misc.routes';
 
-extend(THREE);
-
 @Component({
 	template: `
 		<div class="h-svh">

apps/examples/src/app/misc/webgpu-renderer/scene.ts

@@ -1,4 +1,12 @@
-import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, viewChild } from '@angular/core';
+import {
+	ChangeDetectionStrategy,
+	Component,
+	CUSTOM_ELEMENTS_SCHEMA,
+	DestroyRef,
+	ElementRef,
+	inject,
+	viewChild,
+} from '@angular/core';
 import { beforeRender, extend, NgtAfterAttach, NgtArgs } from 'angular-three';
 import { NgtsOrbitControls } from 'angular-three-soba/controls';
 import * as THREE from 'three/webgpu';
@@ -71,7 +79,7 @@ export class SceneGraph {
 	private scale = new THREE.Vector3();
 
 	constructor() {
-		extend(THREE);
+		const remove = extend(THREE);
 
 		beforeRender(() => {
 			const group = this.groupRef().nativeElement;
@@ -84,6 +92,10 @@ export class SceneGraph {
 				);
 			}
 		});
+
+		inject(DestroyRef).onDestroy(() => {
+			remove();
+		});
 	}
 
 	protected onAttached(event: NgtAfterAttach<THREE.Mesh>) {

apps/examples/src/app/misc/webgpu-tsl/scene.ts

@@ -4,8 +4,10 @@ import {
 	Component,
 	computed,
 	CUSTOM_ELEMENTS_SCHEMA,
+	DestroyRef,
 	effect,
 	ElementRef,
+	inject,
 	signal,
 	viewChild,
 } from '@angular/core';
@@ -151,7 +153,7 @@ export class SceneGraph {
 	protected startAngle = computed(() => THREE.MathUtils.DEG2RAD * this.startAngleDegrees());
 
 	constructor() {
-		extend({ MeshPhysicalNodeMaterial, DirectionalLight });
+		const remove = extend({ MeshPhysicalNodeMaterial, DirectionalLight });
 
 		beforeRender(({ delta }) => {
 			if (!this.rotate()) return;
@@ -180,5 +182,9 @@ export class SceneGraph {
 				scene.backgroundBlurriness = blurriness;
 			});
 		});
+
+		inject(DestroyRef).onDestroy(() => {
+			remove();
+		});
 	}
 }

apps/examples/src/app/postprocessing/postprocessing.ts

@@ -1,11 +1,7 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
-import { extend } from 'angular-three';
-import * as THREE from 'three';
 import routes from './postprocessing.routes';
 
-extend(THREE);
-
 @Component({
 	template: `
 		<div class="h-svh">

apps/examples/src/app/rapier/rapier.ts

@@ -1,11 +1,7 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
-import { extend } from 'angular-three';
-import * as THREE from 'three';
 import routes from './rapier.routes';
 
-extend(THREE);
-
 @Component({
 	template: `
 		<div class="h-svh bg-gradient-to-r from-violet-500 to-fuchsia-500">

apps/examples/src/app/routed-rocks/routed-rocks.ts

@@ -1,11 +1,8 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { extend, NgtRoutedScene } from 'angular-three';
+import { NgtRoutedScene } from 'angular-three';
 import { NgtCanvas } from 'angular-three/dom';
-import * as THREE from 'three';
 import { RockStore } from './store';
 
-extend(THREE);
-
 @Component({
 	template: `
 		<ngt-canvas [camera]="{ position: [8.978, 1.426, 2.766] }" shadows>

apps/examples/src/app/routed/routed.ts

@@ -1,12 +1,8 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RouterLink, RouterLinkActive } from '@angular/router';
-import { extend } from 'angular-three';
 import { NgtCanvas } from 'angular-three/dom';
-import * as THREE from 'three';
 import { RoutedScene } from './routed-scene';
 
-extend(THREE);
-
 @Component({
 	template: `
 		<div class="h-svh">

apps/examples/src/app/soba/shoe-configuration/scene.ts

@@ -66,11 +66,10 @@ export class ColorPicker {
 			>
 				@if (gltf.value(); as gltf) {
 					<ng-template #m let-ctx="ctx">
-						@let geometry = gltf.meshes[ctx[0]].geometry;
-						@let material = gltf.materials[ctx[1]];
-						<ngt-mesh receiveShadow castShadow [geometry]="geometry" [material]="material">
-							<ngt-value [rawValue]="$any(state.items)[ctx[1]]()" attach="material.color" />
-						</ngt-mesh>
+						@let geo = gltf.meshes[ctx[0]].geometry;
+						@let mat = gltf.materials[ctx[1]];
+						@let color = $any(state.items)[ctx[1]]();
+						<ngt-mesh receiveShadow castShadow [geometry]="geo" [material]="mat" [material.color]="color" />
 					</ng-template>
 
 					<ng-container [ngTemplateOutlet]="m" [ngTemplateOutletContext]="{ ctx: ['shoe', 'laces'] }" />

apps/examples/src/app/soba/soba.ts

@@ -1,11 +1,7 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
-import { extend } from 'angular-three';
-import * as THREE from 'three';
 import routes from './soba.routes';
 
-extend(THREE);
-
 @Component({
 	template: `
 		<div class="h-svh">

apps/examples/src/app/theatre/theatre.ts

@@ -1,11 +1,7 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
-import { extend } from 'angular-three';
-import * as THREE from 'three';
 import routes from './theatre.routes';
 
-extend(THREE);
-
 @Component({
 	template: `
 		<div class="h-svh">