refactor(soba): adjust misc with new renderer

Author: nartc

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

@@ -1,27 +1,35 @@
-import { computed, effect, ElementRef, Injector, isSignal, Signal, signal, untracked } from '@angular/core';
+import { computed, effect, ElementRef, Injector, isSignal, signal, untracked } from '@angular/core';
 import { injectBeforeRender, resolveRef } from 'angular-three';
 import { assertInjector } from 'ngxtension/assert-injector';
-import { AnimationAction, AnimationClip, AnimationMixer, Object3D } from 'three';
+import * as THREE from 'three';
 
 /**
  * name: any to allow consumers to pass in type-safe animation clips
  */
-type NgtsAnimationClipWithoutName = Omit<AnimationClip, 'name'> & { name: any };
+type NgtsAnimationClipWithoutName = Omit<THREE.AnimationClip, 'name'> & { name: any };
 export type NgtsAnimationClip = Omit<NgtsAnimationClipWithoutName, 'clone'> & { clone: () => NgtsAnimationClip };
 export type NgtsAnimationClips<TAnimationNames extends string> = {
 	[Name in TAnimationNames]: Omit<NgtsAnimationClip, 'name'> & { name: Name };
 }[TAnimationNames];
 export type NgtsAnimationApi<T extends NgtsAnimationClip> = {
-	/**
-	 * Whether or not the animations finishes initialized
-	 *
-	 * @deprecated 3.5.0 - use `isReady` getter for better type-narrow instead. Will be removed in 4.0.0
-	 */
-	ready: Signal<boolean>;
 	clips: T[];
-	mixer: AnimationMixer;
+	mixer: THREE.AnimationMixer;
 	names: T['name'][];
-} & ({ get isReady(): true; actions: { [key in T['name']]: AnimationAction } } | { get isReady(): false });
+} & (
+	| {
+			/**
+			 * Whether or not the animations finishes initialized
+			 */
+			get isReady(): true;
+			actions: { [key in T['name']]: THREE.AnimationAction };
+	  }
+	| {
+			/**
+			 * Whether or not the animations finishes initialized
+			 */
+			get isReady(): false;
+	  }
+);
 
 export type NgtsAnimation<TAnimation extends NgtsAnimationClip = NgtsAnimationClip> =
 	| TAnimation[]
