Skip to content

Commit 7f17b05

Browse files
nartcnartc
committed
docs(examples): update hud routes
1 parent 483efb9 commit 7f17b05

File tree

3 files changed

+207
-10
lines changed

3 files changed

+207
-10
lines changed

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { ChangeDetectionStrategy, Component } from '@angular/core';
2+
import { NgtCanvas, NgtCanvasContent } from 'angular-three/dom';
3+
import { SceneGraph } from './scene';
4+
5+
@Component({
6+
template: `
7+
<ngt-canvas>
8+
<app-scene-graph *canvasContent />
9+
</ngt-canvas>
10+
`,
11+
imports: [NgtCanvas, SceneGraph, NgtCanvasContent],
12+
changeDetection: ChangeDetectionStrategy.OnPush,
13+
host: { class: 'hud-soba' },
14+
})
15+
export default class RenderTexture {}

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

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
import {
2+
CUSTOM_ELEMENTS_SCHEMA,
3+
ChangeDetectionStrategy,
4+
Component,
5+
ElementRef,
6+
computed,
7+
inject,
8+
input,
9+
signal,
10+
viewChild,
11+
} from '@angular/core';
12+
import {
13+
NgtArgs,
14+
NgtPortal,
15+
NgtPortalAutoRender,
16+
NgtPortalContent,
17+
injectBeforeRender,
18+
injectStore,
19+
} from 'angular-three';
20+
import { NgtsText } from 'angular-three-soba/abstractions';
21+
import { NgtsOrthographicCamera, NgtsPerspectiveCamera } from 'angular-three-soba/cameras';
22+
import { NgtsOrbitControls } from 'angular-three-soba/controls';
23+
import { NgtsEnvironment, NgtsRenderTexture, NgtsRenderTextureContent } from 'angular-three-soba/staging';
24+
import { Matrix4, Mesh, Scene } from 'three';
25+
26+
@Component({
27+
selector: 'app-torus',
28+
template: `
29+
<ngt-mesh [scale]="scale()" (pointerover)="hovered.set(true)" (pointerout)="hovered.set(false)">
30+
<ngt-torus-geometry *args="[1, 0.25, 32, 100]" />
31+
<ngt-mesh-standard-material [color]="color()" />
32+
</ngt-mesh>
33+
`,
34+
imports: [NgtArgs],
35+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
36+
changeDetection: ChangeDetectionStrategy.OnPush,
37+
})
38+
export class Torus {
39+
scale = input(1);
40+
41+
protected hovered = signal(false);
42+
protected color = computed(() => (this.hovered() ? 'hotpink' : 'orange'));
43+
}
44+
45+
@Component({
46+
selector: 'app-face-material',
47+
template: `
48+
<ngt-mesh-standard-material [attach]="['material', index()]" [color]="color()">
49+
<ngts-render-texture [options]="{ frames: 6, anisotropy: 16 }">
50+
<ng-template renderTextureContent>
51+
<ngt-color *args="['white']" attach="background" />
52+
<ngts-orthographic-camera
53+
[options]="{ makeDefault: true, left: -1, right: 1, top: 1, bottom: -1, position: [0, 0, 10], zoom: 0.5 }"
54+
/>
55+
<ngts-text
56+
[text]="text()"
57+
[options]="{ color: 'black', font: 'https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff' }"
58+
/>
59+
</ng-template>
60+
</ngts-render-texture>
61+
</ngt-mesh-standard-material>
62+
`,
63+
imports: [NgtsText, NgtsRenderTexture, NgtsOrthographicCamera, NgtArgs, NgtsRenderTextureContent],
64+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
65+
changeDetection: ChangeDetectionStrategy.OnPush,
66+
})
67+
export class FaceMaterial {
68+
index = input.required<number>();
69+
text = input.required<string>();
70+
71+
private box = inject(Box);
72+
protected color = computed(() => (this.box.hovered() === this.index() ? 'hotpink' : 'orange'));
73+
}
74+
75+
@Component({
76+
selector: 'app-box',
77+
template: `
78+
<ngt-mesh
79+
#mesh
80+
[position]="position()"
81+
[scale]="scale()"
82+
(click)="clicked.set(!clicked())"
83+
(pointermove)="$event.stopPropagation(); hovered.set($any($event).face.materialIndex)"
84+
(pointerout)="hovered.set(-1)"
85+
>
86+
<ngt-box-geometry />
87+
@for (face of faces; track face) {
88+
<app-face-material [index]="$index" [text]="face" />
89+
}
90+
</ngt-mesh>
91+
`,
92+
imports: [FaceMaterial],
93+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
94+
changeDetection: ChangeDetectionStrategy.OnPush,
95+
})
96+
export class Box {
97+
position = input([0, 0, 0]);
98+
99+
mesh = viewChild.required<ElementRef<Mesh>>('mesh');
100+
101+
hovered = signal(-1);
102+
protected clicked = signal(false);
103+
protected scale = computed(() => (this.clicked() ? 1.5 : 1));
104+
105+
protected faces = ['front', 'back', 'top', 'bottom', 'left', 'right'];
106+
107+
constructor() {
108+
injectBeforeRender(({ delta }) => {
109+
this.mesh().nativeElement.rotation.x += delta;
110+
});
111+
}
112+
}
113+
114+
@Component({
115+
selector: 'app-view-cube',
116+
template: `
117+
<ngt-portal [container]="scene()" autoRender>
118+
<ng-template portalContent>
119+
<ngt-ambient-light [intensity]="Math.PI / 2" />
120+
<ngt-spot-light [position]="[10, 10, 10]" [angle]="0.15" [penumbra]="0" [decay]="0" [intensity]="Math.PI" />
121+
<ngt-point-light [position]="[-10, -10, -10]" [decay]="0" [intensity]="Math.PI" />
122+
<ngts-perspective-camera [options]="{ makeDefault: true, position: [0, 0, 10] }" />
123+
<app-box [position]="boxPosition()" />
124+
<ngt-ambient-light [intensity]="1" />
125+
<ngt-point-light [position]="[200, 200, 100]" [intensity]="0.5" />
126+
</ng-template>
127+
</ngt-portal>
128+
`,
129+
imports: [Box, NgtPortal, NgtPortalContent, NgtPortalAutoRender, NgtsPerspectiveCamera],
130+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
131+
changeDetection: ChangeDetectionStrategy.OnPush,
132+
})
133+
export class ViewCube {
134+
protected Math = Math;
135+
136+
private store = injectStore();
137+
138+
private box = viewChild(Box);
139+
140+
protected boxPosition = computed(() => [
141+
this.store.viewport.width() / 2 - 1,
142+
this.store.viewport.height() / 2 - 1,
143+
0,
144+
]);
145+
protected scene = computed(() => {
146+
const scene = new Scene();
147+
scene.name = 'hud-view-cube-virtual-scene';
148+
return scene;
149+
});
150+
151+
constructor() {
152+
const matrix = new Matrix4();
153+
injectBeforeRender(() => {
154+
const box = this.box()?.mesh().nativeElement;
155+
if (box) {
156+
matrix.copy(this.store.snapshot.camera.matrix).invert();
157+
box.quaternion.setFromRotationMatrix(matrix);
158+
}
159+
});
160+
}
161+
}
162+
163+
@Component({
164+
selector: 'app-scene-graph',
165+
template: `
166+
<ngt-color *args="['#dcdcdc']" attach="background" />
167+
<ngt-ambient-light [intensity]="0.5 * Math.PI" />
168+
169+
<app-torus [scale]="1.75" />
170+
<app-view-cube />
171+
172+
<ngts-orbit-controls />
173+
<ngts-environment [options]="{ preset: 'city' }" />
174+
`,
175+
imports: [NgtsOrbitControls, NgtsEnvironment, Torus, ViewCube, NgtArgs],
176+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
177+
changeDetection: ChangeDetectionStrategy.OnPush,
178+
host: { class: 'hud-experience' },
179+
})
180+
export class SceneGraph {
181+
protected Math = Math;
182+
}

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,16 @@ const routes: Routes = [
55
path: 'basic',
66
loadComponent: () => import('./basic/basic'),
77
},
8-
// {
9-
// path: 'hud',
10-
// loadComponent: () => import('./hud/hud'),
11-
// data: {
12-
// credits: {
13-
// title: 'HUD',
14-
// link: 'https://pmndrs.github.io/examples/demos/viewcube',
15-
// },
16-
// },
17-
// },
8+
{
9+
path: 'hud',
10+
loadComponent: () => import('./hud/hud'),
11+
data: {
12+
credits: {
13+
title: 'HUD',
14+
link: 'https://pmndrs.github.io/examples/demos/viewcube',
15+
},
16+
},
17+
},
1818
// {
1919
// path: 'render-texture',
2020
// loadComponent: () => import('./render-texture/render-texture'),

0 commit comments

Comments
 (0)