Skip to content

Commit c7327d4

Browse files
nartcnartc
committed
docs: add new demo
1 parent 8387f21 commit c7327d4

File tree

15 files changed

+403
-37
lines changed

15 files changed

+403
-37
lines changed

‎apps/kitchen-sink/project.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,10 @@
2121
}
2222
],
2323
"styles": ["apps/kitchen-sink/src/styles.css"],
24-
"scripts": []
24+
"scripts": [],
25+
"loader": {
26+
".blob": "file"
27+
}
2528
},
2629
"configurations": {
2730
"production": {

‎apps/kitchen-sink/src/app/app.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, computed, inject, signal } from '@angular/core';
1+
import { Component, computed, inject } from '@angular/core';
22
import { toSignal } from '@angular/core/rxjs-interop';
33
import { NavigationEnd, Router, RouterOutlet } from '@angular/router';
44
import { filter } from 'rxjs';

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

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,7 @@ export class Bot {
9292
}
9393

9494
@Component({
95+
selector: 'app-basic-experience',
9596
standalone: true,
9697
template: `
9798
<ngt-color *args="['#303030']" attach="background" />
@@ -100,15 +101,17 @@ export class Bot {
100101
101102
<app-bot />
102103
103-
<ngtp-effect-composer>
104-
@if (bloom()) {
105-
<ngtp-bloom [options]="{ kernelSize: 3, luminanceThreshold: 0, luminanceSmoothing: 0.4, intensity: 1.5 }" />
106-
}
104+
@if (withEffect()) {
105+
<ngtp-effect-composer>
106+
@if (bloom()) {
107+
<ngtp-bloom [options]="{ kernelSize: 3, luminanceThreshold: 0, luminanceSmoothing: 0.4, intensity: 1.5 }" />
108+
}
107109
108-
@if (glitch()) {
109-
<ngtp-glitch />
110-
}
111-
</ngtp-effect-composer>
110+
@if (glitch()) {
111+
<ngtp-glitch />
112+
}
113+
</ngtp-effect-composer>
114+
}
112115
113116
<ngts-orbit-controls [options]="{ makeDefault: true, autoRotate: true }" />
114117
`,
@@ -121,4 +124,6 @@ export class Experience {
121124
protected Math = Math;
122125
protected bloom = bloom;
123126
protected glitch = glitch;
127+
128+
withEffect = input(true);
124129
}

‎apps/kitchen-sink/src/app/soba/bruno-simons-20k/experience.ts‎

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,7 @@ export class Model {
102102
}
103103

104104
@Component({
105+
selector: 'app-bruno-experience',
105106
standalone: true,
106107
template: `
107108
<ngt-color attach="background" *args="['#f0f0f0']" />
@@ -146,22 +147,24 @@ export class Model {
146147
/>
147148
</ngts-accumulative-shadows>
148149
149-
<ngtp-effect-composer>
150-
<ngtp-n8ao [options]="{ aoRadius: 0.5, intensity: 1 }" />
151-
<ngtp-depth-of-field [options]="{ target: [0, 0, -2.5], focusRange: 0.1, bokehScale: 10 }" />
152-
<ngtp-tone-mapping />
153-
</ngtp-effect-composer>
150+
@if (withEffect()) {
151+
<ngtp-effect-composer>
152+
<ngtp-n8ao [options]="{ aoRadius: 0.5, intensity: 1 }" />
153+
<ngtp-depth-of-field [options]="{ target: [0, 0, -2.5], focusRange: 0.1, bokehScale: 10 }" />
154+
<ngtp-tone-mapping />
155+
</ngtp-effect-composer>
154156
155-
<ngts-orbit-controls
156-
[options]="{
157-
autoRotate: true,
158-
autoRotateSpeed: 0.1,
159-
enablePan: false,
160-
enableZoom: false,
161-
minPolarAngle: Math.PI / 4,
162-
maxPolarAngle: Math.PI / 4,
163-
}"
164-
/>
157+
<ngts-orbit-controls
158+
[options]="{
159+
autoRotate: true,
160+
autoRotateSpeed: 0.1,
161+
enablePan: false,
162+
enableZoom: false,
163+
minPolarAngle: Math.PI / 4,
164+
maxPolarAngle: Math.PI / 4,
165+
}"
166+
/>
167+
}
165168
`,
166169
schemas: [CUSTOM_ELEMENTS_SCHEMA],
167170
changeDetection: ChangeDetectionStrategy.OnPush,
@@ -189,4 +192,6 @@ export class Experience {
189192
protected readonly Math = Math;
190193

191194
protected debug = debug;
195+
196+
withEffect = input(true);
192197
}

‎apps/kitchen-sink/src/app/soba/instanced-vertex-colors/experience.ts‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {
33
Component,
44
CUSTOM_ELEMENTS_SCHEMA,
55
ElementRef,
6+
input,
67
signal,
78
untracked,
89
viewChild,
@@ -13,6 +14,8 @@ import { NgtpN8AO } from 'angular-three-postprocessing/n8ao';
1314
import { Color, InstancedMesh, Object3D } from 'three';
1415
import niceColors from '../../colors';
1516

17+
/* credit: https://pmndrs.github.io/examples/demos/instanced-vertex-colors */
18+
1619
const tempObject = new Object3D();
1720
const tempColor = new Color();
1821
const data = Array.from({ length: 1000 }, () => ({ color: niceColors[Math.floor(Math.random() * 5)], scale: 1 }));
@@ -99,14 +102,17 @@ export class Boxes {
99102
}
100103

101104
@Component({
105+
selector: 'app-instanced-vertex-colors-experience',
102106
standalone: true,
103107
template: `
104108
<ngt-color attach="background" *args="['#282828']" />
105109
<app-boxes />
106-
<ngtp-effect-composer [options]="{ enableNormalPass: false }">
107-
<ngtp-n8ao [options]="{ aoRadius: 0.5, intensity: Math.PI }" />
108-
<ngtp-bloom [options]="{ luminanceThreshold: 1, intensity: 0.5 * Math.PI, levels: 9, mipmapBlur: true }" />
109-
</ngtp-effect-composer>
110+
@if (withEffect()) {
111+
<ngtp-effect-composer [options]="{ enableNormalPass: false }">
112+
<ngtp-n8ao [options]="{ aoRadius: 0.5, intensity: Math.PI }" />
113+
<ngtp-bloom [options]="{ luminanceThreshold: 1, intensity: 0.5 * Math.PI, levels: 9, mipmapBlur: true }" />
114+
</ngtp-effect-composer>
115+
}
110116
`,
111117
schemas: [CUSTOM_ELEMENTS_SCHEMA],
112118
changeDetection: ChangeDetectionStrategy.OnPush,
@@ -115,4 +121,6 @@ export class Boxes {
115121
})
116122
export class Experience {
117123
protected readonly Math = Math;
124+
125+
withEffect = input(true);
118126
}

‎apps/kitchen-sink/src/app/soba/lod/experience.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ export class LODBust {
5353
}
5454

5555
@Component({
56+
selector: 'app-lod-experience',
5657
standalone: true,
5758
template: `
5859
@for (p of positions; track $index) {

‎apps/kitchen-sink/src/app/soba/lowpoly-earth/experience.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,7 @@ export class Model {
125125
}
126126

127127
@Component({
128+
selector: 'app-lowpoly-earth-experience',
128129
standalone: true,
129130
template: `
130131
<ngt-color *args="['#ececec']" attach="background" />

‎apps/kitchen-sink/src/app/soba/portal-shapes/constants.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { Experience as BasicExperience } from '../basic/experience';
2+
import { Experience as BrunoExperience } from '../bruno-simons-20k/experience';
3+
import { Experience as InstancedVertexColorsExperience } from '../instanced-vertex-colors/experience';
4+
import { Experience as LodExperience } from '../lod/experience';
5+
import { Experience as LowpolyEarthExperience } from '../lowpoly-earth/experience';
6+
import { Experience as ShakyExperience } from '../shaky/experience';
7+
import { Experience as StarsExperience } from '../stars/experience';
8+
9+
export const Scenes = {
10+
basic: BasicExperience,
11+
instancedVertexColors: InstancedVertexColorsExperience,
12+
lowpolyEarth: LowpolyEarthExperience,
13+
shaky: ShakyExperience,
14+
stars: StarsExperience,
15+
lod: LodExperience,
16+
bruno: BrunoExperience,
17+
} as const;

‎apps/kitchen-sink/src/app/soba/portal-shapes/experience.ts‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, inject } from '@angular/core';
2+
import { NgtArgs } from 'angular-three';
3+
import { NgtrCuboidCollider, NgtrPhysics } from 'angular-three-rapier';
4+
import { NgtsCameraControls } from 'angular-three-soba/controls';
5+
import { NgtsPreload } from 'angular-three-soba/misc';
6+
import { NgtsContactShadows, NgtsEnvironment, NgtsLightformer } from 'angular-three-soba/staging';
7+
import { Experience as BasicExperience } from '../basic/experience';
8+
import { Experience as BrunoExperience } from '../bruno-simons-20k/experience';
9+
import { Experience as InstancedVertexColorsExperience } from '../instanced-vertex-colors/experience';
10+
import { Experience as LodExperience } from '../lod/experience';
11+
import { Experience as LowpolyEarthExperience } from '../lowpoly-earth/experience';
12+
import { Experience as ShakyExperience } from '../shaky/experience';
13+
import { Experience as StarsExperience } from '../stars/experience';
14+
import { Letter } from './letter';
15+
16+
/* credit: https://pmndrs.github.io/examples/demos/portal-shapes */
17+
18+
@Component({
19+
standalone: true,
20+
template: `
21+
<ngt-color *args="['#4899c9']" attach="background" />
22+
23+
<ngtr-physics [options]="{ gravity: [0, -60, 0] }">
24+
<ng-template>
25+
<!-- ANGULAR -->
26+
<app-letter char="A" [position]="[1, 50, -1]">
27+
<ng-template>
28+
<app-basic-experience [withEffect]="false" />
29+
</ng-template>
30+
</app-letter>
31+
32+
<app-letter char="N" [position]="[2, 60, -2]" [rotation]="[4, 5, 6]">
33+
<ng-template>
34+
<app-bruno-experience [withEffect]="false" />
35+
</ng-template>
36+
</app-letter>
37+
38+
<app-letter char="G" [position]="[3, 70, 2]" [rotation]="[7, 8, 9]">
39+
<ng-template>
40+
<app-instanced-vertex-colors-experience [withEffect]="false" />
41+
</ng-template>
42+
</app-letter>
43+
44+
<app-letter char="U" [position]="[-1, 80, 3]" [rotation]="[10, 11, 12]">
45+
<ng-template>
46+
<app-lod-experience />
47+
</ng-template>
48+
</app-letter>
49+
50+
<app-letter char="L" [position]="[-2, 90, 2]" [rotation]="[13, 14, 15]">
51+
<ng-template>
52+
<ngt-group [scale]="15">
53+
<app-lowpoly-earth-experience />
54+
</ngt-group>
55+
</ng-template>
56+
</app-letter>
57+
58+
<app-letter char="A" [position]="[-3, 100, -3]" [rotation]="[16, 17, 18]">
59+
<ng-template>
60+
<app-shaky-experience [withEffect]="false" />
61+
</ng-template>
62+
</app-letter>
63+
64+
<app-letter char="R" [position]="[-4, 110, 1]" [rotation]="[19, 20, 21]" [stencilBuffer]="true">
65+
<ng-template>
66+
<app-stars-experience />
67+
</ng-template>
68+
</app-letter>
69+
70+
<!-- invisible walls -->
71+
<ngt-object3D ngtrCuboidCollider [args]="[100, 1, 100]" [position]="[0, -6, 0]" />
72+
<ngt-object3D ngtrCuboidCollider [args]="[30, 100, 1]" [position]="[0, 0, -30]" />
73+
<ngt-object3D ngtrCuboidCollider [args]="[30, 100, 1]" [position]="[0, 0, 10]" />
74+
<ngt-object3D ngtrCuboidCollider [args]="[1, 100, 30]" [position]="[-30, 0, 0]" />
75+
<ngt-object3D ngtrCuboidCollider [args]="[1, 100, 30]" [position]="[30, 0, 0]" />
76+
</ng-template>
77+
</ngtr-physics>
78+
79+
<!-- environment -->
80+
<ngts-environment
81+
[options]="{
82+
files: 'https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/1k/dancing_hall_1k.hdr',
83+
resolution: 1024,
84+
}"
85+
>
86+
<ng-template>
87+
<!-- On top of the HDRI we add some rectangular and circular shapes for nicer reflections -->
88+
<ngt-group [rotation]="[-Math.PI / 3, 0, 0]">
89+
<ngts-lightformer
90+
[options]="{
91+
intensity: 4 * Math.PI,
92+
rotation: [Math.PI / 2, 0, 0],
93+
position: [0, 5, -9],
94+
scale: [10, 10, 1],
95+
}"
96+
/>
97+
@for (x of [2, 0, 2, 0, 2, 0, 2, 0]; track $index) {
98+
<ngts-lightformer
99+
[options]="{
100+
form: 'circle',
101+
intensity: 4 * Math.PI,
102+
rotation: [Math.PI / 2, 0, 0],
103+
position: [x, 4, $index * 4],
104+
scale: [4, 1, 1],
105+
}"
106+
/>
107+
}
108+
<ngts-lightformer
109+
[options]="{
110+
intensity: 2 * Math.PI,
111+
rotation: [0, Math.PI / 2, 0],
112+
position: [-5, 1, -1],
113+
scale: [50, 2, 1],
114+
}"
115+
/>
116+
<ngts-lightformer
117+
[options]="{
118+
intensity: 2 * Math.PI,
119+
rotation: [0, -Math.PI / 2, 0],
120+
position: [10, 1, 0],
121+
scale: [50, 2, 1],
122+
}"
123+
/>
124+
</ngt-group>
125+
</ng-template>
126+
</ngts-environment>
127+
128+
<!-- contact shadows for naive soft shadows -->
129+
<ngts-contact-shadows
130+
[options]="{ smooth: false, scale: 100, position: [0, -5.05, 0], blur: 0.5, opacity: 0.75 }"
131+
/>
132+
133+
<!-- yomotsu/camera-controls, a better replacement for OrbitControls -->
134+
<ngts-camera-controls
135+
[options]="{ makeDefault: true, dollyToCursor: true, minPolarAngle: 0, maxPolarAngle: Math.PI / 2 }"
136+
/>
137+
`,
138+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
139+
changeDetection: ChangeDetectionStrategy.OnPush,
140+
imports: [
141+
NgtrPhysics,
142+
NgtrCuboidCollider,
143+
NgtsEnvironment,
144+
NgtsLightformer,
145+
NgtsContactShadows,
146+
NgtsCameraControls,
147+
Letter,
148+
BasicExperience,
149+
NgtArgs,
150+
BrunoExperience,
151+
InstancedVertexColorsExperience,
152+
LodExperience,
153+
LowpolyEarthExperience,
154+
ShakyExperience,
155+
StarsExperience,
156+
],
157+
hostDirectives: [NgtsPreload],
158+
})
159+
export class Experience {
160+
protected readonly Math = Math;
161+
162+
private preload = inject(NgtsPreload, { host: true });
163+
164+
constructor() {
165+
this.preload.all.set(true);
166+
}
167+
}

0 commit comments

Comments
 (0)