refactor(cannon): update cannon with new renderer

Author: nartc

libs/cannon/body/src/lib/body.ts

@@ -10,11 +10,11 @@ import {
 	signal,
 } from '@angular/core';
 import { BodyShapeType } from '@pmndrs/cannon-worker-api';
-import { resolveRef } from 'angular-three';
+import { is, resolveRef } from 'angular-three';
 import { NgtcPhysics } from 'angular-three-cannon';
 import { NgtcDebug } from 'angular-three-cannon/debug';
 import { assertInjector } from 'ngxtension/assert-injector';
-import { DynamicDrawUsage, InstancedMesh, Object3D } from 'three';
+import * as THREE from 'three';
 import { NgtcArgFn, NgtcBodyPropsMap, NgtcBodyPublicApi, NgtcGetByIndex } from './types';
 import { defaultTransformArgs, makeBodyApi, prepare, setupCollision } from './utils';
 
@@ -24,14 +24,14 @@ export interface NgtcBodyOptions<TShape extends BodyShapeType> {
 }
 
 function createInjectBody<TShape extends BodyShapeType>(type: TShape) {
-	return <TObject extends Object3D>(
+	return <TObject extends THREE.Object3D>(
 		getPropFn: NgtcGetByIndex<NgtcBodyPropsMap[TShape]>,
 		ref: ElementRef<TObject> | TObject | Signal<ElementRef<TObject> | TObject | undefined>,
 		options?: NgtcBodyOptions<TShape>,
 	) => injectBody<TShape, TObject>(type, getPropFn, ref, options);
 }
 
-function injectBody<TShape extends BodyShapeType, TObject extends Object3D>(
+function injectBody<TShape extends BodyShapeType, TObject extends THREE.Object3D>(
 	type: TShape,
 	getPropFn: NgtcGetByIndex<NgtcBodyPropsMap[TShape]>,
 	ref: ElementRef<TObject> | TObject | Signal<ElementRef<TObject> | TObject | undefined>,
@@ -77,11 +77,11 @@ function injectBody<TShape extends BodyShapeType, TObject extends Object3D>(
 
 			const [uuid, props] = (() => {
 				let uuids: string[] = [];
-				let temp: Object3D;
-				if (object instanceof InstancedMesh) {
-					object.instanceMatrix.setUsage(DynamicDrawUsage);
+				let temp: THREE.Object3D;
+				if (is.three<THREE.InstancedMesh>(object, 'isInstancedMesh')) {
+					object.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
 					uuids = new Array(object.count).fill(0).map((_, i) => `${object.uuid}/${i}`);
-					temp = new Object3D();
+					temp = new THREE.Object3D();
 				} else {
 					uuids = [object.uuid];
 				}
@@ -91,8 +91,8 @@ function injectBody<TShape extends BodyShapeType, TObject extends Object3D>(
 						const props = getPropFn(index);
 						if (temp) {
 							prepare(temp, props);
-							(object as unknown as InstancedMesh).setMatrixAt(index, temp.matrix);
-							(object as unknown as InstancedMesh).instanceMatrix.needsUpdate = true;
+							(object as unknown as THREE.InstancedMesh).setMatrixAt(index, temp.matrix);
+							(object as unknown as THREE.InstancedMesh).instanceMatrix.needsUpdate = true;
 						} else {
 							prepare(object, props);
 						}

libs/cannon/body/src/lib/types.ts

@@ -1,4 +1,4 @@
-import {
+import type {
 	AtomicName,
 	AtomicProps,
 	BodyProps,
@@ -15,21 +15,21 @@ import {
 	Triplet,
 	VectorName,
 } from '@pmndrs/cannon-worker-api';
-import { Euler, Quaternion, Vector3 } from 'three';
+import type * as THREE from 'three';
 
 export interface NgtcAtomicApi<K extends AtomicName> {
 	set: (value: AtomicProps[K]) => void;
 	subscribe: (callback: (value: AtomicProps[K]) => void) => () => void;
 }
 
 export interface NgtcQuaternionApi {
-	copy: ({ w, x, y, z }: Quaternion) => void;
+	copy: ({ w, x, y, z }: THREE.Quaternion) => void;
 	set: (x: number, y: number, z: number, w: number) => void;
 	subscribe: (callback: (value: Quad) => void) => () => void;
 }
 
 export interface NgtcVectorApi {
-	copy: ({ x, y, z }: Vector3 | Euler) => void;
+	copy: ({ x, y, z }: THREE.Vector3 | THREE.Euler) => void;
 	set: (x: number, y: number, z: number) => void;
 	subscribe: (callback: (value: Triplet) => void) => () => void;
 }

libs/cannon/body/src/lib/utils.ts

@@ -20,30 +20,31 @@ import {
 	Triplet,
 	VectorName,
 } from '@pmndrs/cannon-worker-api';
+import { is } from 'angular-three';
 import { NgtcCannonEvents, NgtcPhysics } from 'angular-three-cannon';
-import { Euler, Object3D, Quaternion, Vector3 } from 'three';
+import * as THREE from 'three';
 import { NgtcWorkerApi } from './types';
 
 function capitalize<T extends string>(str: T): Capitalize<T> {
 	return (str.charAt(0).toUpperCase() + str.slice(1)) as Capitalize<T>;
 }
 
-function getUUID(body: Object3D, index?: number) {
+function getUUID(body: THREE.Object3D, index?: number) {
 	const suffix = index === undefined ? '' : `/${index}`;
 	if (typeof body === 'function') return null;
 	return body && body && `${body.uuid}${suffix}`;
 }
 
-const e = new Euler();
-const q = new Quaternion();
+const e = new THREE.Euler();
+const q = new THREE.Quaternion();
 
 function quaternionToRotation(callback: (v: Triplet) => void) {
 	return (v: Quad) => callback(e.setFromQuaternion(q.fromArray(v)).toArray() as Triplet);
 }
 
 let incrementingId = 0;
 export function createSubscribe<T extends SubscriptionName>(
-	body: Object3D,
+	body: THREE.Object3D,
 	worker: CannonWorkerAPI,
 	subscriptions: Subscriptions,
 	type: T,
@@ -62,11 +63,14 @@ export function createSubscribe<T extends SubscriptionName>(
 	};
 }
 
-function makeTriplet(v: Vector3 | Triplet): Triplet {
-	return v instanceof Vector3 ? [v.x, v.y, v.z] : v;
+function makeTriplet(v: THREE.Vector3 | Triplet): Triplet {
+	return is.three<THREE.Vector3>(v, 'isVector3') ? [v.x, v.y, v.z] : v;
 }
 
-export function prepare(object: Object3D, { position = [0, 0, 0], rotation = [0, 0, 0], userData = {} }: BodyProps) {
+export function prepare(
+	object: THREE.Object3D,
+	{ position = [0, 0, 0], rotation = [0, 0, 0], userData = {} }: BodyProps,
+) {
 	object.userData = userData;
 	object.position.set(...position);
 	object.rotation.set(...rotation);
@@ -82,7 +86,7 @@ export function setupCollision(
 }
 
 export function makeBodyApi(
-	body: Object3D,
+	body: THREE.Object3D,
 	worker: CannonWorkerAPI,
 	{ subscriptions, scaleOverrides }: Pick<NgtcPhysics, 'subscriptions' | 'scaleOverrides'>,
 ) {
@@ -101,7 +105,7 @@ export function makeBodyApi(
 	const makeQuaternion = (index?: number) => {
 		const type = 'quaternion';
 		return {
-			copy: ({ w, x, y, z }: Quaternion) => {
+			copy: ({ w, x, y, z }: THREE.Quaternion) => {
 				const uuid = getUUID(body, index);
 				uuid && worker.setQuaternion({ props: [x, y, z, w], uuid });
 			},
@@ -115,7 +119,7 @@ export function makeBodyApi(
 
 	const makeRotation = (index?: number) => {
 		return {
-			copy: ({ x, y, z }: Vector3 | Euler) => {
+			copy: ({ x, y, z }: THREE.Vector3 | THREE.Euler) => {
 				const uuid = getUUID(body, index);
 				uuid && worker.setRotation({ props: [x, y, z], uuid });
 			},
@@ -140,7 +144,7 @@ export function makeBodyApi(
 	const makeVec = (type: VectorName, index?: number) => {
 		const op: SetOpName<VectorName> = `set${capitalize(type)}`;
 		return {
-			copy: ({ x, y, z }: Vector3 | Euler) => {
+			copy: ({ x, y, z }: THREE.Vector3 | THREE.Euler) => {
 				const uuid = getUUID(body, index);
 				uuid && worker[op]({ props: [x, y, z], uuid });
 			},
@@ -199,7 +203,7 @@ export function makeBodyApi(
 			rotation: makeRotation(index),
 			scaleOverride(scale) {
 				const uuid = getUUID(body, index);
-				if (uuid) scaleOverrides[uuid] = new Vector3(...scale);
+				if (uuid) scaleOverrides[uuid] = new THREE.Vector3(...scale);
 			},
 			sleep() {
 				const uuid = getUUID(body, index);

libs/cannon/constraint/src/lib/constraint.ts

@@ -10,7 +10,7 @@ import {
 import { makeId, resolveRef } from 'angular-three';
 import { NgtcPhysics } from 'angular-three-cannon';
 import { assertInjector } from 'ngxtension/assert-injector';
-import { Object3D } from 'three';
+import * as THREE from 'three';
 
 export interface NgtcConstraintApi {
 	disable: () => void;
@@ -44,7 +44,7 @@ export type NgtcConstraintOptions<TConstraintType extends 'Hinge' | ConstraintTy
 };
 
 function createInjectConstraint<TConstraint extends ConstraintTypes | 'Hinge'>(type: TConstraint) {
-	return <A extends Object3D = Object3D, B extends Object3D = Object3D>(
+	return <A extends THREE.Object3D = THREE.Object3D, B extends THREE.Object3D = THREE.Object3D>(
 		bodyA: ElementRef<A> | A | Signal<ElementRef<A> | A | undefined>,
 		bodyB: ElementRef<B> | B | Signal<ElementRef<B> | B | undefined>,
 		options?: NgtcConstraintOptions<TConstraint>,
@@ -53,8 +53,8 @@ function createInjectConstraint<TConstraint extends ConstraintTypes | 'Hinge'>(t
 
 function injectConstraint<
 	TConstraint extends ConstraintTypes | 'Hinge',
-	A extends Object3D = Object3D,
-	B extends Object3D = Object3D,
+	A extends THREE.Object3D = THREE.Object3D,
+	B extends THREE.Object3D = THREE.Object3D,
 >(
 	type: TConstraint,
 	bodyA: ElementRef<A> | A | Signal<ElementRef<A> | A | undefined>,

libs/cannon/debug/src/lib/debug.ts

@@ -1,18 +1,19 @@
 import { Directive, afterNextRender, inject, input } from '@angular/core';
 import { BodyProps, BodyShapeType, propsToBody } from '@pmndrs/cannon-worker-api';
-import { injectBeforeRender, injectStore } from 'angular-three';
+import { injectBeforeRender, injectStore, is } from 'angular-three';
 import { NgtcPhysics } from 'angular-three-cannon';
 import { Body, Quaternion as CQuarternion, Vec3, World } from 'cannon-es';
 import CannonDebugger from 'cannon-es-debugger';
 import { mergeInputs } from 'ngxtension/inject-inputs';
-import { InstancedMesh, Matrix4, Object3D, Quaternion, Scene, Vector3 } from 'three';
+import * as THREE from 'three';
 
-const q = new Quaternion();
-const s = new Vector3(1, 1, 1);
-const v = new Vector3();
-const m = new Matrix4();
-function getMatrix(o: Object3D) {
-	if (o instanceof InstancedMesh) {
+const q = new THREE.Quaternion();
+const s = new THREE.Vector3(1, 1, 1);
+const v = new THREE.Vector3();
+const m = new THREE.Matrix4();
+
+function getMatrix(o: THREE.Object3D) {
+	if (is.three<THREE.InstancedMesh>(o, 'isInstancedMesh')) {
 		o.getMatrixAt(parseInt(o.uuid.split('/')[1]), m);
 		return m;
 	}
@@ -35,14 +36,14 @@ const defaultOptions: NgtcDebugInputs = {
 
 @Directive({ selector: 'ngtc-physics[debug]' })
 export class NgtcDebug {
-	private store = injectStore();
-	private physics = inject(NgtcPhysics);
-
 	debug = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
 
-	private defaultScene = this.store.select('scene');
+	private physics = inject(NgtcPhysics);
+
+	private store = injectStore();
+	private defaultScene = this.store.scene;
 
-	private debuggerScene = new Scene();
+	private debuggerScene = new THREE.Scene();
 	private bodies: Body[] = [];
 	private bodyMap: Record<string, Body> = {};
 

libs/cannon/src/lib/physics.ts

@@ -14,9 +14,9 @@ import {
 	WorkerFrameMessage,
 	WorkerRayhitEvent,
 } from '@pmndrs/cannon-worker-api';
-import { injectBeforeRender, injectStore, pick } from 'angular-three';
+import { injectBeforeRender, injectStore, is, pick } from 'angular-three';
 import { mergeInputs } from 'ngxtension/inject-inputs';
-import { InstancedMesh, Matrix4, Object3D, Quaternion, QuaternionTuple, Vector3 } from 'three';
+import * as THREE from 'three';
 
 export interface NgtcCannonWorkerEvents {
 	collide: WorkerCollideEvent;
@@ -31,20 +31,20 @@ export type NgtcCannonWorker = CannonWorkerAPI & {
 	removeAllListeners: () => void;
 };
 
-const v = new Vector3();
-const s = new Vector3(1, 1, 1);
-const q = new Quaternion();
-const m = new Matrix4();
+const v = new THREE.Vector3();
+const s = new THREE.Vector3(1, 1, 1);
+const q = new THREE.Quaternion();
+const m = new THREE.Matrix4();
 
 function apply(
 	index: number,
 	positions: ArrayLike<number>,
 	quaternions: ArrayLike<number>,
 	scale = s,
-	object?: Object3D,
+	object?: THREE.Object3D,
 ) {
 	if (index !== undefined) {
-		m.compose(v.fromArray(positions, index * 3), q.fromArray(quaternions as QuaternionTuple, index * 4), scale);
+		m.compose(v.fromArray(positions, index * 3), q.fromArray(quaternions as THREE.QuaternionTuple, index * 4), scale);
 		if (object) {
 			object.matrixAutoUpdate = false;
 			object.matrix.copy(m);
@@ -66,7 +66,7 @@ type NgtcCallbackByType<T extends { type: string }> = {
 
 export type NgtcCannonEvents = Record<string, Partial<NgtcCallbackByType<NgtcCannonEvent>>>;
 
-export type ScaleOverrides = Record<string, Vector3>;
+export type ScaleOverrides = Record<string, THREE.Vector3>;
 
 export interface NgtcPhysicsOptions extends CannonWorkerProps {
 	isPaused?: boolean;
@@ -111,7 +111,7 @@ export class NgtcPhysics {
 	private iterations = pick(this.options, 'iterations');
 	private tolerance = pick(this.options, 'tolerance');
 
-	private invalidate = this.store.select('invalidate');
+	private invalidate = this.store.invalidate;
 	// @ts-expect-error - worker is not nullable, and we don't want to use ! operator.
 	private cannonWorker = signal<CannonWorkerAPI>(null);
 
@@ -237,7 +237,7 @@ export class NgtcPhysics {
 		});
 		if (!active) return;
 		for (const ref of Object.values(refs).filter(unique())) {
-			if (ref instanceof InstancedMesh) {
+			if (is.three<THREE.InstancedMesh>(ref, 'isInstancedMesh')) {
 				for (let i = 0; i < ref.count; i++) {
 					const uuid = `${ref.uuid}/${i}`;
 					const index = bodies[uuid];