Skip to content

Commit 2d7c7e3

Browse files
nartcnartc
committed
docs: port shoe configurator
1 parent 5a09eca commit 2d7c7e3

File tree

6 files changed

+333
-108
lines changed

6 files changed

+333
-108
lines changed

‎apps/examples/src/app/soba/epoxy-resin/scene.ts

Lines changed: 8 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ChangeDetectionStrategy, Component, computed, CUSTOM_ELEMENTS_SCHEMA, input, signal } from '@angular/core';
1+
import { ChangeDetectionStrategy, Component, computed, CUSTOM_ELEMENTS_SCHEMA, input } from '@angular/core';
22
import { injectLoader, NgtArgs } from 'angular-three';
33
import { NgtsText3D } from 'angular-three-soba/abstractions';
44
import { NgtsOrbitControls } from 'angular-three-soba/controls';
@@ -13,15 +13,8 @@ import {
1313
NgtsRandomizedLights,
1414
} from 'angular-three-soba/staging';
1515
import { RGBELoader } from 'three-stdlib';
16+
import { Tweaks } from './tweaks';
1617

17-
import {
18-
NgtTweakCheckbox,
19-
NgtTweakColor,
20-
NgtTweakFolder,
21-
NgtTweakNumber,
22-
NgtTweakPane,
23-
NgtTweakText,
24-
} from 'angular-three-tweakpane';
2518
import fontGlyphs from './inter_medium.json';
2619

