Skip to content

Commit db6415b

Browse files
nartcnartc
committed
docs: update routed examples
1 parent 18094f2 commit db6415b

File tree

22 files changed

+325
-184
lines changed

22 files changed

+325
-184
lines changed

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

Lines changed: 28 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,43 @@
11
import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, signal } from '@angular/core';
22
import { injectBeforeRender } from 'angular-three';
3-
import { NgtrCuboidCollider, NgtrPhysics, NgtrRigidBody } from 'angular-three-rapier';
3+
import { NgtrCuboidCollider, NgtrRigidBody } from 'angular-three-rapier';
44
import { NgtsPerspectiveCamera } from 'angular-three-soba/cameras';
5-
import { NgtsOrbitControls } from 'angular-three-soba/controls';
65

76
@Component({
7+
selector: 'app-rapier-basic',
88
template: `
9-
<ngts-perspective-camera [options]="{ makeDefault: true, position: [5, 5, 5] }" />
9+
<ngt-object3D rigidBody [options]="{ colliders: 'hull' }" [position]="[0, 5, 0]">
10+
<ngt-mesh>
11+
<ngt-torus-geometry />
12+
</ngt-mesh>
13+
</ngt-object3D>
1014
11-
<ngtr-physics [options]="{ debug: true }">
12-
<ng-template>
13-
<ngt-object3D rigidBody [options]="{ colliders: 'hull' }" [position]="[0, 5, 0]">
14-
<ngt-mesh>
15-
<ngt-torus-geometry />
16-
</ngt-mesh>
17-
</ngt-object3D>
18-
19-
@if (currentCollider() === 1) {
20-
<ngt-object3D cuboidCollider [args]="[1, 0.5, 1]" (collisionExit)="currentCollider.set(2)" />
21-
} @else if (currentCollider() === 2) {
22-
<ngt-object3D
23-
cuboidCollider
24-
[position]="[0, -1, 0]"
25-
[args]="[3, 0.5, 3]"
26-
(collisionExit)="currentCollider.set(3)"
27-
/>
28-
} @else if (currentCollider() === 3) {
29-
<ngt-object3D
30-
cuboidCollider
31-
[position]="[0, -3, 0]"
32-
[args]="[6, 0.5, 6]"
33-
(collisionExit)="currentCollider.set(4)"
34-
/>
35-
} @else {
36-
<ngt-object3D cuboidCollider [position]="[0, -6, 0]" [args]="[20, 0.5, 20]" />
37-
}
38-
</ng-template>
39-
</ngtr-physics>
40-
41-
<ngts-orbit-controls />
15+
@if (currentCollider() === 1) {
16+
<ngt-object3D cuboidCollider [args]="[1, 0.5, 1]" (collisionExit)="currentCollider.set(2)" />
17+
} @else if (currentCollider() === 2) {
18+
<ngt-object3D
19+
cuboidCollider
20+
[position]="[0, -1, 0]"
21+
[args]="[3, 0.5, 3]"
22+
(collisionExit)="currentCollider.set(3)"
23+
/>
24+
} @else if (currentCollider() === 3) {
25+
<ngt-object3D
26+
cuboidCollider
27+
[position]="[0, -3, 0]"
28+
[args]="[6, 0.5, 6]"
29+
(collisionExit)="currentCollider.set(4)"
30+
/>
31+
} @else {
32+
<ngt-object3D cuboidCollider [position]="[0, -6, 0]" [args]="[20, 0.5, 20]" />
33+
}
4234
`,
4335
schemas: [CUSTOM_ELEMENTS_SCHEMA],
4436
changeDetection: ChangeDetectionStrategy.OnPush,
4537
host: { class: 'experience-basic-rapier' },
46-
imports: [NgtrPhysics, NgtrRigidBody, NgtrCuboidCollider, NgtsOrbitControls, NgtsPerspectiveCamera],
38+
imports: [NgtrRigidBody, NgtrCuboidCollider, NgtsPerspectiveCamera],
4739
})
48-
export class Basic {
40+
export default class Basic {
4941
protected currentCollider = signal(1);
5042

5143
constructor() {

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { Color, InstancedMesh, Vector3 } from 'three';
1414
const BALLS = 1000;
1515

1616
@Component({
17+
selector: 'app-cluster-rapier',
1718
template: `
1819
<ngt-group>
1920
<ngt-object3D [instancedRigidBodies]="bodies" [options]="{ colliders: 'ball', linearDamping: 5 }">
@@ -29,7 +30,7 @@ const BALLS = 1000;
2930
host: { class: 'cluster-rapier' },
3031
imports: [NgtrInstancedRigidBodies, NgtArgs],
3132
})
32-
export class ClusterExample {
33+
export default class ClusterExample {
3334
protected readonly BALLS = BALLS;
3435
protected bodies = Array.from({ length: BALLS }, (_, index) => {
3536
return {

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

Lines changed: 0 additions & 17 deletions
This file was deleted.

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { injectSuzanne } from '../suzanne';
1515
const MAX_COUNT = 2000;
1616

1717
@Component({
18+
selector: 'app-rapier-instanced-mesh',
1819
template: `
1920
<ngt-group>
2021
@if (gltf(); as gltf) {
@@ -41,7 +42,7 @@ const MAX_COUNT = 2000;
4142
host: { class: 'instanced-mesh-rapier' },
4243
imports: [NgtrInstancedRigidBodies, NgtArgs],
4344
})
44-
export class InstancedMeshExample {
45+
export default class InstancedMeshExample {
4546
protected readonly MAX_COUNT = MAX_COUNT;
4647

4748
private instancedMeshRef = viewChild<ElementRef<InstancedMesh>>('instancedMesh');

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,7 @@ export class Prismatic {
130130
}
131131

132132
@Component({
133+
selector: 'app-rapier-joints',
133134
template: `
134135
<ngt-group>
135136
<app-rope [length]="40" />
@@ -141,4 +142,4 @@ export class Prismatic {
141142
host: { class: 'joints-rapier' },
142143
imports: [Rope, Prismatic],
143144
})
144-
export class JointsExample {}
145+
export default class JointsExample {}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,7 @@ export class Bendy {
126126
}
127127

128128
@Component({
129+
selector: 'app-rapier-performance',
129130
template: `
130131
<ngt-group>
131132
<app-bendy />
@@ -140,4 +141,4 @@ export class Bendy {
140141
host: { class: 'performance-rapier' },
141142
imports: [Bendy, MonkeySwarm],
142143
})
143-
export class PerformanceExample {}
144+
export default class PerformanceExample {}

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

Lines changed: 36 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,43 @@ import { Routes } from '@angular/router';
22

33
const routes: Routes = [
44
{
5-
path: ':scene',
5+
path: '',
66
loadComponent: () => import('./wrapper'),
7+
children: [
8+
{
9+
path: 'basic',
10+
loadComponent: () => import('./basic/basic'),
11+
},
12+
{
13+
path: 'rope-joint',
14+
loadComponent: () => import('./rope-joint/rope-joint'),
15+
},
16+
{
17+
path: 'spring',
18+
loadComponent: () => import('./spring/spring'),
19+
},
20+
{
21+
path: 'cluster',
22+
loadComponent: () => import('./cluster/cluster'),
23+
},
24+
{
25+
path: 'instanced-mesh',
26+
loadComponent: () => import('./instanced-mesh/instanced-mesh'),
27+
},
28+
{
29+
path: 'joints',
30+
loadComponent: () => import('./joints/joints'),
31+
},
32+
{
33+
path: 'performance',
34+
loadComponent: () => import('./performance/performance'),
35+
},
36+
{
37+
path: '',
38+
redirectTo: 'basic',
39+
pathMatch: 'full',
40+
},
41+
],
742
data: {
843
credits: {
944
title: 'React Three Rapier',
@@ -12,11 +47,6 @@ const routes: Routes = [
1247
},
1348
},
1449
},
15-
{
16-
path: '',
17-
redirectTo: 'basic',
18-
pathMatch: 'full',
19-
},
2050
];
2151

2252
export default routes;

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@ import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
33
import { extend } from 'angular-three';
44
import * as THREE from 'three';
55

6-
import { SCENES_MAP } from './constants';
7-
86
extend(THREE);
97

108
@Component({
@@ -34,5 +32,5 @@ extend(THREE);
3432
host: { class: 'rapier' },
3533
})
3634
export default class Rapier {
37-
protected examples = Object.keys(SCENES_MAP);
35+
protected examples = ['basic', 'rope-joint', 'spring', 'cluster', 'instanced-mesh', 'joints', 'performance'];
3836
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,7 @@ export class RopeJoint {
111111
}
112112

113113
@Component({
114+
selector: 'app-rapier-rope-joint',
114115
template: `
115116
<ngt-group [scale]="3">
116117
<app-floor />
@@ -123,4 +124,4 @@ export class RopeJoint {
123124
host: { class: 'rope-joint-rapier' },
124125
imports: [Floor, BoxWall, RopeJoint],
125126
})
126-
export class RopeJointExample {}
127+
export default class RopeJointExample {}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@ export class BallSpring {
9090
}
9191

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

‎apps/examples/src/app/rapier/wrapper-default.ts

Lines changed: 25 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,8 @@
1-
import { NgComponentOutlet } from '@angular/common';
2-
import { ChangeDetectionStrategy, Component, computed, CUSTOM_ELEMENTS_SCHEMA, signal } from '@angular/core';
1+
import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, input } from '@angular/core';
2+
import { RouterOutlet } from '@angular/router';
33
import { NgtrPhysics, NgtrRigidBody } from 'angular-three-rapier';
44
import { NgtsOrbitControls } from 'angular-three-soba/controls';
55
import { NgtsEnvironment } from 'angular-three-soba/staging';
6-
import { injectParams } from 'ngxtension/inject-params';
7-
import { SCENES_MAP } from './constants';
8-
9-
export const debug = signal(false);
10-
export const interpolate = signal(true);
11-
export const paused = signal(false);
126

137
@Component({
148
selector: 'app-floor',
@@ -36,41 +30,37 @@ export class Floor {}
3630
@Component({
3731
selector: 'app-rapier-wrapper-default',
3832
template: `
39-
@if (scene() === 'basic') {
40-
<ng-container *ngComponentOutlet="component()" />
41-
} @else {
42-
<ngtr-physics [options]="{ debug: debug(), interpolate: interpolate(), paused: paused() }">
43-
<ng-template>
44-
<ngt-directional-light castShadow [position]="10">
45-
<ngt-value [rawValue]="-40" attach="shadow.camera.bottom" />
46-
<ngt-value [rawValue]="40" attach="shadow.camera.top" />
47-
<ngt-value [rawValue]="-40" attach="shadow.camera.left" />
48-
<ngt-value [rawValue]="40" attach="shadow.camera.right" />
49-
<ngt-value [rawValue]="1024" attach="shadow.mapSize.width" />
50-
<ngt-value [rawValue]="-0.0001" attach="shadow.bias" />
51-
</ngt-directional-light>
33+
<ngtr-physics [options]="{ debug: debug(), interpolate: interpolate(), paused: paused() }">
34+
<ng-template>
35+
<ngt-directional-light
36+
castShadow
37+
[position]="10"
38+
[shadow.camera.bottom]="-40"
39+
[shadow.camera.top]="40"
40+
[shadow.camera.left]="-40"
41+
[shadow.camera.right]="40"
42+
[shadow.mapSize.width]="1024"
43+
[shadow.bias]="-0.0001"
44+
/>
5245
53-
<ngts-environment [options]="{ preset: 'apartment' }" />
54-
<ngts-orbit-controls />
46+
<ngts-environment [options]="{ preset: 'apartment' }" />
47+
<ngts-orbit-controls />
5548
56-
<ng-container *ngComponentOutlet="component()" />
49+
<router-outlet #o="outlet" />
5750
51+
@if (o.activatedRoute.snapshot.url[0]?.path !== 'basic') {
5852
<app-floor />
59-
</ng-template>
60-
</ngtr-physics>
61-
}
53+
}
54+
</ng-template>
55+
</ngtr-physics>
6256
`,
6357
schemas: [CUSTOM_ELEMENTS_SCHEMA],
6458
changeDetection: ChangeDetectionStrategy.OnPush,
65-
imports: [NgtrPhysics, NgtsEnvironment, NgtsOrbitControls, NgComponentOutlet, Floor],
59+
imports: [NgtrPhysics, NgtsEnvironment, NgtsOrbitControls, Floor, RouterOutlet],
6660
host: { class: 'rapier-wrapper-default' },
6761
})
6862
export class RapierWrapperDefault {
69-
private params = injectParams();
70-
protected scene = computed(() => this.params()['scene'] as keyof typeof SCENES_MAP);
71-
protected component = computed(() => SCENES_MAP[this.scene()]);
72-
73-
protected debug = debug;
74-
protected interpolate = interpolate;
75-
protected paused = paused;
63+
debug = input(true);
64+
interpolate = input(false);
65+
paused = input(false);
7666
}

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

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
1-
import { ChangeDetectionStrategy, Component } from '@angular/core';
1+
import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
2+
import { NgtTweakCheckbox, NgtTweakPane } from 'angular-three-tweakpane';
23
import { NgtCanvas } from 'angular-three/dom';
3-
import { ToggleButton } from '../toggle-button';
4-
import { debug, interpolate, paused, RapierWrapperDefault } from './wrapper-default';
4+
import { RapierWrapperDefault } from './wrapper-default';
55

66
@Component({
77
template: `
88
<ngt-canvas shadows [dpr]="1">
9-
<app-rapier-wrapper-default *canvasContent />
9+
<ng-template canvasContent>
10+
<app-rapier-wrapper-default [debug]="debug()" [interpolate]="interpolate()" [paused]="paused()" />
11+
<ngt-tweak-pane title="Rapier" [expanded]="true">
12+
<ngt-tweak-checkbox [(value)]="debug" label="debug" />
13+
<ngt-tweak-checkbox [(value)]="interpolate" label="interpolate" />
14+
<ngt-tweak-checkbox [(value)]="paused" label="paused" />
15+
</ngt-tweak-pane>
16+
</ng-template>
1017
</ngt-canvas>
11-
<div class="absolute top-2 right-2 font-mono flex gap-4">
12-
<button [(toggleButton)]="debug">debug</button>
13-
<button [(toggleButton)]="interpolate">interpolate</button>
14-
<button [(toggleButton)]="paused">paused</button>
15-
</div>
1618
`,
1719
changeDetection: ChangeDetectionStrategy.OnPush,
18-
imports: [NgtCanvas, ToggleButton, RapierWrapperDefault],
20+
imports: [NgtCanvas, RapierWrapperDefault, NgtTweakPane, NgtTweakCheckbox],
1921
})
2022
export default class RapierWrapper {
21-
protected sceneGraph = RapierWrapperDefault;
22-
23-
protected debug = debug;
24-
protected interpolate = interpolate;
25-
protected paused = paused;
23+
protected debug = signal(true);
24+
protected interpolate = signal(false);
25+
protected paused = signal(false);
2626
}

0 commit comments

Comments
 (0)