docs: use elapsedTime; fix skydiver animation

Author: nartc

apps/examples/src/app/cannon/kinematic-cube/scene.ts

@@ -61,7 +61,7 @@ export class Box {
 		injectBeforeRender(({ clock }) => {
 			const api = boxApi();
 			if (!api) return;
-			const t = clock.getElapsedTime();
+			const t = clock.elapsedTime;
 			api.position.set(Math.sin(t * 2) * 5, Math.cos(t * 2) * 5, 3);
 			api.rotation.set(Math.sin(t * 6), Math.cos(t * 6), 0);
 		});
@@ -71,12 +71,7 @@ export class Box {
 @Component({
 	selector: 'app-instanced-spheres',
 	template: `
-		<ngt-instanced-mesh
-			#instancedMesh
-			castShadow
-			receiveShadow
-			*args="[undefined, undefined, count()]"
-		>
+		<ngt-instanced-mesh #instancedMesh castShadow receiveShadow *args="[undefined, undefined, count()]">
 			<ngt-sphere-geometry *args="[1, 16, 16]">
 				<ngt-instanced-buffer-attribute attach="attributes.color" *args="[colors(), 3]" />
 			</ngt-sphere-geometry>

apps/examples/src/app/cannon/monday-morning/scene.ts

@@ -241,8 +241,8 @@ export class RagDoll {
 		injectBeforeRender(({ clock }) => {
 			const [eyes, mouth] = [this.eyes(), this.mouth()];
 			if (eyes && mouth) {
-				eyes.nativeElement.position.y = Math.sin(clock.getElapsedTime() * 1) * 0.06;
-				mouth.meshRef().nativeElement.scale.y = (1 + Math.sin(clock.getElapsedTime())) * 0.6;
+				eyes.nativeElement.position.y = Math.sin(clock.elapsedTime * 1) * 0.06;
+				mouth.meshRef().nativeElement.scale.y = (1 + Math.sin(clock.elapsedTime)) * 0.6;
 			}
 		});
 	}

apps/examples/src/app/rapier/wrapper-default.ts

@@ -48,7 +48,7 @@ export class Floor {}
 
 				<router-outlet #o="outlet" />
 
-				@if (o.activatedRoute.snapshot.url[0]?.path !== 'basic') {
+				@if (o.activatedRoute.snapshot.url[0].path !== 'basic') {
 					<app-floor />
 				}
 			</ng-template>

apps/examples/src/app/soba/instanced-vertex-colors/scene.ts

@@ -55,7 +55,7 @@ export class Boxes {
 			const instanced = this.meshRef()?.nativeElement;
 			if (!instanced) return;
 
-			const time = clock.getElapsedTime();
+			const time = clock.elapsedTime;
 			instanced.rotation.x = Math.sin(time / 4);
 			instanced.rotation.y = Math.sin(time / 2);
 

apps/examples/src/app/soba/skydiving/skydiver.ts

@@ -8,11 +8,11 @@ import {
 } from '@angular/core';
 import { injectBeforeRender, NgtArgs } from 'angular-three';
 import { injectGLTF, injectTexture } from 'angular-three-soba/loaders';
-import { injectAnimations } from 'angular-three-soba/misc';
+import { injectAnimations, NgtsAnimationClips } from 'angular-three-soba/misc';
 import {
-	Bone,
 	BufferGeometry,
 	DoubleSide,
+	Group,
 	Mesh,
 	MeshStandardMaterial,
 	ShaderMaterial,
@@ -27,35 +27,36 @@ type SkydiverGLTF = GLTF & {
 		mixamorigHips: Mesh;
 	};
 	materials: {};
+	animations: NgtsAnimationClips<'animation_0'>;
 };
 
 @Component({
 	selector: 'app-skydiver',
 	template: `
 		<ngt-group [dispose]="null">
 			@if (gltf(); as gltf) {
-				<ngt-group>
+				<ngt-group #group>
 					<ngt-primitive #bone *args="[gltf.nodes.mixamorigHips]" />
 					<ngt-skinned-mesh
 						[geometry]="gltf.nodes.skydiver_2.geometry"
 						[skeleton]="gltf.nodes.skydiver_2.skeleton"
 					>
-						@if (textures(); as textures) {
-							<ngt-mesh-standard-material
-								[parameters]="{
-									uniforms: { uTime: { value: 0 }, uClothes: { value: textures.clothes } },
-									onBeforeCompile,
-									toneMapped: false,
-									envMapIntensity: 0.8,
-									metalnessMap: textures.metallic,
-									normalMap: textures.normal,
-									roughnessMap: textures.roughness,
-									map: textures.baseColor,
-									normalScale: [-0.2, 0.2],
-									side: DoubleSide,
-								}"
-							/>
-						}
+						@let metallic = textures()?.metallic;
+						@let normal = textures()?.normal;
+						@let roughness = textures()?.roughness;
+						@let baseColor = textures()?.baseColor;
+
+						<ngt-mesh-standard-material
+							[toneMapped]="false"
+							[envMapIntensity]="0.8"
+							[metalnessMap]="metallic"
+							[normalMap]="normal"
+							[roughnessMap]="roughness"
+							[map]="baseColor"
+							[normalScale]="[-0.2, 0.2]"
+							[side]="DoubleSide"
+							[parameters]="{ onBeforeCompile }"
+						/>
 					</ngt-skinned-mesh>
 				</ngt-group>
 			}
@@ -87,14 +88,15 @@ export class Skydiver {
 		},
 	);
 
-	private boneRef = viewChild<ElementRef<Bone>>('bone');
-	private animations = injectAnimations(this.gltf, this.boneRef);
+	private groupRef = viewChild<ElementRef<Group>>('group');
+	private animations = injectAnimations(this.gltf, this.groupRef);
 
 	protected onBeforeCompile: MeshStandardMaterial['onBeforeCompile'] = (shader) => {
 		const gltf = this.gltf();
+		if (!gltf) return;
 
 		Object.assign(shader.uniforms, {
-			...(gltf?.nodes['skydiver_2'].material?.uniforms || {}),
+			...gltf.nodes['skydiver_2'].material.uniforms,
 		});
 
 		shader.vertexShader = /* language=glsl glsl */ `
@@ -116,17 +118,30 @@ export class Skydiver {
 	};
 
 	constructor() {
+		effect(() => {
+			const gltf = this.gltf();
+			if (!gltf) return;
+
+			const textures = this.textures();
+			if (!textures) return;
+
+			gltf.nodes['skydiver_2'].material.uniforms = {
+				uTime: { value: 0 },
+				uClothes: { value: textures.clothes },
+			};
+		});
+
 		effect((onCleanup) => {
 			if (!this.animations.isReady) return;
 			const { actions } = this.animations;
-			actions['animation_0']?.reset().play();
-			onCleanup(() => actions['animation_0']?.stop());
+			actions['animation_0'].reset().play();
+			onCleanup(() => actions['animation_0'].stop());
 		});
 
 		injectBeforeRender(({ clock }) => {
 			const skydiver = this.gltf()?.nodes['skydiver_2'];
 			if (skydiver?.material.uniforms?.['uTime']) {
-				skydiver.material.uniforms['uTime'].value = clock.getElapsedTime();
+				skydiver.material.uniforms['uTime'].value = clock.elapsedTime;
 			}
 		});
 	}

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

@@ -29,7 +29,7 @@ class CameraHelperStory {
 		injectBeforeRender(({ clock }) => {
 			const camera = this.perspectiveCamera().cameraRef().nativeElement;
 
-			const t = clock.getElapsedTime();
+			const t = clock.elapsedTime;
 
 			camera.lookAt(0, 0, 0);
 			camera.position.x = Math.sin(t) * 4;

libs/soba/src/materials/custom-shader-material.stories.ts

@@ -84,7 +84,7 @@ class DefaultCustomShaderMaterialStory {
 	constructor() {
 		injectBeforeRender(({ clock }) => {
 			const material = this.materialRef().material();
-			material.uniforms['uTime'].value = clock.getElapsedTime();
+			material.uniforms['uTime'].value = clock.elapsedTime;
 		});
 	}
 }

libs/soba/src/materials/mesh-reflector-material.stories.ts

@@ -88,8 +88,8 @@ class MeshReflectorMaterialStory {
 
 		injectBeforeRender(({ clock }) => {
 			const mesh = this.mesh().nativeElement;
-			mesh.position.y += Math.sin(clock.getElapsedTime()) / 25;
-			mesh.rotation.y = clock.getElapsedTime() / 2;
+			mesh.position.y += Math.sin(clock.elapsedTime) / 25;
+			mesh.rotation.y = clock.elapsedTime / 2;
 		});
 	}
 }

libs/soba/src/performances/instances.stories.ts

@@ -80,7 +80,7 @@ class Shoe {
 
 		injectBeforeRender(({ clock }) => {
 			const instance = this.instance().positionMeshRef().nativeElement;
-			const t = clock.getElapsedTime() + this.random() * 10000;
+			const t = clock.elapsedTime + this.random() * 10000;
 
 			instance.rotation.set(Math.cos(t / 4) / 2, Math.sin(t / 4) / 2, Math.cos(t / 1.5) / 2);
 			instance.position.y = Math.sin(t / 1.5) / 2;

libs/soba/src/performances/points.stories.ts

@@ -153,7 +153,7 @@ class BasicPointsBufferStory {
 
 	constructor() {
 		injectBeforeRender(({ clock }) => {
-			const elapsedTime = clock.getElapsedTime();
+			const elapsedTime = clock.elapsedTime;
 			const t = misc.remap(Math.sin(elapsedTime), [-1, 1], [0, 1]);
 
 			buffer.rotate(this.color, { q: q.setFromAxisAngle(rotationAxis, t * 0.01) });

libs/soba/src/staging/contact-shadows.stories.ts

@@ -47,7 +47,7 @@ class ContactShadowsStory {
 
 	constructor() {
 		injectBeforeRender(({ clock }) => {
-			this.sphere().nativeElement.position.y = Math.sin(clock.getElapsedTime()) + 2;
+			this.sphere().nativeElement.position.y = Math.sin(clock.elapsedTime) + 2;
 		});
 	}
 }