Skip to content

Commit 5ebb619

Browse files
nartcnartc
committed
docs(examples): update basic routes
1 parent 37c8784 commit 5ebb619

File tree

3 files changed

+179
-4
lines changed

3 files changed

+179
-4
lines changed

‎apps/kitchen-sink-new/src/app/soba/basic/basic.ts

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { ChangeDetectionStrategy, Component } from '@angular/core';
2+
import { NgtCanvas, NgtCanvasContent } from 'angular-three/dom';
3+
import { SceneGraph, bloom, glitch, selectedAction } from './scene';
4+
5+
@Component({
6+
template: `
7+
<ngt-canvas [camera]="{ fov: 75, position: [0, 0, 3] }" shadows>
8+
<app-basic-scene-graph *canvasContent />
9+
</ngt-canvas>
10+
<div class="absolute top-0 right-0 flex flex-col">
11+
<select [value]="selectedAction()" #select (change)="selectedAction.set(select.value)">
12+
<option>Strut</option>
13+
<option>Dance</option>
14+
<option>Idle</option>
15+
</select>
16+
17+
<div class="text-white">
18+
<label for="bloom">Bloom</label>
19+
<input id="bloom" type="checkbox" #bloomInput [checked]="bloom()" (change)="bloom.set(bloomInput.checked)" />
20+
</div>
21+
22+
<div class="text-white">
23+
<label for="glitch">Glitch</label>
24+
<input
25+
id="glitch"
26+
type="checkbox"
27+
#glitchInput
28+
[checked]="glitch()"
29+
(change)="glitch.set(glitchInput.checked)"
30+
/>
31+
</div>
32+
</div>
33+
`,
34+
changeDetection: ChangeDetectionStrategy.OnPush,
35+
imports: [NgtCanvas, SceneGraph, NgtCanvasContent],
36+
host: { class: 'basic-soba' },
37+
})
38+
export default class Basic {
39+
protected selectedAction = selectedAction;
40+
protected bloom = bloom;
41+
protected glitch = glitch;
42+
}