2720
@Component({
@@ -107,10 +100,7 @@ export class TextAndGrid {
107100
() => 'https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/1k/aerodynamics_workshop_1k.hdr',
108101
);
109102

110-
protected materialOptions = computed(() => ({
111-
...this.config(),
112-
background: this.texture(),
113-
}));
103+
protected materialOptions = computed(() => ({ ...this.config(), background: this.texture() }));
114104

115105
protected readonly Math = Math;
116106
}
@@ -119,11 +109,11 @@ export class TextAndGrid {
119109
selector: 'app-scene-graph',
120110
template: `
121111
<ngt-color *args="['#f0f0f0']" attach="background" />
122-
<app-text-and-grid [text]="text()" [config]="materialConfig()" />
112+
<app-text-and-grid [text]="tweaks.text()" [config]="tweaks.materialConfig()" />
123113
124114
<ngts-orbit-controls
125115
[options]="{
126-
autoRotate: autoRotate(),
116+
autoRotate: tweaks.autoRotate(),
127117
autoRotateSpeed: -0.1,
128118
zoomSpeed: 0.25,
129119
minZoom: 40,
@@ -184,7 +174,7 @@ export class TextAndGrid {
184174
[options]="{
185175
temporal: false,
186176
frames: 100,
187-
color: shadow(),
177+
color: tweaks.shadow(),
188178
colorBlend: 5,
189179
toneMapped: true,
190180
alphaTest: 0.9,
@@ -207,53 +197,7 @@ export class TextAndGrid {
207197
/>
208198
</ngts-accumulative-shadows>
209199
210-
<ngt-tweak-pane title="Epoxy Resin" left="8px">
211-
<ngt-tweak-text [(value)]="text" label="text" />
212-
<ngt-tweak-color [(value)]="shadow" label="Shadow Color" />
213-
<ngt-tweak-checkbox [(value)]="autoRotate" label="Auto Rotate" />
214-
<ngt-tweak-folder title="Text Material">
215-
<ngt-tweak-checkbox [(value)]="backside" label="Backside" />
216-
<ngt-tweak-number
217-
[(value)]="backsideThickness"
218-
label="Backside Thickness"
219-
[params]="{ min: 0, max: 2 }"
220-
/>
221-
<ngt-tweak-number [(value)]="samples" label="Samples" [params]="{ min: 1, max: 32, step: 1 }" />
222-
<ngt-tweak-number
223-
[(value)]="resolution"
224-
label="Resolution"
225-
[params]="{ min: 64, max: 2048, step: 64 }"
226-
/>
227-
<ngt-tweak-number [(value)]="transmission" label="Transmission" [params]="{ min: 0, max: 1 }" />
228-
<ngt-tweak-number [(value)]="clearcoat" label="Clearcoat" [params]="{ min: 0.1, max: 1 }" />
229-
<ngt-tweak-number
230-
[(value)]="clearcoatRoughness"
231-
label="Clearcoat Roughness"
232-
[params]="{ min: 0, max: 1 }"
233-
/>
234-
<ngt-tweak-number [(value)]="thickness" label="Thickness" [params]="{ min: 0, max: 5 }" />
235-
<ngt-tweak-number
236-
[(value)]="chromaticAberration"
237-
label="Chromatic Aberration"
238-
[params]="{ min: 0, max: 5 }"
239-
/>
240-
<ngt-tweak-number [(value)]="anisotropy" label="Anisotropy" [params]="{ min: 0, max: 1, step: 0.01 }" />
241-
<ngt-tweak-number [(value)]="roughness" label="Roughness" [params]="{ min: 0, max: 1, step: 0.01 }" />
242-
<ngt-tweak-number [(value)]="distortion" label="Distortion" [params]="{ min: 0, max: 4, step: 0.01 }" />
243-
<ngt-tweak-number
244-
[(value)]="distortionScale"
245-
label="Distortion Scale"
246-
[params]="{ min: 0.01, max: 1, step: 0.01 }"
247-
/>
248-
<ngt-tweak-number
249-
[(value)]="temporalDistortion"
250-
label="Temporal Distortion"
251-
[params]="{ min: 0, max: 1, step: 0.01 }"
252-
/>
253-
<ngt-tweak-number [(value)]="ior" label="IOR" [params]="{ min: 0, max: 2, step: 0.01 }" />
254-
<ngt-tweak-color [(value)]="color" label="Color" />
255-
</ngt-tweak-folder>
256-
</ngt-tweak-pane>
200+
<app-tweaks #tweaks />
257201
`,
258202
schemas: [CUSTOM_ELEMENTS_SCHEMA],
259203
changeDetection: ChangeDetectionStrategy.OnPush,
@@ -265,53 +209,9 @@ export class TextAndGrid {
265209
NgtsLightformer,
266210
NgtsAccumulativeShadows,
267211
NgtsRandomizedLights,
268-
NgtTweakPane,
269-
NgtTweakText,
270-
NgtTweakFolder,
271-
NgtTweakCheckbox,
272-
NgtTweakNumber,
273-
NgtTweakColor,
212+
Tweaks,
274213
],
275214
})
276215
export class SceneGraph {
277216
protected readonly Math = Math;
278-
279-
protected text = signal('Angular');
280-
protected backside = signal(true);
281-
protected backsideThickness = signal(0.3);
282-
protected samples = signal(16);
283-
protected resolution = signal(1024);
284-
protected transmission = signal(1);
285-
protected clearcoat = signal(0);
286-
protected clearcoatRoughness = signal(0.0);
287-
protected thickness = signal(0.3);
288-
protected chromaticAberration = signal(5);
289-
protected anisotropy = signal(0.3);
290-
protected roughness = signal(0);
291-
protected distortion = signal(0.5);
292-
protected distortionScale = signal(0.1);
293-
protected temporalDistortion = signal(0);
294-
protected ior = signal(1.5);
295-
protected color = signal('#ff9cf5');
296-
protected shadow = signal('#750d57');
297-
protected autoRotate = signal(false);
298-
299-
protected materialConfig = computed(() => ({
300-
color: this.color(),
301-
roughness: this.roughness(),
302-
transmission: this.transmission(),
303-
thickness: this.thickness(),
304-
ior: this.ior(),
305-
clearcoat: this.clearcoat(),
306-
clearcoatRoughness: this.clearcoatRoughness(),
307-
anisotropy: this.anisotropy(),
308-
chromaticAberration: this.chromaticAberration(),
309-
distortion: this.distortion(),
310-
distortionScale: this.distortionScale(),
311-
temporalDistortion: this.temporalDistortion(),
312-
backside: this.backside(),
313-
backsideThickness: this.backsideThickness(),
314-
samples: this.samples(),
315-
resolution: this.resolution(),
316-
}));
317217
}

