Skip to content

Commit 8a89d11

Browse files
nartcnartc
committed
docs: use nx logo
1 parent 8f7b3cc commit 8a89d11

File tree

4 files changed

+141
-72
lines changed

4 files changed

+141
-72
lines changed

‎apps/kitchen-sink/public/nx.glb‎

63.3 KB
Binary file not shown.

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

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { ChangeDetectionStrategy, Component, computed, CUSTOM_ELEMENTS_SCHEMA, input, Signal } from '@angular/core';
2+
import { injectGLTF } from 'angular-three-soba/loaders';
3+
import { injectMask } from 'angular-three-soba/staging';
4+
import { Mesh, MeshPhongMaterial, MeshStandardMaterial } from 'three';
5+
import { GLTF } from 'three-stdlib';
6+
7+
type AngularGLTF = GLTF & {
8+
nodes: { Curve: Mesh; Curve001: Mesh; Curve002: Mesh; Curve003: Mesh };
9+
materials: { SVGMat: MeshStandardMaterial };
10+
};
11+
12+
@Component({
13+
selector: 'app-angular',
14+
standalone: true,
15+
template: `
16+
@if (gltf(); as gltf) {
17+
<ngt-group [dispose]="null" [scale]="scale()" [position]="[-2.5, -3, 0]" [rotation]="[Math.PI / 2, 0, 0]">
18+
<ngt-mesh
19+
[castShadow]="true"
20+
[receiveShadow]="true"
21+
[geometry]="gltf.nodes.Curve.geometry"
22+
[material]="material()"
23+
/>
24+
<ngt-mesh
25+
[castShadow]="true"
26+
[receiveShadow]="true"
27+
[geometry]="gltf.nodes.Curve001.geometry"
28+
[material]="material()"
29+
/>
30+
<ngt-mesh
31+
[castShadow]="true"
32+
[receiveShadow]="true"
33+
[geometry]="gltf.nodes.Curve002.geometry"
34+
[material]="material()"
35+
/>
36+
<ngt-mesh
37+
[castShadow]="true"
38+
[receiveShadow]="true"
39+
[geometry]="gltf.nodes.Curve003.geometry"
40+
[material]="material()"
41+
/>
42+
</ngt-group>
43+
}
44+
`,
45+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
46+
changeDetection: ChangeDetectionStrategy.OnPush,
47+
})
48+
export class Angular {
49+
protected readonly Math = Math;
50+
51+
invert = input(false);
52+
scale = input(1);
53+
54+
protected gltf = injectGLTF(() => './angular.glb') as Signal<AngularGLTF | null>;
55+
protected stencilParameters = injectMask(() => 1, this.invert);
56+
57+
protected material = computed(() => {
58+
const stencilParameters = this.stencilParameters();
59+
return new MeshPhongMaterial({ color: '#E72BAA', ...stencilParameters });
60+
});
61+
}

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

Lines changed: 7 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,10 @@
1-
import {
2-
ChangeDetectionStrategy,
3-
Component,
4-
computed,
5-
CUSTOM_ELEMENTS_SCHEMA,
6-
input,
7-
signal,
8-
Signal,
9-
} from '@angular/core';
1+
import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, input, signal } from '@angular/core';
102
import { NgtArgs, NgtEuler, NgtVector3 } from 'angular-three';
113
import { NgtsRoundedBox } from 'angular-three-soba/abstractions';
124
import { NgtsOrbitControls, NgtsPivotControls } from 'angular-three-soba/controls';
13-
import { injectGLTF } from 'angular-three-soba/loaders';
14-
import { injectMask, NgtsBounds, NgtsEnvironment, NgtsFloat, NgtsMask } from 'angular-three-soba/staging';
15-
import { ColorRepresentation, Mesh, MeshPhongMaterial, MeshStandardMaterial } from 'three';
16-
import { GLTF } from 'three-stdlib';
5+
import { NgtsBounds, NgtsEnvironment, NgtsFloat, NgtsMask } from 'angular-three-soba/staging';
6+
import { ColorRepresentation } from 'three';
7+
import { Nx } from './nx';
178

189
export const invert = signal(false);
1910

@@ -88,62 +79,6 @@ export class Box {
8879
rotation = input<NgtEuler>([0, 0, 0]);
8980
}
9081