‎apps/kitchen-sink-new/src/app/soba/basic/scene.ts

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
import {
2+
CUSTOM_ELEMENTS_SCHEMA,
3+
ChangeDetectionStrategy,
4+
Component,
5+
Directive,
6+
ElementRef,
7+
computed,
8+
effect,
9+
inject,
10+
input,
11+
signal,
12+
viewChild,
13+
} from '@angular/core';
14+
import { NgtArgs } from 'angular-three';
15+
import { NgtpBloom, NgtpEffectComposer, NgtpGlitch } from 'angular-three-postprocessing';
16+
import { NgtsOrbitControls } from 'angular-three-soba/controls';
17+
import { injectGLTF } from 'angular-three-soba/loaders';
18+
import { NgtsAnimation, injectAnimations } from 'angular-three-soba/misc';
19+
import { injectMatcapTexture } from 'angular-three-soba/staging';
20+
import { Bone, Group, MeshStandardMaterial, Object3D, SRGBColorSpace, SkinnedMesh } from 'three';
21+
import { GLTF } from 'three-stdlib';
22+
23+
export const selectedAction = signal('Strut');
24+
export const bloom = signal(false);
25+
export const glitch = signal(false);
26+
27+
type BotGLTF = GLTF & {
28+
nodes: { 'Y-Bot': Object3D; YB_Body: SkinnedMesh; YB_Joints: SkinnedMesh; mixamorigHips: Bone };
29+
materials: { YB_Body: MeshStandardMaterial; YB_Joints: MeshStandardMaterial };
30+
};
31+
32+
@Directive({ selector: '[animations]' })
33+
export class BotAnimations {
34+
animations = input.required<NgtsAnimation>();
35+
referenceRef = input.required<ElementRef<Object3D> | undefined>();
36+
37+
constructor() {
38+
const groupRef = inject<ElementRef<Group>>(ElementRef);
39+
const host = computed(() => (this.referenceRef() ? groupRef : null));
40+
41+
// NOTE: the consumer controls the timing of injectAnimations. It's not afterNextRender anymore
42+
// but when the reference is resolved which in this particular case, it is the Bone mixamorigHips
43+
// that the animations are referring to.
44+
const animationsApi = injectAnimations(this.animations, host);
45+
effect((onCleanup) => {
46+
if (animationsApi.isReady) {
47+
const actionName = selectedAction();
48+
animationsApi.actions[actionName].reset().fadeIn(0.5).play();
49+
onCleanup(() => {
50+
animationsApi.actions[actionName].fadeOut(0.5);
51+
});
52+
}
53+
});
54+
}
55+
}
56+
57+
@Component({
58+
selector: 'app-bot',
59+
template: `
60+
<ngt-group [position]="[0, -1, 0]">
61+
<ngt-grid-helper *args="[10, 20]" />
62+
@if (gltf(); as gltf) {
63+
<ngt-group [dispose]="null" [animations]="gltf" [referenceRef]="boneRef()">
64+
<ngt-group [rotation]="[Math.PI / 2, 0, 0]" [scale]="0.01">
65+
<ngt-primitive #bone *args="[gltf.nodes.mixamorigHips]" />
66+
<ngt-skinned-mesh [geometry]="gltf.nodes.YB_Body.geometry" [skeleton]="gltf.nodes.YB_Body.skeleton">
67+
<ngt-mesh-matcap-material [matcap]="matcapBody.texture()" />
68+
</ngt-skinned-mesh>
69+
<ngt-skinned-mesh [geometry]="gltf.nodes.YB_Joints.geometry" [skeleton]="gltf.nodes.YB_Joints.skeleton">
70+
<ngt-mesh-matcap-material [matcap]="matcapJoints.texture()" />
71+
</ngt-skinned-mesh>
72+
</ngt-group>
73+
</ngt-group>
74+
}
75+
</ngt-group>
76+
`,
77+
imports: [NgtArgs, BotAnimations],
78+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
79+
changeDetection: ChangeDetectionStrategy.OnPush,
80+
})
81+
export class Bot {
82+
protected Math = Math;
83+
84+
protected gltf = injectGLTF<BotGLTF>(() => './ybot.glb');
85+
protected matcapBody = injectMatcapTexture(() => '293534_B2BFC5_738289_8A9AA7', {
86+
onLoad: (textures) => {
87+
textures[0].colorSpace = SRGBColorSpace;
88+
},
89+
});
90+
protected matcapJoints = injectMatcapTexture(() => '3A2412_A78B5F_705434_836C47', {
91+
onLoad: (textures) => {
92+
textures[0].colorSpace = SRGBColorSpace;
93+
},
94+
});
95+
96+
protected boneRef = viewChild<ElementRef<Bone>>('bone');
97+
}
98+
99+
@Component({
100+
selector: 'app-basic-scene-graph',
101+
template: `
102+
<ngt-color *args="['#303030']" attach="background" />
103+
<ngt-ambient-light [intensity]="0.8" />
104+
<ngt-point-light [intensity]="Math.PI" [decay]="0" [position]="[0, 6, 0]" />
105+
106+
<app-bot />
107+
108+
@if (!asRenderTexture()) {
109+
<ngtp-effect-composer>
110+
@if (bloom()) {
111+
<ngtp-bloom [options]="{ kernelSize: 3, luminanceThreshold: 0, luminanceSmoothing: 0.4, intensity: 1.5 }" />
112+
}
113+
114+
@if (glitch()) {
115+
<ngtp-glitch />
116+
}
117+
</ngtp-effect-composer>
118+
119+
<ngts-orbit-controls [options]="{ makeDefault: true, autoRotate: true }" />
120+
}
121+
`,
122+
imports: [NgtsOrbitControls, NgtArgs, Bot, NgtpEffectComposer, NgtpBloom, NgtpGlitch],
123+
changeDetection: ChangeDetectionStrategy.OnPush,
124+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
125+
host: { class: 'soba-experience' },
126+
})
127+
export class SceneGraph {
128+
protected Math = Math;
129+
protected bloom = bloom;
130+
protected glitch = glitch;
131+
132+
asRenderTexture = input(false);
133+
}

‎apps/kitchen-sink-new/src/app/soba/soba.routes.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { Routes } from '@angular/router';
22

33
const routes: Routes = [
4-
// {
5-
// path: 'basic',
6-
// loadComponent: () => import('./basic/basic'),
7-
// },
4+
{
5+
path: 'basic',
6+
loadComponent: () => import('./basic/basic'),
7+
},
88
// {
99
// path: 'hud',
1010
// loadComponent: () => import('./hud/hud'),

0 commit comments

Comments
 (0)