docs: update routed examples

Author: nartc

apps/examples/src/app/rapier/basic/basic.ts

@@ -1,51 +1,43 @@
 import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, signal } from '@angular/core';
 import { injectBeforeRender } from 'angular-three';
-import { NgtrCuboidCollider, NgtrPhysics, NgtrRigidBody } from 'angular-three-rapier';
+import { NgtrCuboidCollider, NgtrRigidBody } from 'angular-three-rapier';
 import { NgtsPerspectiveCamera } from 'angular-three-soba/cameras';
-import { NgtsOrbitControls } from 'angular-three-soba/controls';
 
 @Component({
+	selector: 'app-rapier-basic',
 	template: `
-		<ngts-perspective-camera [options]="{ makeDefault: true, position: [5, 5, 5] }" />
+		<ngt-object3D rigidBody [options]="{ colliders: 'hull' }" [position]="[0, 5, 0]">
+			<ngt-mesh>
+				<ngt-torus-geometry />
+			</ngt-mesh>
+		</ngt-object3D>
 
-		<ngtr-physics [options]="{ debug: true }">
-			<ng-template>
-				<ngt-object3D rigidBody [options]="{ colliders: 'hull' }" [position]="[0, 5, 0]">
-					<ngt-mesh>
-						<ngt-torus-geometry />
-					</ngt-mesh>
-				</ngt-object3D>
-
-				@if (currentCollider() === 1) {
-					<ngt-object3D cuboidCollider [args]="[1, 0.5, 1]" (collisionExit)="currentCollider.set(2)" />
-				} @else if (currentCollider() === 2) {
-					<ngt-object3D
-						cuboidCollider
-						[position]="[0, -1, 0]"
-						[args]="[3, 0.5, 3]"
-						(collisionExit)="currentCollider.set(3)"
-					/>
-				} @else if (currentCollider() === 3) {
-					<ngt-object3D
-						cuboidCollider
-						[position]="[0, -3, 0]"
-						[args]="[6, 0.5, 6]"
-						(collisionExit)="currentCollider.set(4)"
-					/>
-				} @else {
-					<ngt-object3D cuboidCollider [position]="[0, -6, 0]" [args]="[20, 0.5, 20]" />
-				}
-			</ng-template>
-		</ngtr-physics>
-
-		<ngts-orbit-controls />
+		@if (currentCollider() === 1) {
+			<ngt-object3D cuboidCollider [args]="[1, 0.5, 1]" (collisionExit)="currentCollider.set(2)" />
+		} @else if (currentCollider() === 2) {
+			<ngt-object3D
+				cuboidCollider
+				[position]="[0, -1, 0]"
+				[args]="[3, 0.5, 3]"
+				(collisionExit)="currentCollider.set(3)"
+			/>
+		} @else if (currentCollider() === 3) {
+			<ngt-object3D
+				cuboidCollider
+				[position]="[0, -3, 0]"
+				[args]="[6, 0.5, 6]"
+				(collisionExit)="currentCollider.set(4)"
+			/>
+		} @else {
+			<ngt-object3D cuboidCollider [position]="[0, -6, 0]" [args]="[20, 0.5, 20]" />
+		}
 	`,
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: { class: 'experience-basic-rapier' },
-	imports: [NgtrPhysics, NgtrRigidBody, NgtrCuboidCollider, NgtsOrbitControls, NgtsPerspectiveCamera],
+	imports: [NgtrRigidBody, NgtrCuboidCollider, NgtsPerspectiveCamera],
 })
