|
1 |
| -import { DOCUMENT } from '@angular/common'; |
| 1 | +import { DOCUMENT, NgTemplateOutlet } from '@angular/common'; |
2 | 2 | import {
|
3 | 3 | ChangeDetectionStrategy,
|
4 | 4 | Component,
|
@@ -65,80 +65,32 @@ export class ColorPicker {
|
65 | 65 | (click)="$event.stopPropagation(); state.update({ current: $any($event.object).material.name })"
|
66 | 66 | >
|
67 | 67 | @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> |
70 | 78 |
|
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' }" /> |
135 | 87 | }
|
136 | 88 | </ngt-group>
|
137 | 89 | </ngts-float>
|
138 | 90 | `,
|
139 | 91 | schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
140 | 92 | changeDetection: ChangeDetectionStrategy.OnPush,
|
141 |
| - imports: [NgtsFloat], |
| 93 | + imports: [NgtsFloat, NgTemplateOutlet], |
142 | 94 | })
|
143 | 95 | export class Shoe {
|
144 | 96 | protected readonly state = state;
|
|
0 commit comments