Skip to content

Commit 483efb9

Browse files
nartcnartc
committed
docs(examples): update decal routes
1 parent fef57f4 commit 483efb9

File tree

3 files changed

+191
-10
lines changed

3 files changed

+191
-10
lines changed

‎apps/kitchen-sink-new/src/app/soba/decal/decal.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 shadows [camera]="{ position: [-2.5, 1, 10], fov: 17 }">
8+
<app-scene-graph *canvasContent />
9+
</ngt-canvas>
10+
`,
11+
changeDetection: ChangeDetectionStrategy.OnPush,
12+
host: { class: 'decal-soba' },
13+
imports: [NgtCanvas, NgtCanvasContent, SceneGraph],
14+
})
15+
export default class Decal {}

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

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
import {
2+
ChangeDetectionStrategy,
3+
Component,
4+
CUSTOM_ELEMENTS_SCHEMA,
5+
ElementRef,
6+
input,
7+
signal,
8+
Signal,
9+
viewChild,
10+
} from '@angular/core';
11+
import { injectBeforeRender, NgtArgs } from 'angular-three';
12+
import { NgtsText } from 'angular-three-soba/abstractions';
13+
import { NgtsPerspectiveCamera } from 'angular-three-soba/cameras';
14+
import { NgtsOrbitControls } from 'angular-three-soba/controls';
15+
import { injectGLTF, injectTexture } from 'angular-three-soba/loaders';
16+
import { NgtsDecal } from 'angular-three-soba/misc';
17+
import {
18+
NgtsAccumulativeShadows,
19+
NgtsEnvironment,
20+
NgtsRandomizedLights,
21+
NgtsRenderTexture,
22+
NgtsRenderTextureContent,
23+
} from 'angular-three-soba/staging';
24+
import { Mesh } from 'three';
25+
26+
@Component({
27+
selector: 'app-dodecahedron',
28+
template: `
29+
<ngt-group [scale]="scale()" [position]="position()">
30+
<ngt-mesh
31+
#mesh
32+
[scale]="clicked() ? 2.25 : 1.75"
33+
(click)="$event.stopPropagation(); clicked.set(!clicked())"
34+
(pointerover)="hovered.set(true)"
35+
(pointerout)="hovered.set(false)"
36+
>
37+
<ngt-dodecahedron-geometry *args="[0.75]" />
38+
<ngt-mesh-standard-material [color]="hovered() ? 'hotpink' : 'goldenrod'" />
39+
<ngts-decal [options]="{ polygonOffsetFactor: 0, position: [0, -0.2, 0.5], scale: 0.75, map: texture() }" />
40+
</ngt-mesh>
41+
</ngt-group>
42+
`,
43+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
44+
changeDetection: ChangeDetectionStrategy.OnPush,
45+
imports: [NgtArgs, NgtsDecal],
46+
})
47+
export class Dodecahedron {
48+
protected Math = Math;
49+
50+
scale = input(1);
51+
position = input([0, 0, 0]);
52+
53+
protected texture = injectTexture(() => './three.png');
54+
55+
protected clicked = signal(false);
56+
protected hovered = signal(false);
57+
58+
private meshRef = viewChild.required<ElementRef<Mesh>>('mesh');
59+
60+
constructor() {
61+
injectBeforeRender(({ delta }) => {
62+
const mesh = this.meshRef().nativeElement;
63+
mesh.rotation.x += delta;
64+
mesh.rotation.y += delta;
65+
});
66+
}
67+
}
68+
69+
@Component({
70+
selector: 'app-bunny',
71+
template: `
72+
@if (gltf(); as gltf) {
73+
<ngt-mesh castShadow receiveShadow [geometry]="gltf.nodes.bunny.geometry" [dispose]="null">
74+
<ngt-mesh-standard-material color="black" />
75+
<ngts-decal [options]="{ position: [0, 0.9, 0.75], rotation: [-0.4, Math.PI, 0], scale: [0.9, 0.25, 1] }">
76+
<ngt-mesh-standard-material [roughness]="1" transparent polygonOffset [polygonOffsetFactor]="-1">
77+
<ngts-render-texture>
78+
<ng-template renderTextureContent>
79+
<ngts-perspective-camera
80+
[options]="{ makeDefault: true, manual: true, aspect: 0.9 / 0.25, position: [0, 0, 5] }"
81+
/>
82+
<ngt-color attach="background" *args="['#af2040']" />
83+
<ngt-ambient-light [intensity]="Math.PI" />
84+
<ngt-directional-light [position]="[10, 10, 5]" />
85+
<ngts-text
86+
text="hello from soba"
87+
[options]="{ rotation: [0, Math.PI, 0], fontSize: 4, color: 'white' }"
88+
/>
89+
<app-dodecahedron />
90+
</ng-template>
91+
</ngts-render-texture>
92+
</ngt-mesh-standard-material>
93+
</ngts-decal>
94+
</ngt-mesh>
95+
}
96+
`,
97+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
98+
changeDetection: ChangeDetectionStrategy.OnPush,
99+
imports: [
100+
NgtsDecal,
101+
NgtsRenderTexture,
102+
NgtsRenderTextureContent,
103+
NgtsPerspectiveCamera,
104+
NgtArgs,
105+
NgtsText,
106+
Dodecahedron,
107+
],
108+
})
109+
export class Bunny {
110+
protected readonly Math = Math;
111+
112+
protected gltf = injectGLTF(() => './bunny-transformed.glb') as Signal<any | null>;
113+
114+
private textRef = viewChild(NgtsText);
115+
116+
constructor() {
117+
injectBeforeRender(({ clock }) => {
118+
const text = this.textRef()?.troikaMesh;
119+
if (text) {
120+
text.position.x = Math.sin(clock.elapsedTime) * 6.5;
121+
}
122+
});
123+
}
124+
}
125+
126+
@Component({
127+
selector: 'app-scene-graph',
128+
template: `
129+
<ngt-color attach="background" *args="['#f0f0f0']" />
130+
<ngt-ambient-light [intensity]="0.25 * Math.PI" />
131+
<ngt-spot-light [decay]="0" [position]="[10, 10, 10]" [angle]="0.15" [penumbra]="1" />
132+
<ngt-point-light [decay]="0" [position]="[-10, 0, -5]" [intensity]="6" />
133+
<ngt-group [position]="[0, -0.75, 0]">
134+
<app-bunny />
135+
<app-dodecahedron [position]="[-0.9, 2, 0.4]" [scale]="0.1" />
136+
<ngts-accumulative-shadows
137+
[options]="{ frames: 80, color: 'black', opacity: 1, scale: 12, position: [0, 0.04, 0], alphaTest: 0.65 }"
138+
>
139+
<ngts-randomized-lights [options]="{ amount: 8, radius: 5, position: [5, 5, -10], bias: 0.001 }" />
140+
</ngts-accumulative-shadows>
141+
</ngt-group>
142+
<ngts-environment
143+
[options]="{
144+
files: 'https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/1k/dancing_hall_1k.hdr',
145+
background: true,
146+
blur: 1,
147+
}"
148+
/>
149+
<ngts-orbit-controls [options]="{ makeDefault: true }" />
150+
`,
151+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
152+
changeDetection: ChangeDetectionStrategy.OnPush,
153+
host: { class: 'decal-soba-experience' },
154+
imports: [
155+
NgtArgs,
156+
Bunny,
157+
Dodecahedron,
158+
NgtsAccumulativeShadows,
159+
NgtsRandomizedLights,
160+
NgtsEnvironment,
161+
NgtsOrbitControls,
162+
],
163+
})
164+
export class SceneGraph {
165+
protected Math = Math;
166+
}

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -45,16 +45,16 @@ const routes: Routes = [
4545
// },
4646
// },
4747
// },
48-
// {
49-
// path: 'decal',
50-
// loadComponent: () => import('./decal/decal'),
51-
// data: {
52-
// credits: {
53-
// title: 'Iridescent Decals',
54-
// link: 'https://pmndrs.github.io/examples/demos/iridescent-decals',
55-
// },
56-
// },
57-
// },
48+
{
49+
path: 'decal',
50+
loadComponent: () => import('./decal/decal'),
51+
data: {
52+
credits: {
53+
title: 'Iridescent Decals',
54+
link: 'https://pmndrs.github.io/examples/demos/iridescent-decals',
55+
},
56+
},
57+
},
5858
// {
5959
// path: 'html-chart',
6060
// loadComponent: () => import('./html-chart/html-chart'),

0 commit comments

Comments
 (0)