Skip to content

Commit 034f1fb

Browse files
nartcnartc
committed
docs: add credits to all examples
1 parent e7ada67 commit 034f1fb

File tree

9 files changed

+210
-52
lines changed

9 files changed

+210
-52
lines changed

‎apps/kitchen-sink/src/app/app.component.ts‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Component, computed, inject } from '@angular/core';
22
import { toSignal } from '@angular/core/rxjs-interop';
3-
import { NavigationEnd, Router, RouterOutlet } from '@angular/router';
3+
import { ActivatedRoute, ActivationEnd, NavigationEnd, Router, RouterOutlet } from '@angular/router';
44
import { filter } from 'rxjs';
55

66
@Component({
@@ -37,13 +37,22 @@ import { filter } from 'rxjs';
3737
</a>
3838
</div>
3939
</div>
40+
41+
@if (currentActivatedRouteCredits(); as credits) {
42+
<div class="absolute top-2 right-2 font-mono" [class]="credits.class">
43+
Credits:
44+
<a class="underline" [href]="credits.link" target="_blank" rel="noreferrer">{{ credits.title }}</a>
45+
</div>
46+
}
4047
`,
4148
imports: [RouterOutlet],
4249
})
4350
export class AppComponent {
4451
private router = inject(Router);
4552

4653
private navigationEnd = toSignal(this.router.events.pipe(filter((event) => event instanceof NavigationEnd)));
54+
private activationEnd = toSignal(this.router.events.pipe(filter((event) => event instanceof ActivationEnd)));
55+
private route = inject(ActivatedRoute);
4756

4857
currentRoute = computed(() => {
4958
const navigationEnd = this.navigationEnd();
@@ -59,6 +68,20 @@ export class AppComponent {
5968
return `https://github.com/angular-threejs/angular-three/tree/main/apps/kitchen-sink/src/app/${paths.join('/')}`;
6069
});
6170

