refactor(rapier): update rapier with new renderer

Author: nartc

libs/rapier/src/lib/colliders.ts

@@ -1,6 +1,6 @@
 import { Directive, effect, inject, input } from '@angular/core';
 import { NgtrAnyCollider } from './rigid-body';
-import {
+import type {
 	NgtrBallArgs,
 	NgtrCapsuleArgs,
 	NgtrConeArgs,

libs/rapier/src/lib/debug.ts

@@ -8,6 +8,7 @@ import {
 } from '@angular/core';
 import { World } from '@dimforge/rapier3d-compat';
 import { extend, injectBeforeRender } from 'angular-three';
+import * as THREE from 'three';
 import { BufferAttribute, Group, LineBasicMaterial, LineSegments } from 'three';
 
 @Component({
@@ -26,7 +27,7 @@ import { BufferAttribute, Group, LineBasicMaterial, LineSegments } from 'three';
 export class NgtrDebug {
 	world = input.required<World | undefined>();
 
-	private lineSegmentsRef = viewChild.required<ElementRef<LineSegments>>('lineSegments');
+	private lineSegmentsRef = viewChild.required<ElementRef<THREE.LineSegments>>('lineSegments');
 
 	constructor() {
 		extend({ Group, LineSegments, LineBasicMaterial, BufferAttribute });

libs/rapier/src/lib/instanced-rigid-bodies.ts

@@ -14,15 +14,17 @@ import {
 import {
 	applyProps,
 	extend,
-	getLocalState,
+	getInstanceState,
+	is,
 	NgtEuler,
-	NgtObject3D,
 	NgtQuaternion,
+	NgtThreeElements,
 	NgtVector3,
 	pick,
 } from 'angular-three';
 import { mergeInputs } from 'ngxtension/inject-inputs';
-import { DynamicDrawUsage, InstancedMesh, Object3D } from 'three';
+import * as THREE from 'three';
+import { Object3D } from 'three';
 import { NgtrPhysics } from './physics';
 import { NgtrAnyCollider, NgtrRigidBody, rigidBodyDefaultOptions } from './rigid-body';
 import { NgtrRigidBodyOptions, NgtrRigidBodyState, NgtrRigidBodyType } from './types';
@@ -35,7 +37,7 @@ export interface NgtrInstancedRigidBodyOptions {
 	rotation?: NgtEuler;
 	scale?: NgtVector3;
 	quaternion?: NgtQuaternion;
-	userData?: NgtObject3D['userData'];
+	userData?: NgtThreeElements['ngt-object3D']['userData'];
 	options?: NgtrRigidBodyOptions;
 }
 
@@ -85,7 +87,7 @@ export class NgtrInstancedRigidBodies {
 	rotation = input<NgtEuler | undefined>([0, 0, 0]);
 	scale = input<NgtVector3 | undefined>([1, 1, 1]);
 	quaternion = input<NgtQuaternion | undefined>([0, 0, 0, 1]);
-	userData = input<NgtObject3D['userData'] | undefined>({});
+	userData = input<NgtThreeElements['ngt-object3D']['userData'] | undefined>({});
 	instances = input([], {
 		alias: 'ngtrInstancedRigidBodies',
 		transform: (value: Array<NgtrInstancedRigidBodyOptions> | '') => {
@@ -105,27 +107,27 @@ export class NgtrInstancedRigidBodies {
 		};
 	});
 
-	private instanceWrapperRef = viewChild.required<ElementRef<Object3D>>('instanceWrapper');
+	private instanceWrapperRef = viewChild.required<ElementRef<THREE.Object3D>>('instanceWrapper');
 	rigidBodyRefs = viewChildren(NgtrRigidBody);
 
 	private physics = inject(NgtrPhysics);
-	objectRef = inject<ElementRef<Object3D>>(ElementRef);
+	objectRef = inject<ElementRef<THREE.Object3D>>(ElementRef);
 
 	private colliders = pick(this.options, 'colliders');
 
 	private instancedMesh = computed(() => {
 		const instanceWrapper = this.instanceWrapperRef().nativeElement;
 		if (!instanceWrapper) return null;
 
-		const localState = getLocalState(instanceWrapper);
-		if (!localState) return null;
+		const instanceState = getInstanceState(instanceWrapper);
+		if (!instanceState) return null;
 
 		// track object's children
-		localState.objects();
+		instanceState.objects();
 		const firstChild = instanceWrapper.children[0];
-		if (!firstChild || !(firstChild as InstancedMesh).isInstancedMesh) return null;
+		if (!firstChild || !(firstChild as THREE.InstancedMesh).isInstancedMesh) return null;
 
-		return firstChild as InstancedMesh;
+		return firstChild as THREE.InstancedMesh;
 	});
 
 	protected instancesOptions = computed(() => {
@@ -171,12 +173,12 @@ export class NgtrInstancedRigidBodies {
 		// if colliders on object is not set, use physics colliders
 		if (!options.colliders) options.colliders = physicsColliders;
 
-		const objectLocalState = getLocalState(this.objectRef.nativeElement);
-		if (!objectLocalState) return [];
+		const objectInstanceState = getInstanceState(this.objectRef.nativeElement);
+		if (!objectInstanceState) return [];
 
 		// track object's parent and non-object children
-		const [parent] = [objectLocalState.parent(), objectLocalState.nonObjects()];
-		if (!parent || !(parent as Object3D).isObject3D) return [];
+		const [parent] = [objectInstanceState.parent(), objectInstanceState.nonObjects()];
+		if (!parent || !is.three<THREE.Object3D>(parent, 'isObject3D')) return [];
 
 		return createColliderOptions(this.objectRef.nativeElement, options);
 	});
@@ -192,7 +194,7 @@ export class NgtrInstancedRigidBodies {
 		effect(() => {
 			const instancedMesh = this.instancedMesh();
 			if (!instancedMesh) return;
-			instancedMesh.instanceMatrix.setUsage(DynamicDrawUsage);
+			instancedMesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
 		});
 	}
 }

libs/rapier/src/lib/joints.ts

@@ -13,7 +13,7 @@ import {
 import { resolveRef } from 'angular-three';
 import { assertInjector } from 'ngxtension/assert-injector';
 import { NgtrPhysics } from './physics';
-import {
+import type {
 	NgtrFixedJointParams,
 	NgtrPrismaticJointParams,
 	NgtrRevoluteJointParams,

libs/rapier/src/lib/mesh-collider.ts

@@ -7,10 +7,11 @@ import {
 	inject,
 	input,
 } from '@angular/core';
-import { extend, getLocalState } from 'angular-three';
+import { extend, getInstanceState } from 'angular-three';
+import * as THREE from 'three';
 import { Object3D } from 'three';
 import { NgtrAnyCollider, NgtrRigidBody } from './rigid-body';
-import { NgtrRigidBodyAutoCollider } from './types';
+import type { NgtrRigidBodyAutoCollider } from './types';
 import { createColliderOptions } from './utils';
 
 @Component({
@@ -36,19 +37,19 @@ import { createColliderOptions } from './utils';
 export class NgtrMeshCollider {
 	colliders = input.required<NgtrRigidBodyAutoCollider>({ alias: 'ngtrMeshCollider' });
 
-	objectRef = inject<ElementRef<Object3D>>(ElementRef);
+	objectRef = inject<ElementRef<THREE.Object3D>>(ElementRef);
 	private rigidBody = inject(NgtrRigidBody);
 
 	protected childColliderOptions = computed(() => {
 		const rigidBodyOptions = this.rigidBody.options();
 		rigidBodyOptions.colliders = this.colliders();
 
-		const objectLocalState = getLocalState(this.objectRef.nativeElement);
-		if (!objectLocalState) return [];
+		const objectInstaceState = getInstanceState(this.objectRef.nativeElement);
+		if (!objectInstaceState) return [];
 
 		// track object's children
-		objectLocalState.nonObjects();
-		objectLocalState.objects();
+		objectInstaceState.nonObjects();
+		objectInstaceState.objects();
 
 		return createColliderOptions(this.objectRef.nativeElement, rigidBodyOptions, false);
 	});

libs/rapier/src/lib/physics.ts

@@ -16,7 +16,7 @@ import {
 import RAPIER, { ColliderHandle, EventQueue, Rotation, Vector, World } from '@dimforge/rapier3d-compat';
 import { injectStore, pick, vector3 } from 'angular-three';
 import { mergeInputs } from 'ngxtension/inject-inputs';
-import { MathUtils, Quaternion, Vector3 } from 'three';
+import * as THREE from 'three';
 import { NgtrDebug } from './debug';
 import { NgtrFrameStepper } from './frame-stepper';
 import { _matrix4, _position, _rotation, _scale } from './shared';
@@ -86,8 +86,8 @@ export class NgtrPhysicsFallback {
 export class NgtrPhysics {
 	options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
 
-	content = contentChild.required(TemplateRef);
-	fallbackContent = contentChild(NgtrPhysicsFallback, { read: TemplateRef });
+	protected content = contentChild.required(TemplateRef);
+	protected fallbackContent = contentChild(NgtrPhysicsFallback, { read: TemplateRef });
 
 	protected updatePriority = pick(this.options, 'updatePriority');
 	protected updateLoop = pick(this.options, 'updateLoop');
@@ -104,8 +104,8 @@ export class NgtrPhysics {
 	private timeStep = pick(this.options, 'timeStep');
 	private interpolate = pick(this.options, 'interpolate');
 
-	paused = pick(this.options, 'paused');
-	debug = pick(this.options, 'debug');
+	private paused = pick(this.options, 'paused');
+	protected debug = pick(this.options, 'debug');
 	colliders = pick(this.options, 'colliders');
 
 	private vGravity = vector3(this.options, 'gravity');
@@ -116,7 +116,7 @@ export class NgtrPhysics {
 	protected rapierError = signal<string | null>(null);
 	rapier = this.rapierConstruct.asReadonly();
 
-	ready = computed(() => !!this.rapier());
+	protected ready = computed(() => !!this.rapier());
 	worldSingleton = computed(() => {
 		const rapier = this.rapier();
 		if (!rapier) return null;
@@ -203,7 +203,7 @@ export class NgtrPhysics {
 		 * Fixed timeStep simulation progression.
 		 * @see https://gafferongames.com/post/fix_your_timestep/
 		 */
-		const clampedDelta = MathUtils.clamp(delta, 0, 0.5);
+		const clampedDelta = THREE.MathUtils.clamp(delta, 0, 0.5);
 
 		const stepWorld = (innerDelta: number) => {
 			// Trigger beforeStep callbacks
@@ -264,15 +264,19 @@ export class NgtrPhysics {
 			}
 
 			// New states
-			let t = rigidBody.translation() as Vector3;
-			let r = rigidBody.rotation() as Quaternion;
+			let t = rigidBody.translation() as THREE.Vector3;
+			let r = rigidBody.rotation() as THREE.Quaternion;
 
 			let previousState = this.steppingState.previousState[handle];
 
 			if (previousState) {
 				// Get previous simulated world position
 				_matrix4
-					.compose(previousState.position as Vector3, rapierQuaternionToQuaternion(previousState.rotation), state.scale)
+					.compose(
+						previousState.position as THREE.Vector3,
+						rapierQuaternionToQuaternion(previousState.rotation),
+						state.scale,
+					)
 					.premultiply(state.invertedWorldMatrix)
 					.decompose(_position, _rotation, _scale);