@@ -32,18 +40,21 @@ export type NgtsAnimation<TAnimation extends NgtsAnimationClip = NgtsAnimationCl
  */
 export function injectAnimations<TAnimation extends NgtsAnimationClip>(
 	animations: () => NgtsAnimation<TAnimation> | undefined | null,
-	object: ElementRef<Object3D> | Object3D | (() => ElementRef<Object3D> | Object3D | undefined | null),
+	object:
+		| ElementRef<THREE.Object3D>
+		| THREE.Object3D
+		| (() => ElementRef<THREE.Object3D> | THREE.Object3D | undefined | null),
 	{ injector }: { injector?: Injector } = {},
 ): NgtsAnimationApi<TAnimation> {
 	return assertInjector(injectAnimations, injector, () => {
-		const mixer = new AnimationMixer(null!);
+		const mixer = new THREE.AnimationMixer(null!);
 		injectBeforeRender(({ delta }) => {
 			if (!mixer.getRoot()) return;
 			mixer.update(delta);
 		});
 
-		let cached = {} as Record<string, AnimationAction>;
-		const actions = {} as { [key in TAnimation['name']]: AnimationAction };
+		let cached = {} as Record<string, THREE.AnimationAction>;
+		const actions = {} as { [key in TAnimation['name']]: THREE.AnimationAction };
 		const clips = [] as NgtsAnimationApi<TAnimation>['clips'];
 		const names = [] as NgtsAnimationApi<TAnimation>['names'];
 
@@ -58,8 +69,9 @@ export function injectAnimations<TAnimation extends NgtsAnimationClip>(
 		const ready = signal(false);
 
 		effect((onCleanup) => {
-			const obj = actualObject() as Object3D | undefined;
+			const obj = actualObject() as THREE.Object3D | undefined;
 			if (!obj) return;
+
 			Object.assign(mixer, { _root: obj });
 
 			const maybeAnimationClips = animations();
@@ -98,7 +110,7 @@ export function injectAnimations<TAnimation extends NgtsAnimationClip>(
 				mixer.stopAllAction();
 				// uncache actions
 				Object.values(actions).forEach((action) => {
-					mixer.uncacheAction(action as AnimationClip, obj);
+					mixer.uncacheAction(action as THREE.AnimationClip, obj);
 				});
 			});
 		});

libs/soba/misc/src/lib/bake-shadows.ts

@@ -5,13 +5,12 @@ import { injectStore } from 'angular-three';
 export class NgtsBakeShadows {
 	constructor() {
 		const store = injectStore();
-		const gl = store.select('gl');
 		effect((onCleanup) => {
-			const _gl = gl();
-			_gl.shadowMap.autoUpdate = false;
-			_gl.shadowMap.needsUpdate = true;
+			const gl = store.gl();
+			gl.shadowMap.autoUpdate = false;
+			gl.shadowMap.needsUpdate = true;
 			onCleanup(() => {
-				_gl.shadowMap.autoUpdate = _gl.shadowMap.needsUpdate = true;
+				gl.shadowMap.autoUpdate = gl.shadowMap.needsUpdate = true;
 			});
 		});
 	}

libs/soba/misc/src/lib/computed-attribute.ts

@@ -7,8 +7,8 @@ import {
 	input,
 	viewChild,
 } from '@angular/core';
-import { NgtArgs, NgtBufferAttribute, getLocalState } from 'angular-three';
-import { BufferAttribute, BufferGeometry } from 'three';
+import { NgtArgs, NgtThreeElements, getInstanceState } from 'angular-three';
+import * as THREE from 'three';
 
 @Component({
 	selector: 'ngts-computed-attribute',
@@ -27,22 +27,22 @@ import { BufferAttribute, BufferGeometry } from 'three';
  * and attaches the attribute to the geometry.
  */
 export class NgtsComputedAttribute {
-	compute = input.required<(geometry: BufferGeometry) => BufferAttribute>();
+	compute = input.required<(geometry: THREE.BufferGeometry) => THREE.BufferAttribute>();
 	name = input.required<string>();
-	options = input({} as Partial<NgtBufferAttribute>);
+	options = input({} as Partial<NgtThreeElements['ngt-buffer-geometry']>);
 
-	bufferAttribute = new BufferAttribute(new Float32Array(0), 1);
-	attributeRef = viewChild<ElementRef<BufferAttribute>>('attribute');
+	protected bufferAttribute = new THREE.BufferAttribute(new Float32Array(0), 1);
+	attributeRef = viewChild<ElementRef<THREE.BufferAttribute>>('attribute');
 
 	constructor() {
 		effect(() => {
 			const bufferAttribute = this.attributeRef()?.nativeElement;
 			if (!bufferAttribute) return;
 
-			const localState = getLocalState(bufferAttribute);
-			if (!localState) return;
+			const instanceState = getInstanceState(bufferAttribute);
+			if (!instanceState) return;
 
-			const geometry = ((bufferAttribute as any).parent as BufferGeometry) ?? localState.parent();
+			const geometry = ((bufferAttribute as any).parent as THREE.BufferGeometry) ?? instanceState.parent();
 
 			const attribute = this.compute()(geometry);
 			bufferAttribute.copy(attribute);

libs/soba/misc/src/lib/decal.ts

@@ -7,16 +7,17 @@ import {
 	input,
 	viewChild,
 } from '@angular/core';
-import { applyProps, extend, getLocalState, NgtMesh, omit, pick, resolveRef } from 'angular-three';
+import { applyProps, extend, getInstanceState, is, NgtThreeElements, omit, pick, resolveRef } from 'angular-three';
 import { mergeInputs } from 'ngxtension/inject-inputs';
-import { AxesHelper, BoxGeometry, Euler, Mesh, MeshNormalMaterial, Object3D, Texture, Vector3 } from 'three';
+import * as THREE from 'three';
+import { AxesHelper, BoxGeometry, Mesh, MeshNormalMaterial } from 'three';
 import { DecalGeometry } from 'three-stdlib';
 
-export interface NgtsDecalOptions extends Partial<NgtMesh> {
+export interface NgtsDecalOptions extends Partial<NgtThreeElements['ngt-mesh']> {
 	polygonOffsetFactor: number;
 	depthTest: boolean;
 	debug: boolean;
-	map?: Texture | null;
+	map?: THREE.Texture | null;
 }
 
 const defaultOptions: NgtsDecalOptions = {
@@ -42,7 +43,7 @@ const defaultOptions: NgtsDecalOptions = {
 			@if (debug()) {
 				<ngt-mesh #helper>
 					<ngt-box-geometry />
-					<ngt-mesh-normal-material [wireframe]="true" />
+					<ngt-mesh-normal-material wireframe />
 					<ngt-axes-helper />
 				</ngt-mesh>
 			}
@@ -52,9 +53,9 @@ const defaultOptions: NgtsDecalOptions = {
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NgtsDecal {
-	mesh = input<ElementRef<Mesh> | Mesh | null>();
+	mesh = input<ElementRef<THREE.Mesh> | THREE.Mesh | null>();
 	options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
-	parameters = omit(this.options, [
+	protected parameters = omit(this.options, [
 		'debug',
 		'map',
 		'depthTest',
@@ -64,8 +65,8 @@ export class NgtsDecal {
 		'rotation',
 	]);
 
-	meshRef = viewChild.required<ElementRef<Mesh>>('mesh');
-	helperRef = viewChild<ElementRef<Mesh>>('helper');
+	meshRef = viewChild.required<ElementRef<THREE.Mesh>>('mesh');
+	private helperRef = viewChild<ElementRef<THREE.Mesh>>('helper');
 
 	protected map = pick(this.options, 'map');
 	protected depthTest = pick(this.options, 'depthTest');
@@ -80,22 +81,22 @@ export class NgtsDecal {
 
 		effect((onCleanup) => {
 			const thisMesh = this.meshRef().nativeElement;
-			const localState = getLocalState(thisMesh);
-			if (!localState) return;
+			const instanceState = getInstanceState(thisMesh);
+			if (!instanceState) return;
 
-			const parent = resolveRef(this.mesh()) || localState.parent();
+			const parent = resolveRef(this.mesh()) || instanceState.parent();
 
-			if (parent && !(parent as Mesh).isMesh) {
+			if (parent && !is.three<THREE.Mesh>(parent, 'isMesh')) {
 				throw new Error('<ngts-decal> must have a Mesh as parent or specify its "mesh" input');
 			}
 
 			if (!parent) return;
 
-			const parentLocalState = getLocalState(parent);
-			if (!parentLocalState) return;
+			const parentInstanceState = getInstanceState(parent);
+			if (!parentInstanceState) return;
 
 			// track parent's children
-			const parentNonObjects = parentLocalState.nonObjects();
+			const parentNonObjects = parentInstanceState.nonObjects();
 			if (!parentNonObjects || !parentNonObjects.length) {
 				return;
 			}
@@ -106,7 +107,7 @@ export class NgtsDecal {
 			}
 
 			const [position, rotation, scale] = [this.position(), this.rotation(), this.scale()];
-			const state = { position: new Vector3(), rotation: new Euler(), scale: new Vector3(1, 1, 1) };
+			const state = { position: new THREE.Vector3(), rotation: new THREE.Euler(), scale: new THREE.Vector3(1, 1, 1) };
 
 			applyProps(state, { position, scale });
 
@@ -115,11 +116,11 @@ export class NgtsDecal {
 			parent.matrixWorld.identity();
 
 			if (!rotation || typeof rotation === 'number') {
-				const o = new Object3D();
-				o.position.copy(state.position);
-				o.lookAt(parent.position);
-				if (typeof rotation === 'number') o.rotateZ(rotation);
-				applyProps(state, { rotation: o.rotation });
+				const obj = new THREE.Object3D();
+				obj.position.copy(state.position);
+				obj.lookAt(parent.position);
+				if (typeof rotation === 'number') obj.rotateZ(rotation);
+				applyProps(state, { rotation: obj.rotation });
 			} else {
 				applyProps(state, { rotation });
 			}

libs/soba/misc/src/lib/deprecated.ts

@@ -1,9 +1,12 @@
-import { BufferAttribute } from 'three';
+import type * as THREE from 'three';
 
 /**
  * NOTE: Sets `BufferAttribute.updateRange` since r159.
  */
-export const setUpdateRange = (attribute: BufferAttribute, updateRange: { offset: number; count: number }): void => {
+export const setUpdateRange = (
+	attribute: THREE.BufferAttribute,
+	updateRange: { offset: number; count: number },
+): void => {
 	if ('updateRanges' in attribute) {
 		// attribute.updateRanges[0] = updateRange;
 		attribute.addUpdateRange(updateRange.offset, updateRange.count);

libs/soba/misc/src/lib/depth-buffer.ts

@@ -1,7 +1,7 @@
 import { computed, Injector } from '@angular/core';
 import { injectBeforeRender, injectStore, pick } from 'angular-three';
 import { assertInjector } from 'ngxtension/assert-injector';
-import { DepthFormat, DepthTexture, UnsignedShortType } from 'three';
+import * as THREE from 'three';
 import { injectFBO } from './fbo';
 
 export function injectDepthBuffer(
@@ -13,17 +13,17 @@ export function injectDepthBuffer(
 		const frames = computed(() => params().frames || Infinity);
 
 		const store = injectStore();
-		const width = store.select('size', 'width');
-		const height = store.select('size', 'height');
-		const dpr = store.select('viewport', 'dpr');
+		// const width = store.select('size', 'width');
+		// const height = store.select('size', 'height');
+		// const dpr = store.select('viewport', 'dpr');
 
-		const w = computed(() => size() || width() * dpr());
-		const h = computed(() => size() || height() * dpr());
+		const w = computed(() => size() || store.size.width() * store.viewport.dpr());
+		const h = computed(() => size() || store.size.height() * store.viewport.dpr());
 
 		const depthConfig = computed(() => {
-			const depthTexture = new DepthTexture(w(), h());
-			depthTexture.format = DepthFormat;
-			depthTexture.type = UnsignedShortType;
+			const depthTexture = new THREE.DepthTexture(w(), h());
+			depthTexture.format = THREE.DepthFormat;
+			depthTexture.type = THREE.UnsignedShortType;
 			return { depthTexture };
 		});