-export class Basic {
+export default class Basic {
 	protected currentCollider = signal(1);
 
 	constructor() {

apps/examples/src/app/rapier/cluster/cluster.ts

@@ -14,6 +14,7 @@ import { Color, InstancedMesh, Vector3 } from 'three';
 const BALLS = 1000;
 
 @Component({
+	selector: 'app-cluster-rapier',
 	template: `
 		<ngt-group>
 			<ngt-object3D [instancedRigidBodies]="bodies" [options]="{ colliders: 'ball', linearDamping: 5 }">
@@ -29,7 +30,7 @@ const BALLS = 1000;
 	host: { class: 'cluster-rapier' },
 	imports: [NgtrInstancedRigidBodies, NgtArgs],
 })
-export class ClusterExample {
+export default class ClusterExample {
 	protected readonly BALLS = BALLS;
 	protected bodies = Array.from({ length: BALLS }, (_, index) => {
 		return {

apps/examples/src/app/rapier/constants.ts

@@ -15,6 +15,7 @@ import { injectSuzanne } from '../suzanne';
 const MAX_COUNT = 2000;
 
 @Component({
+	selector: 'app-rapier-instanced-mesh',
 	template: `
 		<ngt-group>
 			@if (gltf(); as gltf) {
@@ -41,7 +42,7 @@ const MAX_COUNT = 2000;
 	host: { class: 'instanced-mesh-rapier' },
 	imports: [NgtrInstancedRigidBodies, NgtArgs],
 })
-export class InstancedMeshExample {
+export default class InstancedMeshExample {
 	protected readonly MAX_COUNT = MAX_COUNT;
 
 	private instancedMeshRef = viewChild<ElementRef<InstancedMesh>>('instancedMesh');

apps/examples/src/app/rapier/instanced-mesh/instanced-mesh.ts

@@ -130,6 +130,7 @@ export class Prismatic {
 }
 
 @Component({
+	selector: 'app-rapier-joints',
 	template: `
 		<ngt-group>
 			<app-rope [length]="40" />
@@ -141,4 +142,4 @@ export class Prismatic {
 	host: { class: 'joints-rapier' },
 	imports: [Rope, Prismatic],
 })
-export class JointsExample {}
+export default class JointsExample {}

apps/examples/src/app/rapier/joints/joints.ts

@@ -126,6 +126,7 @@ export class Bendy {
 }
 
 @Component({
+	selector: 'app-rapier-performance',
 	template: `
 		<ngt-group>
 			<app-bendy />
@@ -140,4 +141,4 @@ export class Bendy {
 	host: { class: 'performance-rapier' },
 	imports: [Bendy, MonkeySwarm],
 })
-export class PerformanceExample {}
+export default class PerformanceExample {}

apps/examples/src/app/rapier/performance/performance.ts

@@ -2,8 +2,43 @@ import { Routes } from '@angular/router';
 
 const routes: Routes = [
 	{
-		path: ':scene',
+		path: '',
 		loadComponent: () => import('./wrapper'),
+		children: [
+			{
+				path: 'basic',
+				loadComponent: () => import('./basic/basic'),
+			},
+			{
+				path: 'rope-joint',
+				loadComponent: () => import('./rope-joint/rope-joint'),
+			},
+			{
+				path: 'spring',
+				loadComponent: () => import('./spring/spring'),
+			},
+			{
+				path: 'cluster',
+				loadComponent: () => import('./cluster/cluster'),
+			},
+			{
+				path: 'instanced-mesh',
+				loadComponent: () => import('./instanced-mesh/instanced-mesh'),
+			},
+			{
+				path: 'joints',
+				loadComponent: () => import('./joints/joints'),
+			},
+			{
+				path: 'performance',
+				loadComponent: () => import('./performance/performance'),
+			},
+			{
+				path: '',
+				redirectTo: 'basic',
+				pathMatch: 'full',
+			},
+		],
 		data: {
 			credits: {
 				title: 'React Three Rapier',
@@ -12,11 +47,6 @@ const routes: Routes = [
 			},
 		},
 	},
-	{
-		path: '',
-		redirectTo: 'basic',
-		pathMatch: 'full',
-	},
 ];
 
 export default routes;

apps/examples/src/app/rapier/rapier.routes.ts

@@ -3,8 +3,6 @@ import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 import { extend } from 'angular-three';
 import * as THREE from 'three';
 
-import { SCENES_MAP } from './constants';
-
 extend(THREE);
 
 @Component({
@@ -34,5 +32,5 @@ extend(THREE);
 	host: { class: 'rapier' },
 })
 export default class Rapier {
-	protected examples = Object.keys(SCENES_MAP);
+	protected examples = ['basic', 'rope-joint', 'spring', 'cluster', 'instanced-mesh', 'joints', 'performance'];
 }

apps/examples/src/app/rapier/rapier.ts

@@ -111,6 +111,7 @@ export class RopeJoint {
 }
 
 @Component({
+	selector: 'app-rapier-rope-joint',
 	template: `
 		<ngt-group [scale]="3">
 			<app-floor />
@@ -123,4 +124,4 @@ export class RopeJoint {
 	host: { class: 'rope-joint-rapier' },
 	imports: [Floor, BoxWall, RopeJoint],
 })
-export class RopeJointExample {}
+export default class RopeJointExample {}

apps/examples/src/app/rapier/rope-joint/rope-joint.ts

@@ -90,6 +90,7 @@ export class BallSpring {
 }
 
 @Component({
+	selector: 'app-rapier-spring',
 	template: `
 		<ngt-object3D #floor="rigidBody" rigidBody="fixed" [position]="[0, 0, 0]" />
 
@@ -114,7 +115,7 @@ export class BallSpring {
 	host: { class: 'spring-rapier' },
 	imports: [NgtrRigidBody, BallSpring, Box],
 })
-export class SpringExample {
+export default class SpringExample {
 	protected readonly COLORS_ARR = ['#335C67', '#FFF3B0', '#E09F3E', '#9E2A2B', '#540B0E'];
 	protected balls = Array.from({ length: 30 }, (_, i) => [-20 + 1.5 * (i + 1), 7.5, -30] as [number, number, number]);
 }