Skip to content

Commit a22bf79

Browse files
committed
docs: adjust shoe configuration (2)
1 parent 76c8ca0 commit a22bf79

File tree

1 file changed

+20
-68
lines changed
  • apps/examples/src/app/soba/shoe-configuration

1 file changed

+20
-68
lines changed

apps/examples/src/app/soba/shoe-configuration/scene.ts

Lines changed: 20 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { DOCUMENT } from '@angular/common';
1+
import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
22
import {
33
ChangeDetectionStrategy,
44
Component,
@@ -65,80 +65,32 @@ export class ColorPicker {
6565
(click)="$event.stopPropagation(); state.update({ current: $any($event.object).material.name })"
6666
>
6767
@if (gltf(); as gltf) {
68-
@let nodes = gltf.meshes;
69-
@let materials = gltf.materials;
68+
<ng-template #mesh let-node="node" let-material="material">
69+
<ngt-mesh
70+
receiveShadow
71+
castShadow
72+
[geometry]="gltf.meshes[node].geometry"
73+
[material]="gltf.materials[material]"
74+
>
75+
<ngt-value [rawValue]="$any(state.items)[material]()" attach="material.color" />
76+
</ngt-mesh>
77+
</ng-template>
7078
71-
<ngt-mesh
72-
receiveShadow
73-
castShadow
74-
[geometry]="nodes['shoe'].geometry"
75-
[material]="materials['laces']"
76-
>
77-
<ngt-value [rawValue]="state.items.laces()" attach="material.color" />
78-
</ngt-mesh>
79-
<ngt-mesh
80-
receiveShadow
81-
castShadow
82-
[geometry]="nodes['shoe_1'].geometry"
83-
[material]="materials['mesh']"
84-
>
85-
<ngt-value [rawValue]="state.items.mesh()" attach="material.color" />
86-
</ngt-mesh>
87-
<ngt-mesh
88-
receiveShadow
89-
castShadow
90-
[geometry]="nodes['shoe_2'].geometry"
91-
[material]="materials['caps']"
92-
>
93-
<ngt-value [rawValue]="state.items.caps()" attach="material.color" />
94-
</ngt-mesh>
95-
<ngt-mesh
96-
receiveShadow
97-
castShadow
98-
[geometry]="nodes['shoe_3'].geometry"
99-
[material]="materials['inner']"
100-
>
101-
<ngt-value [rawValue]="state.items.inner()" attach="material.color" />
102-
</ngt-mesh>
103-
<ngt-mesh
104-
receiveShadow
105-
castShadow
106-
[geometry]="nodes['shoe_4'].geometry"
107-
[material]="materials['sole']"
108-
>
109-
<ngt-value [rawValue]="state.items.sole()" attach="material.color" />
110-
</ngt-mesh>
111-
<ngt-mesh
112-
receiveShadow
113-
castShadow
114-
[geometry]="nodes['shoe_5'].geometry"
115-
[material]="materials['stripes']"
116-
>
117-
<ngt-value [rawValue]="state.items.stripes()" attach="material.color" />
118-
</ngt-mesh>
119-
<ngt-mesh
120-
receiveShadow
121-
castShadow
122-
[geometry]="nodes['shoe_6'].geometry"
123-
[material]="materials['band']"
124-
>
125-
<ngt-value [rawValue]="state.items.band()" attach="material.color" />
126-
</ngt-mesh>
127-
<ngt-mesh
128-
receiveShadow
129-
castShadow
130-
[geometry]="nodes['shoe_7'].geometry"
131-
[material]="materials['patch']"
132-
>
133-
<ngt-value [rawValue]="state.items.patch()" attach="material.color" />
134-
</ngt-mesh>
79+
<ng-container *ngTemplateOutlet="mesh; context: { node: 'shoe', material: 'laces' }" />
80+
<ng-container *ngTemplateOutlet="mesh; context: { node: 'shoe_1', material: 'mesh' }" />
81+
<ng-container *ngTemplateOutlet="mesh; context: { node: 'shoe_2', material: 'caps' }" />
82+
<ng-container *ngTemplateOutlet="mesh; context: { node: 'shoe_3', material: 'inner' }" />
83+
<ng-container *ngTemplateOutlet="mesh; context: { node: 'shoe_4', material: 'sole' }" />
84+
<ng-container *ngTemplateOutlet="mesh; context: { node: 'shoe_5', material: 'stripes' }" />
85+
<ng-container *ngTemplateOutlet="mesh; context: { node: 'shoe_6', material: 'band' }" />
86+
<ng-container *ngTemplateOutlet="mesh; context: { node: 'shoe_7', material: 'patch' }" />
13587
}
13688
</ngt-group>
13789
</ngts-float>
13890
`,
13991
schemas: [CUSTOM_ELEMENTS_SCHEMA],
14092
changeDetection: ChangeDetectionStrategy.OnPush,
141-
imports: [NgtsFloat],
93+
imports: [NgtsFloat, NgTemplateOutlet],
14294
})
14395
export class Shoe {
14496
protected readonly state = state;

0 commit comments

Comments
 (0)