docs: add aquarium example

Author: nartc

apps/kitchen-sink/src/app/cannon/convexpolyhedron/experience.ts

@@ -3,7 +3,6 @@ import {
 	ChangeDetectionStrategy,
 	Component,
 	ElementRef,
-	Signal,
 	computed,
 	inject,
 	input,
@@ -138,7 +137,7 @@ type DiamondGLTF = GLTF & {
 export class Diamond {
 	protected positionRotationInputs = inject(PositionRotationInput, { host: true });
 
-	private gltf = injectGLTF(() => './diamond.glb') as Signal<DiamondGLTF | null>;
+	private gltf = injectGLTF<DiamondGLTF>(() => './diamond.glb');
 	protected geometry = computed(() => {
 		const gltf = this.gltf();
 		if (!gltf) return null;

apps/kitchen-sink/src/app/cannon/monday-morning/experience.ts

@@ -327,7 +327,7 @@ interface CupGLTF extends GLTF {
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Mug {
-	protected gltf = injectGLTF(() => './cup.glb') as Signal<CupGLTF | null>;
+	protected gltf = injectGLTF<CupGLTF>(() => './cup.glb');
 	private group = viewChild.required<ElementRef<Group>>('group');
 
 	protected dragConstraint = injectDragConstraint(this.group);

apps/kitchen-sink/src/app/rapier/performance/performance.ts

@@ -6,7 +6,6 @@ import {
 	input,
 	output,
 	signal,
-	Signal,
 	viewChild,
 } from '@angular/core';
 import { injectBeforeRender, NgtVector3, NON_ROOT } from 'angular-three';
@@ -113,7 +112,7 @@ export class Bendy {
 	position = input<NgtVector3>([0, 0, 0]);
 	scale = input<NgtVector3>([1, 1, 1]);
 
-	protected gltf = injectGLTF(() => './bendy.glb') as Signal<BendyGLTF | null>;
+	protected gltf = injectGLTF<BendyGLTF>(() => './bendy.glb');
 }
 
 @Component({

apps/kitchen-sink/src/app/rapier/suzanne.ts

@@ -1,4 +1,3 @@
-import { Signal } from '@angular/core';
 import { injectGLTF } from 'angular-three-soba/loaders';
 import { Mesh } from 'three';
 import { GLTF } from 'three-stdlib';
@@ -8,5 +7,5 @@ type SuzanneGLTF = GLTF & {
 };
 
 export function injectSuzanne() {
-	return injectGLTF(() => './suzanne.glb') as Signal<SuzanneGLTF | null>;
+	return injectGLTF<SuzanneGLTF>(() => './suzanne.glb');
 }

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, Signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { injectGLTF } from 'angular-three-soba/loaders';
 import { NgtsMeshTransmissionMaterial } from 'angular-three-soba/materials';
 import { Mesh } from 'three';
@@ -31,5 +31,5 @@ interface BombGLTF extends GLTF {
 	imports: [NgtsMeshTransmissionMaterial],
 })
 export default class Bomb {
-	protected gltf = injectGLTF(() => bombUrl) as Signal<BombGLTF | null>;
+	protected gltf = injectGLTF<BombGLTF>(() => bombUrl);
 }

apps/kitchen-sink/src/app/soba/aquarium/aquarium.ts

@@ -0,0 +1,22 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgtCanvas } from 'angular-three';
+import { Experience } from './experience';
+
+// <Canvas shadows camera={{ position: [30, 0, -3], fov: 35, near: 1, far: 50 }} gl={{ stencil: true }}>
+
+@Component({
+	template: `
+		<ngt-canvas
+			[sceneGraph]="sceneGraph"
+			shadows
+			[camera]="{ position: [30, 0, -3], fov: 35, near: 1, far: 50 }"
+			[gl]="{ stencil: true }"
+		/>
+	`,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: { class: 'aquarium' },
+	imports: [NgtCanvas],
+})
+export default class Aquarium {
+	protected sceneGraph = Experience;
+}

apps/kitchen-sink/src/app/soba/aquarium/experience.ts

@@ -0,0 +1,102 @@
+import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgtArgs } from 'angular-three';
+import { NgtsCameraControls } from 'angular-three-soba/controls';
+import {
+	NgtsAccumulativeShadows,
+	NgtsEnvironment,
+	NgtsFloat,
+	NgtsLightformer,
+	NgtsRandomizedLights,
+} from 'angular-three-soba/staging';
+import { Spheres } from './spheres';
+import { Tank } from './tank';
+import { Turtle } from './turtle';
+
+@Component({
+	template: `
+		<ngt-color *args="['#c6e5db']" attach="background" />
+
+		<!-- fish tank -->
+		<app-tank [position]="[0, 0.25, 0]">
+			<ngts-float [options]="{ rotationIntensity: 2, floatIntensity: 10, speed: 2 }">
+				<app-turtle [position]="[0, -0.5, -1]" [rotation]="[0, Math.PI, 0]" [scale]="23" />
+			</ngts-float>
+
+			<app-spheres />
+		</app-tank>
+
+		<!-- soft shadows -->
+		<ngts-accumulative-shadows
+			[options]="{
+				temporal: true,
+				frames: 100,
+				color: 'lightblue',
+				colorBlend: 2,
+				opacity: 0.7,
+				alphaTest: 0.65,
+				scale: 60,
+				position: [0, -5, 0],
+			}"
+		>
+			<ngts-randomized-lights
+				[options]="{ amount: 8, radius: 15, ambient: 0.5, intensity: Math.PI, position: [-5, 10, -5], size: 20 }"
+			/>
+		</ngts-accumulative-shadows>
+
+		<!-- custom env map -->
+		<ngts-environment [options]="{ resolution: 1024 }">
+			<ngt-group * [rotation]="[-Math.PI / 3, 0, 0]">
+				<ngts-lightformer
+					[options]="{ intensity: 4, rotation: [Math.PI / 2, 0, 0], position: [0, 5, -9], scale: [10, 10, 1] }"
+				/>
+
+				@for (x of lightPositions; track $index) {
+					<ngts-lightformer
+						[options]="{
+							form: 'circle',
+							intensity: 4,
+							rotation: [Math.PI / 2, 0, 0],
+							position: [x, 4, $index * 4],
+							scale: [4, 1, 1],
+						}"
+					/>
+				}
+
+				<ngts-lightformer
+					[options]="{ intensity: 2, rotation: [Math.PI / 2, 0, 0], position: [-5, 1, -1], scale: [50, 2, 1] }"
+				/>
+				<ngts-lightformer
+					[options]="{ intensity: 2, rotation: [-Math.PI / 2, 0, 0], position: [10, 1, 0], scale: [50, 2, 1] }"
+				/>
+			</ngt-group>
+		</ngts-environment>
+
+		<ngts-camera-controls
+			[options]="{
+				minPolarAngle: 0,
+				maxPolarAngle: Math.PI / 2,
+				truckSpeed: 0,
+				dollySpeed: 0,
+			}"
+		/>
+	`,
+	imports: [
+		NgtArgs,
+		Tank,
+		NgtsFloat,
+		Turtle,
+		Spheres,
+		NgtsAccumulativeShadows,
+		NgtsRandomizedLights,
+		NgtsEnvironment,
+		NgtsLightformer,
+		NgtsCameraControls,
+	],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: { class: 'aquarium-soba-experience' },
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class Experience {
+	protected readonly Math = Math;
+	protected lightPositions = [2, 0, 2, 0, 2, 0, 2, 0];
+}

apps/kitchen-sink/src/app/soba/aquarium/model_52a_-_kemps_ridley_sea_turtle_no_id-transformed.glb

@@ -0,0 +1,44 @@
+import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgtArgs } from 'angular-three';
+import { NgtsInstance, NgtsInstances } from 'angular-three-soba/performances';
+import { NgtsFloat } from 'angular-three-soba/staging';
+
+@Component({
+	selector: 'app-spheres',
+	template: `
+		<ngts-instances [options]="{ renderOrder: -1000 }">
+			<ngt-sphere-geometry *args="[1, 64, 64]" />
+			<ngt-mesh-basic-material [depthTest]="false" />
+
+			@for (sphere of spheres; track $index) {
+				@let scale = sphere[0];
+				@let color = sphere[1];
+				@let speed = sphere[2];
+				@let position = sphere[3];
+
+				<ngts-float [options]="{ rotationIntensity: 40, floatIntensity: 20, speed: speed / 2 }">
+					<ngts-instance [options]="{ position, color, scale }" />
+				</ngts-float>
+			}
+		</ngts-instances>
+	`,
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [NgtsInstances, NgtArgs, NgtsFloat, NgtsInstance],
+})
+export class Spheres {
+	protected spheres = [
+		[1, 'orange', 0.05, [-4, -1, -1]],
+		[0.75, 'hotpink', 0.1, [-4, 2, -2]],
+		[1.25, 'aquamarine', 0.2, [4, -3, 2]],
+		[1.5, 'lightblue', 0.3, [-4, -2, -3]],
+		[2, 'pink', 0.3, [-4, 2, -4]],
+		[2, 'skyblue', 0.3, [-4, 2, -4]],
+		[1.5, 'orange', 0.05, [-4, -1, -1]],
+		[2, 'hotpink', 0.1, [-4, 2, -2]],
+		[1.5, 'aquamarine', 0.2, [4, -3, 2]],
+		[1.25, 'lightblue', 0.3, [-4, -2, -3]],
+		[1, 'pink', 0.3, [-4, 2, -4]],
+		[1, 'skyblue', 0.3, [-4, 2, -4]],
+	] as const;
+}