Skip to content

Commit 04e95c4

Browse files
nartcnartc
committed
docs: update routed example
1 parent 9d05d0c commit 04e95c4

File tree

14 files changed

+199
-69
lines changed

14 files changed

+199
-69
lines changed

‎apps/kitchen-sink/project.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,8 @@
2323
"styles": ["apps/kitchen-sink/src/styles.css"],
2424
"scripts": [],
2525
"loader": {
26-
".blob": "file"
26+
".blob": "file",
27+
".glb": "file"
2728
}
2829
},
2930
"configurations": {

‎apps/kitchen-sink/public/bomb-gp.glb

157 KB
Binary file not shown.

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

Lines changed: 1 addition & 2 deletions
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 { ActivatedRoute, ActivationEnd, NavigationEnd, Router, RouterOutlet } from '@angular/router';
3+
import { ActivationEnd, NavigationEnd, Router, RouterOutlet } from '@angular/router';
44
import { filter } from 'rxjs';
55

66
@Component({
@@ -52,7 +52,6 @@ export class AppComponent {
5252

5353
private navigationEnd = toSignal(this.router.events.pipe(filter((event) => event instanceof NavigationEnd)));
5454
private activationEnd = toSignal(this.router.events.pipe(filter((event) => event instanceof ActivationEnd)));
55-
private route = inject(ActivatedRoute);
5655

5756
currentRoute = computed(() => {
5857
const navigationEnd = this.navigationEnd();

‎apps/kitchen-sink/src/app/routed/blue-cube.ts

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

‎apps/kitchen-sink/src/app/routed/bomb-gp.glb

157 KB
Binary file not shown.

‎apps/kitchen-sink/src/app/routed/bomb.ts

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, Signal } from '@angular/core';
2+
import { injectGLTF } from 'angular-three-soba/loaders';
3+
import { NgtsMeshTransmissionMaterial } from 'angular-three-soba/materials';
4+
import { Mesh } from 'three';
5+
import { GLTF } from 'three-stdlib';
6+
7+
import bombUrl from './bomb-gp.glb';
8+
9+
interface BombGLTF extends GLTF {
10+
nodes: {
11+
Little_Boy_Little_Boy_Material_0: Mesh;
12+
};
13+
}
14+
15+
@Component({
16+
selector: 'app-bomb',
17+
template: `
18+
@if (gltf(); as gltf) {
19+
<ngt-mesh
20+
[receiveShadow]="true"
21+
[castShadow]="true"
22+
[scale]="0.7"
23+
[geometry]="gltf.nodes.Little_Boy_Little_Boy_Material_0.geometry"
24+
>
25+
<ngts-mesh-transmission-material [options]="{ backside: true, thickness: 5, backsideThickness: 10 }" />
26+
</ngt-mesh>
27+
}
28+
`,
29+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
30+
changeDetection: ChangeDetectionStrategy.OnPush,
31+
imports: [NgtsMeshTransmissionMaterial],
32+
})
33+
export default class Bomb {
34+
protected gltf = injectGLTF(() => bombUrl) as Signal<BombGLTF | null>;
35+
}

‎apps/kitchen-sink/src/app/routed/current-route.ts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { ChangeDetectionStrategy, Component, input } from '@angular/core';
2+
import { NgtVector3 } from 'angular-three';
3+
import { NgtsText } from 'angular-three-soba/abstractions';
4+
5+
@Component({
6+
selector: 'app-current-route',
7+
template: `
8+
<ngts-text
9+
[text]="text()"
10+
[options]="{ fontSize: 14, color: 'black', letterSpacing: -0.025, position: position() }"
11+
/>
12+
`,
13+
changeDetection: ChangeDetectionStrategy.OnPush,
14+
imports: [NgtsText],
15+
})
16+
export class CurrentRoute {
17+
position = input<NgtVector3>([0, 0, 0]);
18+
text = input.required<string>();
19+
}

‎apps/kitchen-sink/src/app/routed/custom-routed-scene.ts

Lines changed: 78 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,83 @@
1-
import { Component } from '@angular/core';
2-
import { NgtRouterOutlet } from 'angular-three';
3-
import { NgtsCameraControls } from 'angular-three-soba/controls';
1+
import { Component, CUSTOM_ELEMENTS_SCHEMA, inject } from '@angular/core';
2+
import { toSignal } from '@angular/core/rxjs-interop';
3+
import { NavigationEnd, Router } from '@angular/router';
4+
import { injectBeforeRender, NgtArgs, NgtRouterOutlet, ROUTED_SCENE } from 'angular-three';
5+
import { NgtpEffectComposer, NgtpTiltShift2 } from 'angular-three-postprocessing';
6+
import { NgtpN8AO } from 'angular-three-postprocessing/n8ao';
7+
import { NgtsContactShadows, NgtsEnvironment, NgtsFloat, NgtsLightformer } from 'angular-three-soba/staging';
8+
import { easing } from 'maath';
9+
import { filter, map, startWith } from 'rxjs';
10+
import { CurrentRoute } from './current-route';
411

512
@Component({
613
template: `
7-
<ngt-router-outlet />
8-
<ngts-camera-controls />
14+
<ngt-color *args="['#e0e0e0']" attach="background" />
15+
<ngt-spot-light
16+
[position]="[20, 20, 10]"
17+
[penumbra]="1"
18+
[castShadow]="true"
19+
[angle]="0.2"
20+
[decay]="0"
21+
[intensity]="Math.PI"
22+
/>
23+
24+
<app-current-route [position]="[0, 0, -10]" [text]="currentRoute()" />
25+
26+
<ngts-float [options]="{ floatIntensity: 2 }">
27+
<ngt-router-outlet />
28+
</ngts-float>
29+
30+
<ngts-contact-shadows [options]="{ scale: 100, position: [0, -7.5, 0], blur: 1, far: 100, opacity: 0.85 }" />
31+
<ngts-environment [options]="{ preset: 'city' }">
32+
<ngts-lightformer
33+
*
34+
[options]="{ position: [10, 5, 0], scale: [10, 50, 1], intensity: Math.PI * 8, target: [0, 0, 0] }"
35+
/>
36+
</ngts-environment>
37+
38+
<ngtp-effect-composer [options]="{ enableNormalPass: false }">
39+
<ngtp-n8ao [options]="{ aoRadius: 1, intensity: Math.PI * 2 }" />
40+
<ngtp-tilt-shift2 [options]="{ blur: 0.2 }" />
41+
</ngtp-effect-composer>
942
`,
10-
imports: [NgtRouterOutlet, NgtsCameraControls],
43+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
44+
imports: [
45+
NgtRouterOutlet,
46+
NgtArgs,
47+
NgtsFloat,
48+
CurrentRoute,
49+
NgtsContactShadows,
50+
NgtsEnvironment,
51+
NgtsLightformer,
52+
NgtpEffectComposer,
53+
NgtpN8AO,
54+
NgtpTiltShift2,
55+
],
1156
})
12-
export class CustomRoutedScene {}
57+
export class CustomRoutedScene {
58+
static [ROUTED_SCENE] = true;
59+
60+
protected readonly Math = Math;
61+
62+
private router = inject(Router);
63+
protected currentRoute = toSignal(
64+
this.router.events.pipe(
65+
filter((ev): ev is NavigationEnd => ev instanceof NavigationEnd),
66+
map((ev) => ev.urlAfterRedirects.split('/routed').at(-1) as string),
67+
startWith(this.router.url.split('/routed').at(-1) as string),
68+
),
69+
{ initialValue: '/knot' },
70+
);
71+
72+
constructor() {
73+
injectBeforeRender(({ camera, pointer, delta }) => {
74+
easing.damp3(
75+
camera.position,
76+
[Math.sin(-pointer.x) * 5, pointer.y * 3.5, 15 + Math.cos(pointer.x) * 10],
77+
0.2,
78+
delta,
79+
);
80+
camera.lookAt(0, 0, 0);
81+
});
82+
}
83+
}

‎apps/kitchen-sink/src/app/routed/knot.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2+
import { NgtArgs } from 'angular-three';
3+
import { NgtsMeshTransmissionMaterial } from 'angular-three-soba/materials';
4+
5+
@Component({
6+
selector: 'app-knot',
7+
template: `
8+
<ngt-mesh [receiveShadow]="true" [castShadow]="true">
9+
<ngt-torus-knot-geometry *args="[3, 1, 256, 32]" />
10+
<ngts-mesh-transmission-material [options]="{ backside: true, backsideThickness: 5, thickness: 2 }" />
11+
</ngt-mesh>
12+
`,
13+
imports: [NgtArgs, NgtsMeshTransmissionMaterial],
14+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
15+
changeDetection: ChangeDetectionStrategy.OnPush,
16+
})
17+
export default class Knot {}

‎apps/kitchen-sink/src/app/routed/red-cube.ts

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

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

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,20 @@ import { Routes } from '@angular/router';
22

33
const routes: Routes = [
44
{
5-
path: 'red',
6-
loadComponent: () => import('./red-cube'),
5+
path: 'knot',
6+
loadComponent: () => import('./knot'),
77
},
88
{
9-
path: 'blue',
10-
loadComponent: () => import('./blue-cube'),
9+
path: 'torus',
10+
loadComponent: () => import('./torus'),
11+
},
12+
{
13+
path: 'bomb',
14+
loadComponent: () => import('./bomb'),
1115
},
1216
{
1317
path: '',
14-
redirectTo: 'red',
18+
redirectTo: 'knot',
1519
pathMatch: 'full',
1620
},
1721
];

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

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,28 +9,38 @@ extend(THREE);
99
@Component({
1010
template: `
1111
<div class="h-svh">
12-
<ngt-canvas [sceneGraph]="routedScene" />
12+
<ngt-canvas [sceneGraph]="routedScene" shadows [camera]="{ position: [0, 0, 20], fov: 50 }" />
1313
</div>
1414
1515
<ul class="absolute bottom-0 left-0 flex items-center gap-2">
1616
<li>
1717
<a
18-
routerLink="red"
18+
routerLink="knot"
1919
class="underline"
2020
routerLinkActive="text-blue-500"
2121
[routerLinkActiveOptions]="{ exact: true }"
2222
>
23-
Red Cube
23+
knot
2424
</a>
2525
</li>
2626
<li>
2727
<a
28-
routerLink="blue"
28+
routerLink="torus"
2929
class="underline"
3030
routerLinkActive="text-blue-500"
3131
[routerLinkActiveOptions]="{ exact: true }"
3232
>
33-
Blue Cube
33+
torus
34+
</a>
35+
</li>
36+
<li>
37+
<a
38+
routerLink="bomb"
39+
class="underline"
40+
routerLinkActive="text-blue-500"
41+
[routerLinkActiveOptions]="{ exact: true }"
42+
>
43+
bomb
3444
</a>
3545
</li>
3646
</ul>
@@ -40,5 +50,5 @@ extend(THREE);
4050
host: { class: 'routed' },
4151
})
4252
export default class Routed {
43-
routedScene = CustomRoutedScene;
53+
protected routedScene = CustomRoutedScene;
4454
}

‎apps/kitchen-sink/src/app/routed/torus.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2+
import { NgtArgs } from 'angular-three';
3+
import { NgtsMeshTransmissionMaterial } from 'angular-three-soba/materials';
4+
5+
@Component({
6+
selector: 'app-torus',
7+
template: `
8+
<ngt-mesh [receiveShadow]="true" [castShadow]="true">
9+
<ngt-torus-geometry *args="[4, 1.2, 128, 64]" />
10+
<ngts-mesh-transmission-material [options]="{ backside: true, backsideThickness: 5, thickness: 2 }" />
11+
</ngt-mesh>
12+
`,
13+
imports: [NgtArgs, NgtsMeshTransmissionMaterial],
14+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
15+
changeDetection: ChangeDetectionStrategy.OnPush,
16+
})
17+
export default class Torus {}

‎apps/kitchen-sink/src/types.d.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,8 @@ declare module '*.blob' {
22
const url: string;
33
export default url;
44
}
5+
6+
declare module '*.glb' {
7+
const url: string;
8+
export default url;
9+
}

0 commit comments

Comments
 (0)