Skip to content

Commit 9f0591d

Browse files
nartcnartc
committed
docs(examples): update shaky routes
1 parent e351fd9 commit 9f0591d

File tree

4 files changed

+346
-10
lines changed

4 files changed

+346
-10
lines changed

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

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, input, Signal } from '@angular/core';
2+
import { NgtArgs, NgtVector3 } from 'angular-three';
3+
import { injectGLTF } from 'angular-three-soba/loaders';
4+
import { NgtsMeshReflectorMaterial } from 'angular-three-soba/materials';
5+
import { Color, MeshPhysicalMaterial } from 'three';
6+
7+
injectGLTF.preload(() => './pink-d.glb');
8+
9+
@Component({
10+
selector: 'app-model',
11+
template: `
12+
<ngt-group [position]="position()" [rotation]="rotation()">
13+
<ngt-mesh receiveShadow [position]="[0, 0, 8]" [scale]="[2, 2, 1]" [rotation]="[-Math.PI / 2, 0, Math.PI]">
14+
<ngt-plane-geometry *args="[70, 70]" />
15+
<ngts-mesh-reflector-material
16+
[options]="{
17+
resolution: 1024,
18+
mirror: 0,
19+
mixBlur: 1,
20+
mixStrength: 0.3,
21+
depthScale: 1,
22+
minDepthThreshold: 0.8,
23+
maxDepthThreshold: 1,
24+
metalness: 0.25,
25+
color: '#eea6b1',
26+
roughness: 1,
27+
}"
28+
/>
29+
</ngt-mesh>
30+
@if (gltf(); as gltf) {
31+
<ngt-mesh
32+
receiveShadow
33+
castShadow
34+
[material]="material"
35+
[geometry]="gltf.nodes.Sphere.geometry"
36+
[position]="[-1.93, 1, -0.94]"
37+
[rotation]="[-Math.PI, 0.73, -Math.PI]"
38+
/>
39+
<ngt-mesh
40+
receiveShadow
41+
castShadow
42+
[material]="material"
43+
[geometry]="gltf.nodes.Sphere001.geometry"
44+
[position]="[4.49, 2.34, 3.58]"
45+
[scale]="[2.33, 2.33, 2.33]"
46+
/>
47+
<ngt-mesh
48+
receiveShadow
49+
castShadow
50+
[material]="material"
51+
[geometry]="gltf.nodes.Sphere001.geometry"
52+
[position]="[-16, 5, 17]"
53+
[rotation]="[-0.26, 0.04, -0.16]"
54+
[scale]="[5, 5, 5]"
55+
/>
56+
<ngt-mesh
57+
receiveShadow
58+
castShadow
59+
[material]="material"
60+
[geometry]="gltf.nodes.Sphere002.geometry"
61+
[position]="[-5.28, 4.8, 5.12]"
62+
/>
63+
<ngt-mesh
64+
receiveShadow
65+
castShadow
66+
[material]="material"
67+
[geometry]="gltf.nodes.Sphere003.geometry"
68+
[position]="[-10.13, 1.3, -3.95]"
69+
[rotation]="[-0.15, 0.01, -0.02]"
70+
/>
71+
<ngt-mesh
72+
receiveShadow
73+
castShadow
74+
[material]="material"
75+
[geometry]="gltf.nodes.Sphere004.geometry"
76+
[position]="[-19.36, 1.05, -2.05]"
77+
[rotation]="[0, 0, 0.64]"
78+
[scale]="[-1.33, -1.33, -1.33]"
79+
/>
80+
<ngt-mesh
81+
receiveShadow
82+
castShadow
83+
[material]="material"
84+
[geometry]="gltf.nodes.Sphere005.geometry"
85+
[position]="[-18.17, 0.94, -2.35]"
86+
[scale]="[0.87, 0.87, 0.87]"
87+
/>
88+
<ngt-mesh
89+
receiveShadow
90+
castShadow
91+
[material]="material"
92+
[geometry]="gltf.nodes.Torus.geometry"
93+
[position]="[-0.36, 1.46, 0.73]"
94+
[rotation]="[Math.PI, 0.73, -2.64]"
95+
[scale]="[2, 2, 2]"
96+
/>
97+
<ngt-mesh
98+
receiveShadow
99+
castShadow
100+
[material]="material"
101+
[geometry]="gltf.nodes.Cone.geometry"
102+
[position]="[2.3, 1.91, -4.41]"
103+
[scale]="[1.86, 1.86, 1.86]"
104+
/>
105+
<ngt-mesh
106+
receiveShadow
107+
castShadow
108+
[material]="material"
109+
[geometry]="gltf.nodes.Cone001.geometry"
110+
[position]="[-4.82, 0.47, -5.51]"
111+
[rotation]="[2.14, 0, -0.58]"
112+
/>
113+
<ngt-mesh
114+
receiveShadow
115+
castShadow
116+
[material]="material"
117+
[geometry]="gltf.nodes.Cube.geometry"
118+
[position]="[-5.36, 1.94, 5.46]"
119+
[rotation]="[0, 0.42, 0]"
120+
[scale]="[1.9, 1.9, 1.9]"
121+
/>
122+
<ngt-mesh
123+
receiveShadow
124+
castShadow
125+
[material]="material"
126+
[geometry]="gltf.nodes.Cube001.geometry"
127+
[position]="[-1.8, 1, -10.04]"
128+
[rotation]="[0, -0.23, 0]"
129+
/>
130+
<ngt-mesh
131+
receiveShadow
132+
castShadow
133+
[material]="material"
134+
[geometry]="gltf.nodes.Cylinder.geometry"
135+
[position]="[-12.3, 2.41, 1.53]"
136+
/>
137+
<ngt-mesh
138+
receiveShadow
139+
castShadow
140+
[material]="material"
141+
[geometry]="gltf.nodes.Cylinder001.geometry"
142+
[position]="[-10.47, 1.57, -8.75]"
143+
[rotation]="[Math.PI / 2, 0, -1.87]"
144+
[scale]="[1.55, 1.55, 1.55]"
145+
/>
146+
<ngt-mesh
147+
receiveShadow
148+
castShadow
149+
[material]="material"
150+
[geometry]="gltf.nodes.Cylinder002.geometry"
151+
[position]="[-1.15, 3.38, 14.39]"
152+
[rotation]="[0, Math.PI, 0]"
153+
/>
154+
<ngt-mesh
155+
receiveShadow
156+
castShadow
157+
[material]="material"
158+
[geometry]="gltf.nodes.Icosphere.geometry"
159+
[position]="[7.29, 0.6, -5.63]"
160+
[scale]="[0.64, 0.64, 0.64]"
161+
/>
162+
<ngt-mesh
163+
receiveShadow
164+
castShadow
165+
[material]="material"
166+
[geometry]="gltf.nodes.Icosphere001.geometry"
167+
[position]="[7.26, 0.98, 12.9]"
168+
[rotation]="[-0.26, 0.04, -0.16]"
169+
/>
170+
}
171+
</ngt-group>
172+
`,
173+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
174+
changeDetection: ChangeDetectionStrategy.OnPush,
175+
imports: [NgtArgs, NgtsMeshReflectorMaterial],
176+
})
177+
export class Model {
178+
protected Math = Math;
179+
180+
position = input<NgtVector3>([0, 0, 0]);
181+
rotation = input<NgtVector3>([0, 0, 0]);
182+
183+
protected gltf = injectGLTF(() => './pink-d.glb') as Signal<any | null>;
184+
protected material = new MeshPhysicalMaterial({
185+
color: new Color('#bb86a1').convertSRGBToLinear(),
186+
roughness: 0,
187+
clearcoat: 1,
188+
clearcoatRoughness: 0,
189+
});
190+
}

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

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import {
2+
ChangeDetectionStrategy,
3+
Component,
4+
CUSTOM_ELEMENTS_SCHEMA,
5+
ElementRef,
6+
input,
7+
viewChild,
8+
} from '@angular/core';
9+
import { injectBeforeRender, injectStore, NgtArgs } from 'angular-three';
10+
import { NgtsOrbitControls } from 'angular-three-soba/controls';
11+
import { NgtsCameraShake, NgtsEnvironment } from 'angular-three-soba/staging';
12+
import { Group, Vector3 } from 'three';
13+
import { RectAreaLightUniformsLib } from 'three-stdlib';
14+
import { Model } from './model';
15+
16+
RectAreaLightUniformsLib.init();
17+
18+
@Component({
19+
selector: 'app-light',
20+
template: `
21+
<ngt-group #group>
22+
<ngt-rect-area-light
23+
[width]="15"
24+
[height]="100"
25+
[position]="[30, 30, -10]"
26+
[intensity]="5"
27+
(updated)="$any($event).lookAt(0, 0, 0)"
28+
/>
29+
</ngt-group>
30+
31+
<ngt-ambient-light [intensity]="0.2" />
32+
<ngt-spot-light [position]="[50, 50, -30]" castShadow [decay]="0" />
33+
<ngt-point-light [position]="[-10, -10, -10]" color="red" [intensity]="3 * Math.PI" [decay]="0" />
34+
<ngt-point-light [position]="[0, -5, 5]" [intensity]="0.5 * Math.PI" [decay]="0" />
35+
<ngt-directional-light [position]="[0, -5, 0]" color="red" [intensity]="2 * Math.PI" />
36+
`,
37+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
38+
changeDetection: ChangeDetectionStrategy.OnPush,
39+
})
40+
export class Light {
41+
protected readonly Math = Math;
42+
43+
private groupRef = viewChild.required<ElementRef<Group>>('group');
44+
45+
constructor() {
46+
injectBeforeRender(({ clock }) => {
47+
const group = this.groupRef().nativeElement;
48+
group.rotation.x = clock.elapsedTime;
49+
});
50+
}
51+
}
52+
53+
@Component({
54+
selector: 'app-rig',
55+
template: `
56+
<ngts-camera-shake
57+
[options]="{
58+
maxYaw: 0.01,
59+
maxPitch: 0.01,
60+
maxRoll: 0.01,
61+
yawFrequency: 0.5,
62+
pitchFrequency: 0.5,
63+
rollFrequency: 0.4,
64+
}"
65+
/>
66+
`,
67+
changeDetection: ChangeDetectionStrategy.OnPush,
68+
imports: [NgtsCameraShake],
69+
})
70+
export class Rig {
71+
private vec = new Vector3();
72+
private store = injectStore();
73+
74+
constructor() {
75+
injectBeforeRender(() => {
76+
const { camera, pointer } = this.store.snapshot;
77+
camera.position.lerp(this.vec.set(pointer.x * 2, 1, 60), 0.05);
78+
});
79+
}
80+
}
81+
82+
@Component({
83+
selector: 'app-shaky-scene-graph',
84+
template: `
85+
<ngt-fog attach="fog" *args="['lightpink', 60, 100]" />
86+
87+
<app-model [position]="[-4.5, -4, 0]" [rotation]="[0, -2.8, 0]" />
88+
<app-light />
89+
90+
<ngts-environment [options]="{ preset: 'warehouse' }" />
91+
92+
@if (!asRenderTexture()) {
93+
<app-rig />
94+
<ngts-orbit-controls [options]="{ makeDefault: true, minPolarAngle: 0, maxPolarAngle: Math.PI / 2 }" />
95+
}
96+
`,
97+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
98+
changeDetection: ChangeDetectionStrategy.OnPush,
99+
host: { class: 'shaky-experience' },
100+
imports: [NgtArgs, Light, NgtsEnvironment, Rig, NgtsOrbitControls, Model],
101+
})
102+
export class SceneGraph {
103+
protected readonly Math = Math;
104+
105+
asRenderTexture = input(false);
106+
}

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

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { ChangeDetectionStrategy, Component } from '@angular/core';
2+
import { NgtsStats } from 'angular-three-soba/stats';
3+
import { NgtCanvas, NgtCanvasContent } from 'angular-three/dom';
4+
import { SceneGraph } from './scene';
5+
6+
@Component({
7+
template: `
8+
<ngt-canvas [stats]="{ minimal: true }" shadows [camera]="{ position: [0, 160, 160], fov: 20 }" [dpr]="[1, 2]">
9+
<app-shaky-scene-graph *canvasContent />
10+
</ngt-canvas>
11+
`,
12+
imports: [NgtCanvas, NgtsStats, SceneGraph, NgtCanvasContent],
13+
changeDetection: ChangeDetectionStrategy.OnPush,
14+
host: { class: 'shaky-soba' },
15+
styles: `
16+
:host {
17+
display: block;
18+
height: 100%;
19+
width: 100%;
20+
background: #ffb6c1;
21+
cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIxMCIgZmlsbD0id2hpdGUiLz48L3N2Zz4='),
22+
auto;
23+
}
24+
25+
:host::after {
26+
content: '';
27+
position: absolute;
28+
top: 0;
29+
left: 0;
30+
width: 100%;
31+
height: 100%;
32+
background-image: url('/view.svg');
33+
background-repeat: no-repeat;
34+
background-position: center;
35+
background-size: contain;
36+
pointer-events: none;
37+
}
38+
`,
39+
})
40+
export default class Shaky {}

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -25,16 +25,16 @@ const routes: Routes = [
2525
},
2626
},
2727
},
28-
// {
29-
// path: 'shaky',
30-
// loadComponent: () => import('./shaky/shaky'),
31-
// data: {
32-
// credits: {
33-
// title: 'Camera Shake',
34-
// link: 'https://pmndrs.github.io/examples/demos/camera-shake',
35-
// },
36-
// },
37-
// },
28+
{
29+
path: 'shaky',
30+
loadComponent: () => import('./shaky/shaky'),
31+
data: {
32+
credits: {
33+
title: 'Camera Shake',
34+
link: 'https://pmndrs.github.io/examples/demos/camera-shake',
35+
},
36+
},
37+
},
3838
{
3939
path: 'lod',
4040
loadComponent: () => import('./lod/lod'),

0 commit comments

Comments
 (0)