‎apps/examples/src/app/soba/epoxy-resin/tweaks.ts

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
2+
import {
3+
NgtTweakCheckbox,
4+
NgtTweakColor,
5+
NgtTweakFolder,
6+
NgtTweakNumber,
7+
NgtTweakPane,
8+
NgtTweakText,
9+
} from 'angular-three-tweakpane';
10+
11+
@Component({
12+
selector: 'app-tweaks',
13+
template: `
14+
<ngt-tweak-pane title="Epoxy Resin" left="8px">
15+
<ngt-tweak-text [(value)]="text" label="text" />
16+
<ngt-tweak-color [(value)]="shadow" label="Shadow Color" />
17+
<ngt-tweak-checkbox [(value)]="autoRotate" label="Auto Rotate" />
18+
<ngt-tweak-folder title="Text Material">
19+
<ngt-tweak-checkbox [(value)]="backside" label="Backside" />
20+
<ngt-tweak-number
21+
[(value)]="backsideThickness"
22+
label="Backside Thickness"
23+
[params]="{ min: 0, max: 2 }"
24+
/>
25+
<ngt-tweak-number [(value)]="samples" label="Samples" [params]="{ min: 1, max: 32, step: 1 }" />
26+
<ngt-tweak-number
27+
[(value)]="resolution"
28+
label="Resolution"
29+
[params]="{ min: 64, max: 2048, step: 64 }"
30+
/>
31+
<ngt-tweak-number [(value)]="transmission" label="Transmission" [params]="{ min: 0, max: 1 }" />
32+
<ngt-tweak-number [(value)]="clearcoat" label="Clearcoat" [params]="{ min: 0.1, max: 1 }" />
33+
<ngt-tweak-number
34+
[(value)]="clearcoatRoughness"
35+
label="Clearcoat Roughness"
36+
[params]="{ min: 0, max: 1 }"
37+
/>
38+
<ngt-tweak-number [(value)]="thickness" label="Thickness" [params]="{ min: 0, max: 5 }" />
39+
<ngt-tweak-number
40+
[(value)]="chromaticAberration"
41+
label="Chromatic Aberration"
42+
[params]="{ min: 0, max: 5 }"
43+
/>
44+
<ngt-tweak-number [(value)]="anisotropy" label="Anisotropy" [params]="{ min: 0, max: 1, step: 0.01 }" />
45+
<ngt-tweak-number [(value)]="roughness" label="Roughness" [params]="{ min: 0, max: 1, step: 0.01 }" />
46+
<ngt-tweak-number [(value)]="distortion" label="Distortion" [params]="{ min: 0, max: 4, step: 0.01 }" />
47+
<ngt-tweak-number
48+
[(value)]="distortionScale"
49+
label="Distortion Scale"
50+
[params]="{ min: 0.01, max: 1, step: 0.01 }"
51+
/>
52+
<ngt-tweak-number
53+
[(value)]="temporalDistortion"
54+
label="Temporal Distortion"
55+
[params]="{ min: 0, max: 1, step: 0.01 }"
56+
/>
57+
<ngt-tweak-number [(value)]="ior" label="IOR" [params]="{ min: 0, max: 2, step: 0.01 }" />
58+
<ngt-tweak-color [(value)]="color" label="Color" />
59+
</ngt-tweak-folder>
60+
</ngt-tweak-pane>
61+
`,
62+
changeDetection: ChangeDetectionStrategy.OnPush,
63+
imports: [NgtTweakCheckbox, NgtTweakColor, NgtTweakNumber, NgtTweakFolder, NgtTweakText, NgtTweakPane],
64+
})
65+
export class Tweaks<T> {
66+
text = signal('Angular');
67+
shadow = signal('#750d57');
68+
autoRotate = signal(false);
69+
70+
protected backside = signal(true);
71+
protected backsideThickness = signal(0.3);
72+
protected samples = signal(16);
73+
protected resolution = signal(1024);
74+
protected transmission = signal(1);
75+
protected clearcoat = signal(0);
76+
protected clearcoatRoughness = signal(0.0);
77+
protected thickness = signal(0.3);
78+
protected chromaticAberration = signal(5);
79+
protected anisotropy = signal(0.3);
80+
protected roughness = signal(0);
81+
protected distortion = signal(0.5);
82+
protected distortionScale = signal(0.1);
83+
protected temporalDistortion = signal(0);
84+
protected ior = signal(1.5);
85+
protected color = signal('#ff9cf5');
86+
87+
materialConfig = computed(() => ({
88+
color: this.color(),
89+
roughness: this.roughness(),
90+
transmission: this.transmission(),
91+
thickness: this.thickness(),
92+
ior: this.ior(),
93+
clearcoat: this.clearcoat(),
94+
clearcoatRoughness: this.clearcoatRoughness(),
95+
anisotropy: this.anisotropy(),
96+
chromaticAberration: this.chromaticAberration(),
97+
distortion: this.distortion(),
98+
distortionScale: this.distortionScale(),
99+
temporalDistortion: this.temporalDistortion(),
100+
backside: this.backside(),
101+
backsideThickness: this.backsideThickness(),
102+
samples: this.samples(),
103+
resolution: this.resolution(),
104+
}));
105+
}

0 commit comments

Comments
 (0)