Skip to content

Commit 878b25f

Browse files
committed
docs: why not switch between the two
1 parent 8a89d11 commit 878b25f

File tree

2 files changed

+33
-9
lines changed

2 files changed

+33
-9
lines changed

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

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,11 @@ import { NgtsRoundedBox } from 'angular-three-soba/abstractions';
44
import { NgtsOrbitControls, NgtsPivotControls } from 'angular-three-soba/controls';
55
import { NgtsBounds, NgtsEnvironment, NgtsFloat, NgtsMask } from 'angular-three-soba/staging';
66
import { ColorRepresentation } from 'three';
7+
import { Angular } from './angular';
78
import { Nx } from './nx';
89

910
export const invert = signal(false);
11+
export const logo = signal<'angular' | 'nx'>('angular');
1012

1113
@Component({
1214
selector: 'app-frame',
@@ -90,8 +92,14 @@ export class Box {
9092
<app-circular-mask />
9193
<ngts-bounds [options]="{ fit: true, clip: true, observe: true }">
9294
<ngts-float [options]="{ floatIntensity: 4, rotationIntensity: 0, speed: 4 }">
93-
<!-- <app-angular [invert]="invert()" [scale]="20" />-->
94-
<app-nx [invert]="invert()" [scale]="20" />
95+
@switch (logo()) {
96+
@case ('angular') {
97+
<app-angular [invert]="invert()" [scale]="20" />
98+
}
99+
@case ('nx') {
100+
<app-nx [invert]="invert()" [scale]="20" />
101+
}
102+
}
95103
</ngts-float>
96104
<app-box
97105
color="#EAC435"
@@ -111,9 +119,10 @@ export class Box {
111119
schemas: [CUSTOM_ELEMENTS_SCHEMA],
112120
changeDetection: ChangeDetectionStrategy.OnPush,
113121
host: { class: 'inverted-stencil-buffer-soba-experience' },
114-
imports: [CircularMask, NgtsBounds, NgtsFloat, Box, NgtsEnvironment, NgtsOrbitControls, NgtArgs, Nx],
122+
imports: [CircularMask, NgtsBounds, NgtsFloat, Box, NgtsEnvironment, NgtsOrbitControls, NgtArgs, Nx, Angular],
115123
})
116124
export class Experience {
117125
protected readonly Math = Math;
118126
protected invert = invert;
127+
protected logo = logo;
119128
}

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

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,24 @@
11
import { ChangeDetectionStrategy, Component } from '@angular/core';
22
import { NgtCanvas } from 'angular-three';
3-
import { Experience, invert } from './experience';
3+
import { Experience, invert, logo } from './experience';
44

55
@Component({
66
standalone: true,
77
template: `
88
<ngt-canvas [sceneGraph]="scene" [shadows]="true" [gl]="{ stencil: true }" />
9-
<label class="absolute top-2 right-2 font-mono flex gap-2 items-center">
10-
<input type="checkbox" [value]="invert()" (change)="onChange($event)" />
11-
invert
12-
</label>
9+
<div
10+
class="absolute top-2 right-2 p-4 flex flex-col gap-4 items-center rounded border border-black border-dotted font-mono"
11+
>
12+
<label class="flex gap-2 items-center">
13+
<input type="checkbox" [value]="invert()" (change)="onInvertChange($event)" />
14+
invert
15+
</label>
16+
<select [value]="logo()" (change)="onLogoChange($event)">
17+
<option value="angular">Angular</option>
18+
<option value="nx">Nx</option>
19+
</select>
20+
</div>
21+
1322
<a
1423
class="absolute top-2 left-2 font-mono underline"
1524
href="https://pmndrs.github.io/examples/demos/inverted-stencil-buffer"
@@ -25,9 +34,15 @@ import { Experience, invert } from './experience';
2534
export default class InvertedStencilBuffer {
2635
protected scene = Experience;
2736
protected invert = invert;
37+
protected logo = logo;
2838

29-
onChange(event: Event) {
39+
onInvertChange(event: Event) {
3040
const target = event.target as HTMLInputElement;
3141
this.invert.set(target.checked);
3242
}
43+
44+
onLogoChange(event: Event) {
45+
const target = event.target as HTMLSelectElement;
46+
this.logo.set(target.value as 'angular' | 'nx');
47+
}
3348
}

0 commit comments

Comments
 (0)