feat(soba): use CameraShake from pmndrs vanilla

Author: nartc

libs/soba/staging/src/lib/camera-shake.ts

@@ -1,8 +1,8 @@
-import { Directive, effect, input, untracked } from '@angular/core';
+import { computed, Directive, effect, input } from '@angular/core';
 import { beforeRender, injectStore } from 'angular-three';
+import { CameraShake } from 'angular-three-soba/vanilla-exports';
 import { mergeInputs } from 'ngxtension/inject-inputs';
 import * as THREE from 'three';
-import { SimplexNoise } from 'three-stdlib';
 
 interface ControlsProto {
 	update(): void;
@@ -11,19 +11,7 @@ interface ControlsProto {
 	removeEventListener: (event: string, callback: (event: any) => void) => void;
 }
 
-export interface NgtsCameraShakeOptions {
-	intensity: number;
-	decay?: boolean;
-	decayRate: number;
-	maxYaw: number;
-	maxPitch: number;
-	maxRoll: number;
-	yawFrequency: number;
-	pitchFrequency: number;
-	rollFrequency: number;
-}
-
-const defaultOptions: NgtsCameraShakeOptions = {
+const defaultOptions: Partial<Omit<CameraShake, 'object' | 'initialRotation' | 'updateInitialRotation' | 'update'>> = {
 	intensity: 1,
 	decayRate: 0.65,
 	maxYaw: 0.1,
@@ -34,59 +22,38 @@ const defaultOptions: NgtsCameraShakeOptions = {
 	rollFrequency: 0.1,
 };
 
-@Directive({ selector: 'ngts-camera-shake' })
+@Directive({
+	selector: 'ngts-camera-shake',
+	exportAs: 'cameraShake',
+})
 export class NgtsCameraShake {
 	options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
 
 	private store = injectStore();
 
-	private initialRotation = this.store.snapshot.camera.rotation.clone();
-	private intensityOption = untracked(this.options).intensity;
-
-	get intensity() {
-		return this.intensityOption;
-	}
-
-	set intensity(val: number) {
-		this.intensityOption = Math.min(1, Math.max(0, val));
-	}
-
-	private yawNoise = new SimplexNoise();
-	private pitchNoise = new SimplexNoise();
-	private rollNoise = new SimplexNoise();
+	cameraShaker = computed(() => new CameraShake(this.store.camera()));
 
 	constructor() {
 		effect((onCleanup) => {
 			const defaultControls = this.store.controls() as unknown as ControlsProto;
 			if (!defaultControls) return;
-			const camera = this.store.camera();
 
-			const callback = () => void (this.initialRotation = camera.rotation.clone());
+			const cameraShaker = this.cameraShaker();
+			const callback = () => void cameraShaker.updateInitialRotation();
+
 			defaultControls.addEventListener('change', callback);
 			callback();
 
 			onCleanup(() => void defaultControls.removeEventListener('change', callback));
 		});
 
-		beforeRender(({ delta, clock }) => {
-			const [
-				{ maxYaw, yawFrequency, maxPitch, pitchFrequency, maxRoll, rollFrequency, decay, decayRate },
-				camera,
-			] = [this.options(), this.store.snapshot.camera];
-			const shake = Math.pow(this.intensity, 2);
-			const yaw = maxYaw * shake * this.yawNoise.noise(clock.elapsedTime * yawFrequency, 1);
-			const pitch = maxPitch * shake * this.pitchNoise.noise(clock.elapsedTime * pitchFrequency, 1);
-			const roll = maxRoll * shake * this.rollNoise.noise(clock.elapsedTime * rollFrequency, 1);
-
-			camera.rotation.set(
-				this.initialRotation.x + pitch,
-				this.initialRotation.y + yaw,
-				this.initialRotation.z + roll,
-			);
+		effect(() => {
+			Object.assign(this.cameraShaker(), this.options());
+		});
 
-			if (decay && this.intensity > 0) {
-				this.intensity -= decayRate * delta;
-			}
+		beforeRender(({ delta, clock }) => {
+			const cameraShaker = this.cameraShaker();
+			cameraShaker.update(delta, clock.elapsedTime);
 		});
 	}
 }

libs/soba/vanilla-exports/src/index.ts

@@ -1,6 +1,7 @@
 import { Type } from '@angular/core';
 import {
 	BlurPass,
+	CameraShake,
 	CausticsMaterial,
 	CausticsProjectionMaterial,
 	CausticsProjectionMaterialType,
@@ -53,6 +54,7 @@ declare global {
 
 export {
 	BlurPass,
+	CameraShake,
 	CausticsMaterial,
 	CausticsProjectionMaterial,
 	CausticsProjectionMaterialType,