Skip to content
This repository was archived by the owner on Feb 10, 2023. It is now read-only.

Commit 250059c

Browse files
nartcnartc
committed
fix(soba): fix ContentChildren for Stage
1 parent 8cdfdb3 commit 250059c

File tree

7 files changed

+960
-10
lines changed

7 files changed

+960
-10
lines changed

‎apps/sandbox/src/app/reuse-gltf/reuse-gltf.component.ts‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
import {
2+
AnyFunction,
3+
NGT_OBJECT_HOST_REF,
4+
NGT_OBJECT_REF,
5+
NgtCanvasModule,
6+
NgtObjectInputs,
7+
NgtObjectPassThroughModule,
8+
NgtRadianPipeModule,
9+
NgtStore,
10+
provideObjectHostRef,
11+
Ref,
12+
} from '@angular-three/core';
13+
import { NgtValueAttributeModule } from '@angular-three/core/attributes';
14+
import { NgtSphereGeometryModule } from '@angular-three/core/geometries';
15+
import { NgtGroupModule } from '@angular-three/core/group';
16+
import { NgtMeshPhongMaterialModule, NgtMeshStandardMaterialModule } from '@angular-three/core/materials';
17+
import { NgtMeshModule } from '@angular-three/core/meshes';
18+
import { NgtSobaOrbitControlsModule } from '@angular-three/soba/controls';
19+
import { NgtGLTFLoader } from '@angular-three/soba/loaders';
20+
import { NgtSobaContactShadowsModule, NgtSobaStageModule } from '@angular-three/soba/staging';
21+
import { CommonModule } from '@angular/common';
22+
import { ChangeDetectionStrategy, Component, Inject, NgModule, NgZone, Optional, SkipSelf } from '@angular/core';
23+
import { RouterModule } from '@angular/router';
24+
import { Observable } from 'rxjs';
25+
import * as THREE from 'three';
26+
import { GLTF } from 'three-stdlib';
27+
28+
@Component({
29+
selector: 'sandbox-reuse-gltf',
30+
template: `
31+
<ngt-canvas shadows [dpr]="[1, 2]" initialLog [camera]="{ position: [0, 0, 150], fov: 40 }">
32+
<ngt-soba-stage environment="city" intensity="0.6">
33+
<ng-template ngt-soba-stage-content>
34+
<sandbox-shoe color="tomato" [position]="[0, 0, 0]"></sandbox-shoe>
35+
<sandbox-shoe
36+
color="orange"
37+
[scale]="-1"
38+
[rotation]="[0, 0.5, 180 | radian]"
39+
[position]="[0, 0, -2]"
40+
></sandbox-shoe>
41+
</ng-template>
42+
</ngt-soba-stage>
43+
44+
<ngt-soba-orbit-controls autoRotate></ngt-soba-orbit-controls>
45+
</ngt-canvas>
46+
`,
47+
changeDetection: ChangeDetectionStrategy.OnPush,
48+
})
49+
export class ReuseGltfComponent {}
50+
51+
interface ShoeGLTF extends GLTF {
52+
nodes: {
53+
[key in 'shoe' | 'shoe_1' | 'shoe_2' | 'shoe_3' | 'shoe_4' | 'shoe_5' | 'shoe_6' | 'shoe_7']: THREE.Mesh;
54+
};
55+
materials: {
56+
[key in 'laces' | 'mesh' | 'caps' | 'inner' | 'sole' | 'stripes' | 'band' | 'patch']: THREE.MeshStandardMaterial;
57+
};
58+
}
59+
60+
@Component({
61+
selector: 'sandbox-shoe',
62+
template: `
63+
<ng-container *ngIf="shoe$ | async as shoe">
64+
<ngt-group [ngtObjectInputs]="this" [ngtObjectOutputs]="this">
65+
<ngt-mesh castShadow receiveShadow [geometry]="shoe.nodes.shoe.geometry" [material]="shoe.materials.laces">
66+
<ngt-value [attach]="['material', 'envMapIntensity']" [value]="0.8"></ngt-value>
67+
</ngt-mesh>
68+
69+
<ngt-mesh castShadow receiveShadow [geometry]="shoe.nodes.shoe_1.geometry">
70+
<ngt-mesh-standard-material
71+
[color]="$any(color)"
72+
[aoMap]="shoe.materials.mesh.aoMap"
73+
[normalMap]="shoe.materials.mesh.normalMap"
74+
[roughnessMap]="shoe.materials.mesh.roughnessMap"
75+
[metalnessMap]="shoe.materials.mesh.metalnessMap"
76+
envMapIntensity="0.8"
77+
>
78+
<ngt-value [attach]="['normalMap', 'encoding']" [value]="encoding"></ngt-value>
79+
</ngt-mesh-standard-material>
80+
</ngt-mesh>
81+
82+
<ngt-mesh castShadow receiveShadow [geometry]="shoe.nodes.shoe_2.geometry" [material]="shoe.materials.caps">
83+
<ngt-value [attach]="['material', 'envMapIntensity']" [value]="0.8"></ngt-value>
84+
</ngt-mesh>
85+
<ngt-mesh castShadow receiveShadow [geometry]="shoe.nodes.shoe_3.geometry" [material]="shoe.materials.inner">
86+
<ngt-value [attach]="['material', 'envMapIntensity']" [value]="0.8"></ngt-value>
87+
</ngt-mesh>
88+
<ngt-mesh castShadow receiveShadow [geometry]="shoe.nodes.shoe_4.geometry" [material]="shoe.materials.sole">
89+
<ngt-value [attach]="['material', 'envMapIntensity']" [value]="0.8"></ngt-value>
90+
</ngt-mesh>
91+
<ngt-mesh castShadow receiveShadow [geometry]="shoe.nodes.shoe_5.geometry" [material]="shoe.materials.stripes">
92+
<ngt-value [attach]="['material', 'envMapIntensity']" [value]="0.8"></ngt-value>
93+
</ngt-mesh>
94+
<ngt-mesh castShadow receiveShadow [geometry]="shoe.nodes.shoe_6.geometry" [material]="shoe.materials.band">
95+
<ngt-value [attach]="['material', 'envMapIntensity']" [value]="0.8"></ngt-value>
96+
</ngt-mesh>
97+
<ngt-mesh castShadow receiveShadow [geometry]="shoe.nodes.shoe_7.geometry" [material]="shoe.materials.patch">
98+
<ngt-value [attach]="['material', 'envMapIntensity']" [value]="0.8"></ngt-value>
99+
</ngt-mesh>
100+
</ngt-group>
101+
</ng-container>
102+
`,
103+
changeDetection: ChangeDetectionStrategy.OnPush,
104+
providers: [provideObjectHostRef(Shoe)],
105+
})
106+
export class Shoe extends NgtObjectInputs<THREE.Group> {
107+
readonly shoe$: Observable<ShoeGLTF> = this.gltfLoader.load('assets/shoe.gltf') as Observable<ShoeGLTF>;
108+
readonly encoding = THREE.LinearEncoding;
109+
110+
constructor(
111+
zone: NgZone,
112+
store: NgtStore,
113+
@Optional()
114+
@SkipSelf()
115+
@Inject(NGT_OBJECT_REF)
116+
parentObjectRef: AnyFunction<Ref<THREE.Object3D>>,
117+
@Optional()
118+
@SkipSelf()
119+
@Inject(NGT_OBJECT_HOST_REF)
120+
parentObjectHostRef: AnyFunction<Ref<THREE.Object3D>>,
121+
private gltfLoader: NgtGLTFLoader
122+
) {
123+
super(zone, store, parentObjectRef, parentObjectHostRef);
124+
}
125+
}
126+
127+
@NgModule({
128+
declarations: [ReuseGltfComponent, Shoe],
129+
imports: [
130+
RouterModule.forChild([{ path: '', component: ReuseGltfComponent }]),
131+
CommonModule,
132+
NgtGroupModule,
133+
NgtObjectPassThroughModule,
134+
NgtMeshModule,
135+
NgtValueAttributeModule,
136+
NgtMeshStandardMaterialModule,
137+
NgtSobaStageModule,
138+
NgtRadianPipeModule,
139+
NgtSobaOrbitControlsModule,
140+
NgtCanvasModule,
141+
NgtSphereGeometryModule,
142+
NgtMeshPhongMaterialModule,
143+
NgtSobaContactShadowsModule,
144+
],
145+
})
146+
export class ReuseGltfComponentModule {}

‎apps/sandbox/src/app/routes.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,4 +122,15 @@ export const routes: Routes = [
122122
source: 'https://github.com/nartc/angular-three/tree/main/apps/sandbox/src/app/movement-regression',
123123
},
124124
},
125+
{
126+
path: 'reuse-gltf',
127+
loadChildren: () => import('./reuse-gltf/reuse-gltf.component').then((m) => m.ReuseGltfComponentModule),
128+
data: {
129+
title: 'Reusing GLTF',
130+
description: 'Performance tip by reusing GLTF with NgtGLTFLoader',
131+
link: '/reuse-gltf',
132+
asset: 'assets/examples/reuse-gltf',
133+
source: 'https://github.com/nartc/angular-three/tree/main/apps/sandbox/src/app/reuse-gltf',
134+
},
135+
},
125136
];

‎apps/sandbox/src/assets/examples/reuse-gltf.gif‎

843 KB
Loading

‎apps/sandbox/src/assets/examples/reuse-gltf.mp4‎

245 KB
Binary file not shown.

‎apps/sandbox/src/assets/examples/reuse-gltf.webm‎

120 KB
Binary file not shown.

0 commit comments

Comments
 (0)