docs: turn out args works just fine with rigidBody

nartc · nartc · commit f81f47e9b36c · 2025-02-28T18:58:13.000-06:00
diff --git a/apps/examples/src/app/rapier/active-collision-types/active-collision-types.ts b/apps/examples/src/app/rapier/active-collision-types/active-collision-types.ts
@@ -1,8 +1,7 @@
 import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, signal, viewChild } from '@angular/core';
 import { ActiveCollisionTypes } from '@dimforge/rapier3d-compat';
-import { injectBeforeRender } from 'angular-three';
+import { injectBeforeRender, NgtArgs } from 'angular-three';
 import { NgtrRigidBody } from 'angular-three-rapier';
-import * as THREE from 'three';
 
 @Component({
 	selector: 'app-ball',
@@ -44,20 +43,17 @@ export class Ball {
 	selector: 'app-wall',
 	template: `
 		<ngt-object3D rigidBody="fixed" [options]="{ colliders: 'cuboid' }">
-			<ngt-mesh [geometry]="boxGeometry">
-				<!--        TODO: rigidBody does not work with *args       -->
-				<!--        <ngt-box-geometry *args="[0.5, 5, 2]" />-->
+			<ngt-mesh>
+				<ngt-box-geometry *args="[0.5, 5, 2]" />
 				<ngt-mesh-standard-material transparent [opacity]="0.5" />
 			</ngt-mesh>
 		</ngt-object3D>
 	`,
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
-	imports: [NgtrRigidBody],
+	imports: [NgtrRigidBody, NgtArgs],
 })
-export class Wall {
-	protected boxGeometry = new THREE.BoxGeometry(0.5, 5, 2);
-}
+export class Wall {}
 
 @Component({
 	selector: 'app-active-collision-types-rapier',
diff --git a/apps/examples/src/app/rapier/all-colliders/all-colliders.ts b/apps/examples/src/app/rapier/all-colliders/all-colliders.ts
@@ -104,10 +104,8 @@ export class Suzanne {
 			</ngt-object3D>
 
 			<ngt-object3D rigidBody [position]="[6, 0, 0]" [options]="{ colliders: false }">
-				<ngt-mesh castShadow receiveShadow [geometry]="capsuleGeometry">
-					<!-- TODO: rigidBody does not work with *args
+				<ngt-mesh castShadow receiveShadow>
 					<ngt-capsule-geometry *args="[0.5, 1, 4, 8]" />
-          -->
 					<ngt-mesh-physical-material color="orange" />
 				</ngt-mesh>
 				<ngt-object3D [capsuleCollider]="[0.5, 0.5]" />
@@ -117,10 +115,8 @@ export class Suzanne {
 			</ngt-object3D>
 
 			<ngt-object3D rigidBody [position]="[15, 0, 0]" [options]="{ colliders: false }">
-				<ngt-mesh castShadow receiveShadow [geometry]="cylinderGeometry">
-					<!-- TODO: rigidBody does not work with *args
-          <ngt-cylinder-geometry *args="[0.5, 0.5, 2]" />
-          -->
+				<ngt-mesh castShadow receiveShadow>
+					<ngt-cylinder-geometry *args="[0.5, 0.5, 2]" />
 					<ngt-mesh-physical-material color="orange" />
 				</ngt-mesh>
 				<ngt-object3D [cylinderCollider]="[1, 0.5]" />
@@ -154,10 +150,8 @@ export class Suzanne {
 			</ngt-object3D>
 
 			<ngt-object3D rigidBody [options]="{ colliders: false }">
-				<ngt-mesh castShadow receiveShadow [geometry]="coneGeometry">
-					<!-- TODO: rigidBody does not work with *args
-          <ngt-cone-geometry *args="[0.5, 2]" />
-          -->
+				<ngt-mesh castShadow receiveShadow>
+					<ngt-cone-geometry *args="[0.5, 2]" />
 					<ngt-mesh-physical-material color="orange" />
 				</ngt-mesh>
 				<ngt-object3D [coneCollider]="[1, 0.5]" />
@@ -167,10 +161,8 @@ export class Suzanne {
 			</ngt-object3D>
 
 			<ngt-object3D rigidBody [position]="[0, 3, 0]" [options]="{ colliders: false }">
-				<ngt-mesh castShadow receiveShadow [geometry]="coneGeometry">
-					<!-- TODO: rigidBody does not work with *args
-          <ngt-cone-geometry *args="[0.5, 2]" />
-          -->
+				<ngt-mesh castShadow receiveShadow>
+					<ngt-cone-geometry *args="[0.5, 2]" />
 					<ngt-mesh-physical-material color="orange" />
 				</ngt-mesh>
 				<ngt-object3D [roundConeCollider]="[1, 0.5, 0.1]" />
@@ -180,10 +172,8 @@ export class Suzanne {
 			</ngt-object3D>
 
 			<ngt-object3D rigidBody [position]="[3, 3, 0]" [options]="{ colliders: false }">
-				<ngt-mesh castShadow receiveShadow [geometry]="cylinderGeometry">
-					<!-- TODO: rigidBody does not work with *args
-          <ngt-cylinder-geometry *args="[0.5, 0.5, 2]" />
-          -->
+				<ngt-mesh castShadow receiveShadow>
+					<ngt-cylinder-geometry *args="[0.5, 0.5, 2]" />
 					<ngt-mesh-physical-material color="orange" />
 				</ngt-mesh>
 				<ngt-object3D [roundCylinderCollider]="[1, 0.4, 0.1]" />
@@ -227,6 +217,7 @@ export class Suzanne {
 		NgtrRoundCylinderCollider,
 		NgtrHeightfieldCollider,
 		NgtsHTML,
+		NgtArgs,
 	],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -245,9 +236,6 @@ export default class AllCollidersExample {
 	);
 
 	protected roundBoxGeometry = new RoundedBoxGeometry(1.4, 1.4, 1.4, 8, 0.2);
-	protected capsuleGeometry = new THREE.CapsuleGeometry(0.5, 1, 4, 8);
-	protected cylinderGeometry = new THREE.CylinderGeometry(0.5, 0.5, 2);
-	protected coneGeometry = new THREE.ConeGeometry(0.5, 2);
 
 	constructor() {
 		this.heightField.forEach((v, index) => {
diff --git a/apps/examples/src/app/rapier/attractors/attractors.ts b/apps/examples/src/app/rapier/attractors/attractors.ts
@@ -3,16 +3,14 @@ import { NgtArgs, NgtVector3 } from 'angular-three';
 import { NgtrInstancedRigidBodies, NgtrInteractionGroups, NgtrRigidBody } from 'angular-three-rapier';
 import { NgtrAttractor } from 'angular-three-rapier/addons';
 import { NgtsHTML } from 'angular-three-soba/misc';
-import * as THREE from 'three';
 
 @Component({
 	selector: 'app-attractors-rapier',
 	template: `
 		<ngt-group>
 			<ngt-object3D [instancedRigidBodies]="instances" [options]="{ colliders: 'ball' }">
-				<ngt-instanced-mesh *args="[ballGeometry, undefined, 100]" castShadow>
-					<!--          // TODO: rigidBody does not work with *args-->
-					<!--          <ngt-sphere-geometry *args="[1]" />-->
+				<ngt-instanced-mesh *args="[undefined, undefined, 100]" castShadow>
+					<ngt-sphere-geometry *args="[1]" />
 					<ngt-mesh-physical-material [roughness]="0.5" [metalness]="0.5" color="green" />
 				</ngt-instanced-mesh>
 			</ngt-object3D>
@@ -57,5 +55,4 @@ export default class AttractorsExample {
 		key: index,
 		position: [Math.floor(Math.random() * 30), Math.random() * 30 * 0.5, 0] as NgtVector3,
 	}));
-	protected ballGeometry = new THREE.SphereGeometry(1);
 }
diff --git a/apps/examples/src/app/rapier/car/car.ts b/apps/examples/src/app/rapier/car/car.ts
@@ -7,9 +7,8 @@ import {
 	inject,
 	input,
 } from '@angular/core';
-import { injectBeforeRender, NgtVector3 } from 'angular-three';
+import { injectBeforeRender, NgtArgs, NgtVector3 } from 'angular-three';
 import { injectRevoluteJoint, NgtrRigidBody } from 'angular-three-rapier';
-import * as THREE from 'three';
 
 @Directive({ selector: '[rigidBody][wheel]' })
 export class WheelJoint {
@@ -50,9 +49,8 @@ export class WheelJoint {
 					[options]="{ colliders: 'hull' }"
 					[wheel]="body"
 				>
-					<ngt-mesh castShadow receiveShadow [rotation.x]="Math.PI / 2" [geometry]="cylinderGeometry">
-						<!--            TODO: rigidBody does not work with *args-->
-						<!--            <ngt-cylinder-geometry *args="[1, 1, 1, 32]" />-->
+					<ngt-mesh castShadow receiveShadow [rotation.x]="Math.PI / 2">
+						<ngt-cylinder-geometry *args="[1, 1, 1, 32]" />
 						<ngt-mesh-standard-material color="grey" />
 					</ngt-mesh>
 				</ngt-object3D>
@@ -61,10 +59,9 @@ export class WheelJoint {
 	`,
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
-	imports: [NgtrRigidBody, WheelJoint],
+	imports: [NgtrRigidBody, WheelJoint, NgtArgs],
 })
 export default class CarExample {
-	protected cylinderGeometry = new THREE.CylinderGeometry(1, 1, 1, 32);
 	protected wheelPositions: NgtVector3[] = [
 		[-3, 0, 2],
 		[-3, 0, -2],
diff --git a/apps/examples/src/app/rapier/contact-force-events/contact-force-events.ts b/apps/examples/src/app/rapier/contact-force-events/contact-force-events.ts
@@ -1,4 +1,14 @@
-import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, output, signal, viewChild } from '@angular/core';
+import {
+	ChangeDetectionStrategy,
+	Component,
+	CUSTOM_ELEMENTS_SCHEMA,
+	DestroyRef,
+	inject,
+	output,
+	signal,
+	viewChild,
+} from '@angular/core';
+import { NgtArgs } from 'angular-three';
 import { NgtrContactForcePayload, NgtrRigidBody } from 'angular-three-rapier';
 import * as THREE from 'three';
 
@@ -55,21 +65,18 @@ export class Ball {
 	selector: 'app-floor',
 	template: `
 		<ngt-object3D rigidBody="fixed" [options]="{ colliders: 'cuboid' }">
-			<ngt-mesh [geometry]="boxGeometry">
-				<!-- TODO: rigidBody does not work with *args
-        <ngt-box-geometry *args="[10, 1, 10]" />
-        -->
+			<ngt-mesh>
+				<ngt-box-geometry *args="[10, 1, 10]" />
 				<ngt-mesh-physical-material [color]="floorColor()" />
 			</ngt-mesh>
 		</ngt-object3D>
 	`,
-	imports: [NgtrRigidBody],
+	imports: [NgtrRigidBody, NgtArgs],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class Floor {
 	protected readonly floorColor = floorColor;
-	protected boxGeometry = new THREE.BoxGeometry(10, 1, 10);
 }
 
 @Component({
@@ -85,7 +92,11 @@ export class Floor {
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export default class ContactForceEventsExample {
-	protected readonly floorColor = floorColor;
+	constructor() {
+		inject(DestroyRef).onDestroy(() => {
+			floorColor.set(startColor.clone().getHex());
+		});
+	}
 
 	protected onContactForce(totalForceMagnitude: number) {
 		const color = startColor.clone().multiplyScalar(1 - totalForceMagnitude / startForce);
diff --git a/apps/examples/src/app/rapier/kinematics/kinematics.ts b/apps/examples/src/app/rapier/kinematics/kinematics.ts
@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, viewChild } from '@angular/core';
-import { injectBeforeRender } from 'angular-three';
+import { injectBeforeRender, NgtArgs } from 'angular-three';
 import { NgtrRigidBody } from 'angular-three-rapier';
 import * as THREE from 'three';
 
@@ -60,21 +60,18 @@ export class Ball {
 				[options]="{ colliders: 'cuboid' }"
 				[position]="[0, -8, 0]"
 			>
-				<ngt-mesh castShadow receiveShadow [geometry]="boxGeometry">
-					<!--          TODO: rigidBody does not work with *args-->
-					<!--          <ngt-box-geometry *args="[40, 1, 40]" />-->
+				<ngt-mesh castShadow receiveShadow>
+					<ngt-box-geometry *args="[40, 1, 40]" />
 					<ngt-mesh-physical-material />
 				</ngt-mesh>
 			</ngt-object3D>
 		</ngt-group>
 	`,
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
-	imports: [Ball, NgtrRigidBody],
+	imports: [Ball, NgtrRigidBody, NgtArgs],
 })
 export default class KinematicsExample {
-	protected boxGeometry = new THREE.BoxGeometry(40, 1, 40);
-
 	private torusRef = viewChild.required('torus', { read: NgtrRigidBody });
 	private platformRef = viewChild.required('platform', { read: NgtrRigidBody });
 