91-
type AngularGLTF = GLTF & {
92-
nodes: { Curve: Mesh; Curve001: Mesh; Curve002: Mesh; Curve003: Mesh };
93-
materials: { SVGMat: MeshStandardMaterial };
94-
};
95-
96-
@Component({
97-
selector: 'app-angular',
98-
standalone: true,
99-
template: `
100-
@if (gltf(); as gltf) {
101-
<ngt-group [dispose]="null" [scale]="scale()" [position]="[-2.5, -3, 0]" [rotation]="[Math.PI / 2, 0, 0]">
102-
<ngt-mesh
103-
[castShadow]="true"
104-
[receiveShadow]="true"
105-
[geometry]="gltf.nodes.Curve.geometry"
106-
[material]="material()"
107-
/>
108-
<ngt-mesh
109-
[castShadow]="true"
110-
[receiveShadow]="true"
111-
[geometry]="gltf.nodes.Curve001.geometry"
112-
[material]="material()"
113-
/>
114-
<ngt-mesh
115-
[castShadow]="true"
116-
[receiveShadow]="true"
117-
[geometry]="gltf.nodes.Curve002.geometry"
118-
[material]="material()"
119-
/>
120-
<ngt-mesh
121-
[castShadow]="true"
122-
[receiveShadow]="true"
123-
[geometry]="gltf.nodes.Curve003.geometry"
124-
[material]="material()"
125-
/>
126-
</ngt-group>
127-
}
128-
`,
129-
schemas: [CUSTOM_ELEMENTS_SCHEMA],
130-
changeDetection: ChangeDetectionStrategy.OnPush,
131-
})
132-
export class Angular {
133-
protected readonly Math = Math;
134-
135-
invert = input(false);
136-
scale = input(1);
137-
138-
protected gltf = injectGLTF(() => './angular.glb') as Signal<AngularGLTF | null>;
139-
protected stencilParameters = injectMask(() => 1, this.invert);
140-
141-
protected material = computed(() => {
142-
const stencilParameters = this.stencilParameters();
143-
return new MeshPhongMaterial({ color: '#E72BAA', ...stencilParameters });
144-
});
145-
}
146-
14782
@Component({
14883
standalone: true,
14984
template: `
@@ -153,10 +88,10 @@ export class Angular {
15388
<ngt-hemisphere-light [intensity]="Math.PI * 1.5" groundColor="red" />
15489
15590
<app-circular-mask />
156-
<app-circular-mask [position]="[2, 0, 0]" />
15791
<ngts-bounds [options]="{ fit: true, clip: true, observe: true }">
15892
<ngts-float [options]="{ floatIntensity: 4, rotationIntensity: 0, speed: 4 }">
159-
<app-angular [invert]="invert()" [scale]="20" />
93+
<!-- <app-angular [invert]="invert()" [scale]="20" />-->
94+
<app-nx [invert]="invert()" [scale]="20" />
16095
</ngts-float>
16196
<app-box
16297
color="#EAC435"
@@ -176,7 +111,7 @@ export class Angular {
176111
schemas: [CUSTOM_ELEMENTS_SCHEMA],
177112
changeDetection: ChangeDetectionStrategy.OnPush,
178113
host: { class: 'inverted-stencil-buffer-soba-experience' },
179-
imports: [CircularMask, NgtsBounds, NgtsFloat, Angular, Box, NgtsEnvironment, NgtsOrbitControls, NgtArgs],
114+
imports: [CircularMask, NgtsBounds, NgtsFloat, Box, NgtsEnvironment, NgtsOrbitControls, NgtArgs, Nx],
180115
})
181116
export class Experience {
182117
protected readonly Math = Math;

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

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import { ChangeDetectionStrategy, Component, computed, CUSTOM_ELEMENTS_SCHEMA, input, Signal } from '@angular/core';
2+
import { injectGLTF } from 'angular-three-soba/loaders';
3+
import { injectMask } from 'angular-three-soba/staging';
4+
import { Mesh, MeshPhongMaterial, MeshStandardMaterial } from 'three';
5+
import { GLTF } from 'three-stdlib';
6+
7+
type NxGLTF = GLTF & {
8+
nodes: { Curve004: Mesh; Curve005: Mesh; Curve006: Mesh; Curve007: Mesh; Curve008: Mesh; Curve009: Mesh };
9+
materials: { 'SVGMat.001': MeshStandardMaterial };
10+
};
11+
12+
@Component({
13+
selector: 'app-nx',
14+
standalone: true,
15+
template: `
16+
@if (gltf(); as gltf) {
17+
<ngt-group [dispose]="null" [scale]="scale()" [position]="[-3, -3, 0]" [rotation]="[Math.PI / 2, 0, 0]">
18+
<ngt-mesh
19+
[castShadow]="true"
20+
[receiveShadow]="true"
21+
[geometry]="gltf.nodes.Curve004.geometry"
22+
[material]="material()"
23+
/>
24+
<ngt-mesh
25+
[castShadow]="true"
26+
[receiveShadow]="true"
27+
[geometry]="gltf.nodes.Curve005.geometry"
28+
[material]="material()"
29+
/>
30+
<ngt-mesh
31+
[castShadow]="true"
32+
[receiveShadow]="true"
33+
[geometry]="gltf.nodes.Curve006.geometry"
34+
[material]="material()"
35+
/>
36+
<ngt-mesh
37+
[castShadow]="true"
38+
[receiveShadow]="true"
39+
[geometry]="gltf.nodes.Curve007.geometry"
40+
[material]="material()"
41+
/>
42+
<ngt-mesh
43+
[castShadow]="true"
44+
[receiveShadow]="true"
45+
[geometry]="gltf.nodes.Curve008.geometry"
46+
[material]="material()"
47+
/>
48+
<ngt-mesh
49+
[castShadow]="true"
50+
[receiveShadow]="true"
51+
[geometry]="gltf.nodes.Curve009.geometry"
52+
[material]="material()"
53+
/>
54+
</ngt-group>
55+
}
56+
`,
57+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
58+
changeDetection: ChangeDetectionStrategy.OnPush,
59+
})
60+
export class Nx {
61+
protected readonly Math = Math;
62+
63+
invert = input(false);
64+
scale = input(1);
65+
66+
protected gltf = injectGLTF(() => './nx.glb') as Signal<NxGLTF | null>;
67+
protected stencilParameters = injectMask(() => 1, this.invert);
68+
69+
protected material = computed(() => {
70+
const stencilParameters = this.stencilParameters();
71+
return new MeshPhongMaterial({ color: '#002f56', ...stencilParameters });
72+
});
73+
}

0 commit comments

Comments
 (0)