add new story for scroll controls

Author: nartc

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

@@ -3,5 +3,9 @@ import { provideRouter } from '@angular/router';
 import { appRoutes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
-	providers: [provideExperimentalZonelessChangeDetection(), provideRouter(appRoutes)],
+	providers: [
+		provideExperimentalZonelessChangeDetection(),
+		// provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
+		provideRouter(appRoutes),
+	],
 };

libs/soba/.storybook/public/LittlestTokyo-transformed.glb

@@ -1,14 +1,108 @@
-import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, input, signal, Signal } from '@angular/core';
+import {
+	ChangeDetectionStrategy,
+	Component,
+	computed,
+	CUSTOM_ELEMENTS_SCHEMA,
+	inject,
+	input,
+	signal,
+	Signal,
+} from '@angular/core';
 import { Meta } from '@storybook/angular';
-import { injectStore, NgtHTML } from 'angular-three';
+import { injectBeforeRender, injectStore, NgtArgs, NgtHTML } from 'angular-three';
 import {
 	NgtsScrollCanvas,
 	NgtsScrollControls,
 	NgtsScrollControlsOptions,
 	NgtsScrollHtml,
 } from 'angular-three-soba/controls';
 import { injectGLTF } from 'angular-three-soba/loaders';
-import { makeDecorators, makeStoryObject } from '../setup-canvas';
+import { injectAnimations } from 'angular-three-soba/misc';
+import { NgtsSky } from 'angular-three-soba/staging';
+import { MathUtils, Mesh } from 'three';
+import { makeDecorators, makeStoryFunction, makeStoryObject } from '../setup-canvas';
+
+@Component({
+	selector: 'scroll-littlest-tokyo',
+	standalone: true,
+	template: `
+		<ngt-primitive *args="[scene()]" [parameters]="{ position: [0, 2.5, 0], scale: 0.02 }" />
+	`,
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+	imports: [NgtArgs],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+})
+class LittlestTokyo {
+	private gltf = injectGLTF(() => './LittlestTokyo-transformed.glb');
+	scene = computed(() => {
+		const gltf = this.gltf();
+		if (!gltf) return null;
+
+		const scene = gltf.scene;
+
+		scene.traverse((node) => {
+			if ((node as Mesh).isMesh) {
+				node.receiveShadow = node.castShadow = true;
+			}
+		});
+
+		return scene;
+	});
+
+	constructor() {
+		const scrollControls = inject(NgtsScrollControls);
+		const animations = injectAnimations(this.gltf, this.scene);
+
+		injectBeforeRender(({ delta, camera }) => {
+			const action = animations.actions['Take 001'];
+			if (!action) return;
+
+			if (!action.paused) {
+				action.play().paused = true;
+			}
+
+			const offset = 1 - scrollControls.offset;
+			action.time = MathUtils.damp(action.time, (action.getClip().duration / 2) * offset, 100, delta);
+			camera.position.set(
+				Math.sin(offset) * -10,
+				Math.atan(offset * Math.PI * 2) * 5,
+				Math.cos((offset * Math.PI) / 3) * -10,
+			);
+			camera.lookAt(0, 0, 0);
+		});
+	}
+}
+
+@Component({
+	standalone: true,
+	template: `
+		<ngt-fog *args="['#ff5020', 5, 18]" attach="fog" />
+		<ngt-ambient-light [intensity]="0.03" />
+		<ngt-spot-light
+			[angle]="0.14"
+			color="#ffd0d0"
+			[penumbra]="1"
+			[position]="[25, 50, -20]"
+			[castShadow]="true"
+			[intensity]="Math.PI"
+			[decay]="0"
+		>
+			<ngt-value [rawValue]="-0.0001" attach="shadow.bias" />
+			<ngt-vector2 *args="[2048, 2048]" attach="shadow.mapSize" />
+		</ngt-spot-light>
+		<ngts-sky [options]="{ scale: 1000, sunPosition: [2, 0.4, 10] }" />
+
+		<ngts-scroll-controls [options]="{ pages: 3 }">
+			<scroll-littlest-tokyo />
+		</ngts-scroll-controls>
+	`,
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+	imports: [NgtArgs, NgtsSky, NgtsScrollControls, LittlestTokyo],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+})
+class LittlestTokyoStory {
+	protected readonly Math = Math;
+}
 
 @Component({
 	selector: 'scroll-suzanne',
@@ -152,3 +246,9 @@ export const InsideAContainer = makeStoryObject(DefaultScrollControlsStory, {
 		},
 	},
 });
+
+export const Model = makeStoryFunction(LittlestTokyoStory, {
+	camera: { position: [0, 0, 10] },
+	lights: false,
+	controls: false,
+});