matcap and animations

Author: nartc

libs/soba/.storybook/public/soba/suzanne.glb

@@ -29,6 +29,8 @@ function _extensions(useDraco: boolean | string, useMeshOpt: boolean, extensions
 	};
 }
 
+export type NgtsGLTF<T extends Partial<NgtObjectMap>> = GLTF & NgtObjectMap & T;
+
 export function injectNgtsGLTFLoader<TUrl extends string | string[] | Record<string, string>>(
 	path: () => TUrl,
 	{

libs/soba/.storybook/public/soba/suzanne/Suzanne_1_pbr_diffuse.png

@@ -1,4 +1,4 @@
-import { DestroyRef, Injector, effect, inject, runInInjectionContext } from '@angular/core';
+import { DestroyRef, Injector, effect, inject, runInInjectionContext, signal, untracked } from '@angular/core';
 import { assertInjectionContext, injectBeforeRender, injectNgtRef, type NgtInjectedRef } from 'angular-three';
 import * as THREE from 'three';
 
@@ -23,6 +23,7 @@ export function injectNgtsAnimations(
 		}
 
 		const mixer = new THREE.AnimationMixer(null!);
+		const ready = signal(false);
 		const actions = {} as Record<string, THREE.AnimationAction>;
 		let cached = {} as Record<string, THREE.AnimationAction>;
 
@@ -42,30 +43,37 @@ export function injectNgtsAnimations(
 
 		injectBeforeRender(({ delta }) => mixer.update(delta));
 
-		effect(() => {
-			const actual = actualRef.nativeElement;
-			if (!actual) return;
-			const animations = animationsFactory();
+		effect(
+			() => {
+				const actual = actualRef.nativeElement;
+				if (!actual) return;
+				const animations = animationsFactory();
 
-			for (let i = 0; i < animations.length; i++) {
-				const clip = animations[i];
+				for (let i = 0; i < animations.length; i++) {
+					const clip = animations[i];
 
-				names.push(clip.name);
-				clips.push(clip);
+					names.push(clip.name);
+					clips.push(clip);
 
-				Object.defineProperty(actions, clip.name, {
-					enumerable: true,
-					get: () => {
-						return cached[clip.name] || (cached[clip.name] = mixer.clipAction(clip, actual));
-					},
-				});
+					Object.defineProperty(actions, clip.name, {
+						enumerable: true,
+						get: () => {
+							return cached[clip.name] || (cached[clip.name] = mixer.clipAction(clip, actual));
+						},
+					});
 
-				if (i === 0 && playFirstClip) {
-					actions[clip.name].play();
+					if (i === 0 && playFirstClip) {
+						actions[clip.name].play();
+					}
 				}
-			}
-		});
 
-		return { ref: actualRef, actions, mixer, names, clips };
+				if (!untracked(ready)) {
+					ready.set(true);
+				}
+			},
+			{ allowSignalWrites: true },
+		);
+
+		return { ref: actualRef, actions, mixer, names, clips, ready };
 	});
 }

libs/soba/.storybook/public/soba/suzanne/Suzanne_1_pbr_metalness.png

@@ -1,10 +1,10 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
-import { Meta, moduleMetadata } from '@storybook/angular';
+import { Meta } from '@storybook/angular';
 import { NgtArgs } from 'angular-three';
 import { NgtsBillboard, NgtsText } from 'angular-three-soba/abstractions';
 import { NgtsOrbitControls } from 'angular-three-soba/controls';
 import { BoxGeometry, ConeGeometry, PlaneGeometry } from 'three';
-import { makeStoryObject, StorybookSetup } from '../setup-canvas';
+import { makeDecorators, makeStoryObject } from '../setup-canvas';
 
 @Component({
 	selector: 'BillboardCone',
@@ -135,7 +135,7 @@ class DefaultBillboardStory {
 
 export default {
 	title: 'Abstractions/Billboard',
-	decorators: [moduleMetadata({ imports: [StorybookSetup] })],
+	decorators: makeDecorators(),
 } as Meta;
 
 const canvasOptions = { camera: { position: [0, 0, 10] }, controls: false };