docs: add webgl animation keyframes

Author: nartc

apps/demo/src/app/animation-keyframes/animation-keyframes.component.ts

@@ -0,0 +1,64 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, inject } from '@angular/core';
+import { injectBeforeRender, injectNgtLoader, NgtArgs, NgtCanvas, NgtPush, NgtStore } from 'angular-three';
+import { map, tap } from 'rxjs';
+import * as THREE from 'three';
+import { DRACOLoader, GLTFLoader, RoomEnvironment } from 'three-stdlib';
+import Stats from 'three/examples/jsm/libs/stats.module.js';
+import { DemoOrbitControls } from '../ui-orbit-controls/orbit-controls.component';
+
+@Component({
+    standalone: true,
+    template: `
+        <ngt-color *args="['#bfe3dd']" attach="background" />
+        <ngt-value [rawValue]="texture" attach="environment" />
+
+        <ngt-primitive *args="[model$ | ngtPush : null]" [position]="[1, 1, 0]" [scale]="0.01" />
+
+        <demo-orbit-controls [target]="[0, 0.5, 0]" [enablePan]="false" />
+    `,
+    imports: [NgtArgs, NgtPush, DemoOrbitControls],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class Scene {
+    private readonly gl = inject(NgtStore).get('gl');
+    private readonly pmremGenerator = new THREE.PMREMGenerator(this.gl);
+
+    readonly texture = this.pmremGenerator.fromScene(new RoomEnvironment(), 0.04).texture;
+
+    private readonly stats = Stats();
+
+    private mixer?: THREE.AnimationMixer;
+    readonly model$ = injectNgtLoader(
+        () => GLTFLoader,
+        'assets/LittlestTokyo.glb',
+        (loader) => {
+            const dracoLoader = new DRACOLoader();
+            dracoLoader.setDecoderPath('assets/draco/');
+            (loader as GLTFLoader).setDRACOLoader(dracoLoader);
+        }
+    ).pipe(
+        tap((model) => {
+            const scene = model.scene;
+            this.mixer = new THREE.AnimationMixer(scene);
+            this.mixer.clipAction(model.animations[0]).play();
+        }),
+        map((model) => model.scene)
+    );
+
+    constructor() {
+        injectBeforeRender(({ delta }) => {
+            this.mixer?.update(delta);
+            this.stats.update();
+        });
+        this.gl.domElement.parentElement?.appendChild(this.stats.dom);
+    }
+}
+
+@Component({
+    standalone: true,
+    template: ` <ngt-canvas [sceneGraph]="SceneGraph" [camera]="{ fov: 40, far: 100, position: [5, 2, 8] }" /> `,
+    imports: [NgtCanvas],
+})
+export default class DemoAnimationKeyframes {
+    readonly SceneGraph = Scene;
+}

apps/demo/src/app/app.routes.ts

@@ -30,4 +30,13 @@ export const routes: Routes = [
             asset: 'assets/demo/vertex-colors-instances',
         },
     },
+    {
+        path: 'animation-keyframes',
+        loadComponent: () => import('./animation-keyframes/animation-keyframes.component'),
+        data: {
+            description: 'Three.js WebGL animation with keyframes',
+            link: '/animation-keyframes',
+            asset: 'assets/demo/animation-keyframes',
+        },
+    },
 ];

apps/demo/src/app/cubes/cubes.component.ts

@@ -1,6 +1,7 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, inject, Input, ViewChild } from '@angular/core';
 import { injectBeforeRender, NgtArgs, NgtCanvas, NgtStore } from 'angular-three';
 import * as THREE from 'three';
+import { DemoOrbitControls } from '../ui-orbit-controls/orbit-controls.component';
 
 @Component({
     selector: 'demo-cube',
@@ -53,13 +54,9 @@ export class Cube {
         <demo-cube [position]="[1.5, 0, 0]" />
         <demo-cube [position]="[-1.5, 0, 0]" />
 
-        <ngt-orbit-controls
-            *args="[camera, glDom]"
-            [enableDamping]="true"
-            (beforeRender)="$any($event).object.update()"
-        />
+        <demo-orbit-controls />
     `,
-    imports: [NgtArgs, Cube],
+    imports: [NgtArgs, Cube, DemoOrbitControls],
     schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class Scene {

apps/demo/src/app/ui-orbit-controls/orbit-controls.component.ts

@@ -0,0 +1,28 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, Input } from '@angular/core';
+import { NgtArgs, NgtStore } from 'angular-three';
+
+@Component({
+    selector: 'demo-orbit-controls',
+    standalone: true,
+    template: `
+        <ngt-orbit-controls
+            *args="[camera, glDom]"
+            [enableDamping]="true"
+            [enablePan]="enablePan"
+            [autoRotate]="autoRotate"
+            [target]="target"
+            (beforeRender)="$any($event).object.update()"
+        />
+    `,
+    imports: [NgtArgs],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class DemoOrbitControls {
+    private readonly store = inject(NgtStore);
+    readonly camera = this.store.get('camera');
+    readonly glDom = this.store.get('gl', 'domElement');
+
+    @Input() enablePan = true;
+    @Input() autoRotate = false;
+    @Input() target = [0, 0, 0];
+}

apps/demo/src/app/vertex-colors-instance/vertex-colors-instance.component.ts

@@ -3,6 +3,7 @@ import { NgtArgs, NgtCanvas, NgtStore } from 'angular-three';
 // @ts-expect-error no type def for nice-color-palettes
 import niceColors from 'nice-color-palettes';
 import * as THREE from 'three';
+import { DemoOrbitControls } from '../ui-orbit-controls/orbit-controls.component';
 const niceColor = niceColors[Math.floor(Math.random() * niceColors.length)];
 
 @Component({
@@ -53,14 +54,9 @@ export class ColorsInstances {
         <ngt-ambient-light />
         <ngt-directional-light [intensity]="0.55" [position]="150" />
         <demo-colors-instances />
-        <ngt-orbit-controls
-            *args="[camera, glDom]"
-            [enableDamping]="true"
-            [autoRotate]="true"
-            (beforeRender)="$any($event).object.update()"
-        />
+        <demo-orbit-controls [autoRotate]="true" />
     `,
-    imports: [NgtArgs, ColorsInstances],
+    imports: [NgtArgs, ColorsInstances, DemoOrbitControls],
     schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class Scene {

apps/demo/src/app/view-cube/view-cube.component.ts

@@ -12,6 +12,7 @@ import {
     prepare,
 } from 'angular-three';
 import * as THREE from 'three';
+import { DemoOrbitControls } from '../ui-orbit-controls/orbit-controls.component';
 
 @Component({
     selector: 'view-cube',
@@ -80,14 +81,10 @@ export class ViewCube extends NgtRxStore {
             <ngt-torus-geometry *args="[1, 0.5, 32, 100]" />
             <ngt-mesh-normal-material />
         </ngt-mesh>
-        <ngt-orbit-controls
-            *args="[camera, glDom]"
-            [enableDamping]="true"
-            (beforeRender)="$any($event).object.update()"
-        />
+        <demo-orbit-controls />
         <view-cube />
     `,
-    imports: [ViewCube, NgtArgs],
+    imports: [ViewCube, NgtArgs, DemoOrbitControls],
     schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class Scene {