chore(repo): adjust to new APIs

Author: nartc

apps/examples/src/app/cannon/basic/scene.ts

@@ -12,7 +12,7 @@ import {
 import { Triplet } from '@pmndrs/cannon-worker-api';
 import { NgtArgs } from 'angular-three';
 import { NgtcPhysics } from 'angular-three-cannon';
-import { injectBox, injectPlane } from 'angular-three-cannon/body';
+import { box, plane } from 'angular-three-cannon/body';
 import { NgtcDebug } from 'angular-three-cannon/debug';
 import { Mesh } from 'three';
 import { State } from './state';
@@ -35,7 +35,7 @@ export class Plane {
 	private mesh = viewChild.required<ElementRef<Mesh>>('mesh');
 
 	constructor() {
-		injectPlane(() => ({ mass: 0, position: this.position(), args: this.args }), this.mesh);
+		plane(() => ({ mass: 0, position: this.position(), args: this.args }), this.mesh);
 	}
 }
 
@@ -57,7 +57,7 @@ export class Box {
 	private mesh = viewChild.required<ElementRef<Mesh>>('mesh');
 
 	constructor() {
-		injectBox(() => ({ mass: 10000, position: this.position(), args: this.args }), this.mesh);
+		box(() => ({ mass: 10000, position: this.position(), args: this.args }), this.mesh);
 	}
 }
 

apps/examples/src/app/cannon/chain/scene.ts

@@ -16,10 +16,10 @@ import {
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { CylinderArgs, Triplet } from '@pmndrs/cannon-worker-api';
-import { NgtArgs, injectBeforeRender, injectStore } from 'angular-three';
+import { NgtArgs, beforeRender, injectStore } from 'angular-three';
 import { NgtcPhysics } from 'angular-three-cannon';
-import { injectBox, injectCylinder, injectSphere } from 'angular-three-cannon/body';
-import { injectConeTwist } from 'angular-three-cannon/constraint';
+import { box, cylinder, sphere } from 'angular-three-cannon/body';
+import { coneTwist } from 'angular-three-cannon/constraint';
 import { Color, ColorRepresentation, Mesh, Object3D } from 'three';
 
 interface Handle {
@@ -63,15 +63,12 @@ export class ChainLink {
 	protected mesh = viewChild.required<ElementRef<Mesh>>('mesh');
 
 	constructor() {
-		injectCylinder(
-			() => ({ mass: 1, args: this.args(), linearDamping: 0.8, position: this.position() }),
-			this.mesh,
-		);
+		cylinder(() => ({ mass: 1, args: this.args(), linearDamping: 0.8, position: this.position() }), this.mesh);
 
 		const injector = inject(Injector);
 		// NOTE: we want to run this in afterNextRender because we want the input to resolve
 		afterNextRender(() => {
-			injectConeTwist(this.parent.ref, this.mesh, {
+			coneTwist(this.parent.ref, this.mesh, {
 				injector,
 				options: {
 					angle: Math.PI / 8,
@@ -143,9 +140,9 @@ export class PointerHandle {
 	protected mesh = viewChild.required<ElementRef<Mesh>>('mesh');
 
 	constructor() {
-		const boxApi = injectBox(() => ({ args: this.args, position: this.position, type: 'Kinematic' }), this.mesh);
+		const boxApi = box(() => ({ args: this.args, position: this.position, type: 'Kinematic' }), this.mesh);
 
-		injectBeforeRender(({ pointer: { x, y }, viewport: { width, height } }) => {
+		beforeRender(({ pointer: { x, y }, viewport: { width, height } }) => {
 			boxApi()?.position.set((x * width) / 2, (y * height) / 2, 0);
 		});
 	}
@@ -173,7 +170,7 @@ export class StaticHandle {
 	protected mesh = viewChild.required<ElementRef<Mesh>>('mesh');
 
 	constructor() {
-		injectSphere(() => ({ args: [1.5], position: this.position(), type: 'Static' }), this.mesh);
+		sphere(() => ({ args: [1.5], position: this.position(), type: 'Static' }), this.mesh);
 	}
 }
 

apps/examples/src/app/cannon/compound/scene.ts

@@ -14,7 +14,7 @@ import {
 import { Triplet } from '@pmndrs/cannon-worker-api';
 import { NgtArgs } from 'angular-three';
 import { NgtcPhysics } from 'angular-three-cannon';
-import { injectCompound, injectPlane } from 'angular-three-cannon/body';
+import { compound, plane } from 'angular-three-cannon/body';
 import { NgtcDebug } from 'angular-three-cannon/debug';
 import { Group } from 'three';
 
@@ -41,7 +41,7 @@ export class Plane {
 	private group = viewChild.required<ElementRef<Group>>('group');
 
 	constructor() {
-		injectPlane(() => ({ type: 'Static', rotation: this.rotation() }), this.group);
+		plane(() => ({ type: 'Static', rotation: this.rotation() }), this.group);
 	}
 }
 
@@ -78,7 +78,7 @@ export class CompoundBody {
 	private group = viewChild.required<ElementRef<Group>>('group');
 
 	constructor() {
-		const compoundApi = injectCompound(
+		const compoundApi = compound(
 			() => ({
 				isTrigger: this.isTrigger(),
 				mass: this.mass(),

apps/examples/src/app/cannon/convexpolyhedron/scene.ts

@@ -12,9 +12,9 @@ import {
 import { Triplet } from '@pmndrs/cannon-worker-api';
 import { NgtArgs } from 'angular-three';
 import { NgtcPhysics } from 'angular-three-cannon';
-import { injectConvexPolyhedron } from 'angular-three-cannon/body';
+import { convexPolyhedron } from 'angular-three-cannon/body';
 import { NgtcDebug } from 'angular-three-cannon/debug';
-import { injectGLTF } from 'angular-three-soba/loaders';
+import { gltfResource } from 'angular-three-soba/loaders';
 import { BoxGeometry, BufferGeometry, ConeGeometry, Mesh } from 'three';
 import { GLTF, Geometry } from 'three-stdlib';
 import { UiPlane } from '../ui/plane';
@@ -57,7 +57,7 @@ export class Cone {
 	private mesh = viewChild.required<ElementRef<Mesh>>('mesh');
 
 	constructor() {
-		injectConvexPolyhedron(
+		convexPolyhedron(
 			() => ({
 				args: this.args(),
 				mass: 100,
@@ -98,7 +98,7 @@ export class Cube {
 	private mesh = viewChild.required<ElementRef<Mesh>>('mesh');
 
 	constructor() {
-		injectConvexPolyhedron(
+		convexPolyhedron(
 			() => ({
 				args: this.args(),
 				mass: 100,
@@ -137,9 +137,9 @@ type DiamondGLTF = GLTF & {
 export class Diamond {
 	protected positionRotationInputs = inject(PositionRotationInput, { host: true });
 
-	private gltf = injectGLTF<DiamondGLTF>(() => './diamond.glb');
+	private gltf = gltfResource<DiamondGLTF>(() => './diamond.glb');
 	protected geometry = computed(() => {
-		const gltf = this.gltf();
+		const gltf = this.gltf.value();
 		if (!gltf) return null;
 		return gltf.nodes.Cylinder.geometry;
 	});
@@ -152,7 +152,7 @@ export class Diamond {
 	private mesh = viewChild<ElementRef<Mesh>>('mesh');
 
 	constructor() {
-		injectConvexPolyhedron(
+		convexPolyhedron(
 			() => ({
 				args: this.args(),
 				mass: 100,

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

@@ -11,9 +11,9 @@ import {
 	viewChild,
 } from '@angular/core';
 import { Triplet } from '@pmndrs/cannon-worker-api';
-import { NgtArgs, injectBeforeRender } from 'angular-three';
+import { NgtArgs, beforeRender } from 'angular-three';
 import { NgtcPhysics } from 'angular-three-cannon';
-import { NgtcBodyPublicApi, injectBox, injectPlane, injectSphere } from 'angular-three-cannon/body';
+import { NgtcBodyPublicApi, box, plane, sphere } from 'angular-three-cannon/body';
 import { Color, InstancedMesh, Mesh } from 'three';
 import niceColors from '../../colors';
 import { shape } from './state';
@@ -36,7 +36,7 @@ export class Plane {
 	private mesh = viewChild.required<ElementRef<Mesh>>('mesh');
 
 	constructor() {
-		injectPlane(() => ({ rotation: this.rotation() }), this.mesh);
+		plane(() => ({ rotation: this.rotation() }), this.mesh);
 	}
 }
 
@@ -49,7 +49,7 @@ export abstract class InstancesInput {
 	abstract bodyApi: Signal<NgtcBodyPublicApi | null>;
 
 	constructor() {
-		injectBeforeRender(() => {
+		beforeRender(() => {
 			this.bodyApi()
 				?.at(Math.floor(Math.random() * this.count()))
 				.position.set(0, Math.random() * 2, 0);
@@ -75,7 +75,7 @@ export class Boxes extends InstancesInput {
 	protected args = computed<Triplet>(() => [this.size(), this.size(), this.size()]);
 	private mesh = viewChild<ElementRef<InstancedMesh>>('mesh');
 
-	bodyApi = injectBox(
+	bodyApi = box(
 		() => ({ args: this.args(), mass: 1, position: [Math.random() - 0.5, Math.random() * 2, Math.random() - 0.5] }),
 		this.mesh,
 	);
@@ -99,7 +99,7 @@ export class Spheres extends InstancesInput {
 	protected args = computed<Triplet>(() => [this.size(), this.size(), this.size()]);
 	private mesh = viewChild<ElementRef<InstancedMesh>>('mesh');
 
-	bodyApi = injectSphere(
+	bodyApi = sphere(
 		() => ({
 			args: [this.size()],
 			mass: 1,

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

@@ -8,9 +8,9 @@ import {
 	viewChild,
 } from '@angular/core';
 import { Triplet } from '@pmndrs/cannon-worker-api';
-import { NgtArgs, injectBeforeRender } from 'angular-three';
+import { NgtArgs, beforeRender } from 'angular-three';
 import { NgtcPhysics } from 'angular-three-cannon';
-import { injectBox, injectPlane, injectSphere } from 'angular-three-cannon/body';
+import { box, plane, sphere } from 'angular-three-cannon/body';
 import { Color, InstancedMesh, Mesh } from 'three';
 import niceColors from '../../colors';
 
@@ -34,7 +34,7 @@ export class Plane {
 	private mesh = viewChild.required<ElementRef<Mesh>>('mesh');
 
 	constructor() {
-		injectPlane(() => ({ position: this.position(), rotation: this.rotation() }), this.mesh);
+		plane(() => ({ position: this.position(), rotation: this.rotation() }), this.mesh);
 	}
 }
 
@@ -56,9 +56,9 @@ export class Box {
 	private mesh = viewChild.required<ElementRef<Mesh>>('mesh');
 
 	constructor() {
-		const boxApi = injectBox(() => ({ args: this.args, mass: 1, type: 'Kinematic' }), this.mesh);
+		const boxApi = box(() => ({ args: this.args, mass: 1, type: 'Kinematic' }), this.mesh);
 
-		injectBeforeRender(({ clock }) => {
+		beforeRender(({ clock }) => {
 			const api = boxApi();
 			if (!api) return;
 			const t = clock.elapsedTime;
@@ -100,7 +100,7 @@ export class InstancedSpheres {
 	});
 
 	constructor() {
-		injectSphere(
+		sphere(
 			(index) => ({
 				args: [1],
 				mass: 1,