71+
currentActivatedRouteCredits = computed(() => {
72+
const activationEnd = this.activationEnd();
73+
if (!activationEnd) return null;
74+
75+
let deepestChild = activationEnd.snapshot;
76+
while (deepestChild && deepestChild.firstChild) {
77+
deepestChild = deepestChild.firstChild;
78+
}
79+
80+
if (!deepestChild) return null;
81+
82+
return deepestChild.data['credits'] as { title: string; link: string; class: string };
83+
});
84+
6285
onChange(event: Event) {
6386
const target = event.target as HTMLSelectElement;
6487
void this.router.navigate([target.value]);

‎apps/kitchen-sink/src/app/cannon/cannon.routes.ts‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,26 +8,64 @@ const routes: Routes = [
88
{
99
path: 'kinematic-cube',
1010
loadComponent: () => import('./kinematic-cube/kinematic-cube'),
11+
data: {
12+
credits: {
13+
title: 'Kinematic Cube',
14+
link: 'https://cannon.pmnd.rs/#/demo/KinematicCube',
15+
},
16+
},
1117
},
1218
{
1319
path: 'compound',
1420
loadComponent: () => import('./compound/compound'),
21+
data: {
22+
credits: {
23+
title: 'Compound Body',
24+
link: 'https://cannon.pmnd.rs/#/demo/CompoundBody',
25+
},
26+
},
1527
},
1628
{
1729
path: 'chain',
1830
loadComponent: () => import('./chain/chain'),
31+
data: {
32+
credits: {
33+
title: 'Chain',
34+
link: 'https://cannon.pmnd.rs/#/demo/Chain',
35+
class: 'text-white',
36+
},
37+
},
1938
},
2039
{
2140
path: 'cube-heap',
2241
loadComponent: () => import('./cube-heap/cube-heap'),
42+
data: {
43+
credits: {
44+
title: 'Cube Heap',
45+
link: 'https://cannon.pmnd.rs/#/demo/CubeHeap',
46+
},
47+
},
2348
},
2449
{
2550
path: 'convexpolyhedron',
2651
loadComponent: () => import('./convexpolyhedron/convexpolyhedron'),
52+
data: {
53+
credits: {
54+
title: 'Convex Polyhedron',
55+
link: 'https://cannon.pmnd.rs/#/demo/ConvexPolyhedron',
56+
},
57+
},
2758
},
2859
{
2960
path: 'monday-morning',
3061
loadComponent: () => import('./monday-morning/monday-morning'),
62+
data: {
63+
credits: {
64+
title: 'Monday Morning',
65+
link: 'https://cannon.pmnd.rs/#/demo/MondayMorning',
66+
class: 'text-white',
67+
},
68+
},
3169
},
3270
{
3371
path: '',

‎apps/kitchen-sink/src/app/misc/misc.routes.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,24 @@ const routes: Routes = [
44
{
55
path: 'svg-renderer',
66
loadComponent: () => import('./svg-renderer/svg-renderer'),
7+
data: {
8+
credits: {
9+
title: 'SVG Renderer w/ Lines',
10+
link: 'https://threejs.org/examples/#svg_lines',
11+
class: 'text-white',
12+
},
13+
},
714
},
815
{
916
path: 'aviator',
1017
loadComponent: () => import('./aviator/aviator'),
18+
data: {
19+
credits: {
20+
title: 'The Aviator',
21+
link: 'https://github.com/yakudoo/TheAviator',
22+
class: 'text-white',
23+
},
24+
},
1125
},
1226
{
1327
path: '',

‎apps/kitchen-sink/src/app/rapier/rapier.routes.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,13 @@ const routes: Routes = [
44
{
55
path: ':scene',
66
loadComponent: () => import('./wrapper'),
7+
data: {
8+
credits: {
9+
title: 'React Three Rapier',
10+
link: 'https://react-three-rapier.pmnd.rs',
11+
class: 'left-2',
12+
},
13+
},
714
},
815
{
916
path: '',

‎apps/kitchen-sink/src/app/soba/bruno-simons-20k/bruno-simons-20k.ts‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,8 @@ import { debug, Experience } from './experience';
1414
[camera]="{ position: [-30, 35, -15], near: 30, far: 55, fov: 12 }"
1515
/>
1616
17-
<div class="absolute top-2 right-2 flex flex-col gap-2">
18-
<code>
19-
Credits:
20-
<a class="underline" href="https://pmndrs.github.io/examples/demos/bruno-simons-20k-challenge" target="_blank">
21-
Bruno Simons 20K Challenge with R3F
22-
</a>
23-
</code>
24-
<div class="flex gap-2 items-center">
25-
<button [(toggleButton)]="debug">Toggle debug</button>
26-
</div>
17+
<div class="absolute top-10 right-2">
18+
<button [(toggleButton)]="debug">Toggle debug</button>
2719
</div>
2820
`,
2921
changeDetection: ChangeDetectionStrategy.OnPush,

‎apps/kitchen-sink/src/app/soba/inverted-stencil-buffer/inverted-stencil-buffer.ts‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,6 @@ import { Experience, invert, logo } from './experience';
1919
<option value="nx-cloud">Nx Cloud</option>
2020
</select>
2121
</div>
22-
23-
<a
24-
class="absolute top-2 left-2 font-mono underline"
25-
href="https://pmndrs.github.io/examples/demos/inverted-stencil-buffer"
26-
target="_blank"
27-
>
28-
credit: R3F Inverted Stencil Buffer
29-
</a>
3022
`,
3123
host: { class: 'inverted-stencil-buffer-soba' },
3224
changeDetection: ChangeDetectionStrategy.OnPush,

‎apps/kitchen-sink/src/app/soba/portal-shapes/letter.ts‎

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@ import { NgtsCenter, NgtsRenderTexture, NgtsRenderTextureContent } from 'angular
2424
import { Group } from 'three';
2525

2626
import { NgTemplateOutlet } from '@angular/common';
27-
import CameraControls from 'camera-controls';
2827
import boldFont from './bold.blob';
2928

3029
@Component({
@@ -36,7 +35,6 @@ import boldFont from './bold.blob';
3635
[options]="{ restitution: 0.1, colliders: 'cuboid' }"
3736
[position]="position()"
3837
[rotation]="rotation()"
39-
(pointermissed)="onPointerMissed($any($event))"
4038
>
4139
<ngts-center>
4240
<ngts-text-3d
@@ -56,6 +54,7 @@ import boldFont from './bold.blob';
5654
bevelOffset: 0,
5755
}"
5856
(dblclick)="onDblClick($any($event))"
57+
(pointermissed)="onPointerMissed($any($event))"
5958
>
6059
<ngts-mesh-transmission-material
6160
[options]="$any({ clearcoat: 1, samples: 3, thickness: 40, chromaticAberration: 0.25, anisotropy: 0.4 })"
@@ -120,20 +119,20 @@ export class Letter {
120119
}
121120

122121
onDblClick(event: NgtThreeEvent<MouseEvent>) {
123-
event.stopPropagation();
124-
const controls = this.controls() as CameraControls;
125-
if (!controls) return;
126-
127-
// TODO: not sure why this is not working as expected.
128-
// This is supposed to zoom to the center of the letter, but it's always zooming to the center of the scene
129-
void controls.fitToBox(this.centerRef().groupRef().nativeElement, true);
122+
// event.stopPropagation();
123+
// const controls = this.controls() as CameraControls;
124+
// if (!controls) return;
125+
//
126+
// // TODO: not sure why this is not working as expected.
127+
// // This is supposed to zoom to the center of the letter, but it's always zooming to the center of the scene
128+
// void controls.fitToBox(this.centerRef().groupRef().nativeElement, true);
130129
}
131130

132131
onPointerMissed(event: NgtThreeEvent<MouseEvent>) {
133-
event.stopPropagation();
134-
const controls = this.controls() as CameraControls;
135-
if (!controls) return;
136-
137-
void controls.reset(true);
132+
// event.stopPropagation();
133+
// const controls = this.controls() as CameraControls;
134+
// if (!controls) return;
135+
//
136+
// void controls.reset(true);
138137
}
139138
}

‎apps/kitchen-sink/src/app/soba/simple-sound-analyser/overlay.ts‎

Lines changed: 11 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -26,27 +26,19 @@ import { tracks, zoomIndex, zoomTrack } from './tracks';
2626
}
2727
</div>
2828
<div
29-
class="absolute top-2 left-0 flex w-full items-center justify-between px-2 opacity-0"
29+
class="absolute top-2 left-0 flex w-full px-2 opacity-0 flex-col gap-2 text-black"
3030
[class.opacity-100]="audioStore.clicked()"
3131
>
32-
<div class="flex flex-col gap-2 text-black">
33-
<code>
34-
Camera currently reacts to:
35-
<button
36-
class="rounded border border-b-4 border-transparent border-b-gray-400 bg-white px-4 py-1 text-black"
37-
(click)="onChangeZoomTrack()"
38-
>
39-
{{ zoomTrack() }}
40-
</button>
41-
</code>
42-
<code>
43-
credits:
44-
<a class="underline" href="https://pmndrs.github.io/examples/demos/simple-audio-analyser" target="_blank">
45-
R3F Simple Sound Analyser
46-
</a>
47-
</code>
48-
</div>
49-
<code class="text-black">Triplet After Triplet · SEGA · Hidenori Shoji</code>
32+
<code>
33+
Camera currently reacts to:
34+
<button
35+
class="rounded border border-b-4 border-transparent border-b-gray-400 bg-white px-4 py-1"
36+
(click)="onChangeZoomTrack()"
37+
>
38+
{{ zoomTrack() }}
39+
</button>
40+
</code>
41+
<code>Triplet After Triplet · SEGA · Hidenori Shoji</code>
5042
</div>
5143
`,
5244
changeDetection: ChangeDetectionStrategy.OnPush,

0 commit comments

Comments
 (0)