fix(soba): adjust ngtsAnimations

Author: Chau Tran

libs/soba/misc/src/animations/animations.ts

@@ -4,7 +4,7 @@ import * as THREE from 'three';
 
 export function injectNgtsAnimations(
     animationsFactory: () => THREE.AnimationClip[],
-    { ref, injector }: { ref?: NgtInjectedRef<THREE.Object3D> | THREE.Object3D; injector?: Injector }
+    { ref, injector }: { ref?: NgtInjectedRef<THREE.Object3D> | THREE.Object3D; injector?: Injector } = {}
 ) {
     injector = assertInjectionContext(injectNgtsAnimations, injector);
     return runInInjectionContext(injector, () => {
@@ -38,32 +38,28 @@ export function injectNgtsAnimations(
 
         injectBeforeRender(({ delta }) => mixer.update(delta));
 
-        requestAnimationFrame(() => {
-            effect(
-                () => {
-                    const actual = actualRef.nativeElement;
-                    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) {
-                            actions[clip.name].play();
-                        }
-                    }
-                },
-                { injector }
-            );
+                if (i === 0) {
+                    actions[clip.name].play();
+                }
+            }
         });
 
         return { ref: actualRef, actions, mixer, names, clips };

libs/soba/src/abstractions/gizmo-helper.stories.ts

@@ -10,6 +10,7 @@ import {
 } from 'angular-three-soba/abstractions';
 import { NgtsOrbitControls } from 'angular-three-soba/controls';
 import { injectNgtsGLTFLoader } from 'angular-three-soba/loaders';
+import { injectNgtsAnimations } from 'angular-three-soba/misc';
 import { makeStoryObject, StorybookSetup } from '../setup-canvas';
 
 const alignment = [
@@ -49,7 +50,7 @@ const args = {
 @Component({
     standalone: true,
     template: `
-        <ngt-primitive *args="[model()]" [scale]="0.01" />
+        <ngt-primitive *args="[model()]" [scale]="0.01" [ref]="animations.ref" />
         <ngts-gizmo-helper [alignment]="alignment" [margin]="[marginX, marginY]">
             <ng-template ngtsGizmoHelperContent>
                 <ngts-gizmo-viewcube
@@ -85,11 +86,10 @@ const args = {
 })
 class DefaultGizmoHelperStory {
     readonly #gltf = injectNgtsGLTFLoader(() => 'soba/assets/LittlestTokyo.glb');
-    readonly model = computed(() => {
-        const gltf = this.#gltf();
-        if (!gltf) return null;
-        return gltf.scene;
-    });
+
+    readonly model = computed(() => this.#gltf()?.scene || null);
+    readonly animations = injectNgtsAnimations(() => this.#gltf()?.animations || []);
+
     @Input() alignment = args.alignment;
     @Input() marginX = args.marginX;
     @Input() marginY = args.marginY;