Skip to content

Commit d7eb6d3

Browse files
nartcnartc
committed
docs(examples): update portal shapes routes
1 parent 1c310e8 commit d7eb6d3

File tree

6 files changed

+352
-10
lines changed

6 files changed

+352
-10
lines changed

‎apps/kitchen-sink-new/src/app/soba/portal-shapes/bold.blob

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"glyphs":{"0":{"ha":956,"x_min":0,"x_max":0,"o":"m 478 956 b 900 467 729 956 900 736 b 478 -22 900 197 729 -22 b 56 467 224 -22 56 197 b 478 956 56 736 225 956 m 478 222 b 633 467 563 222 633 332 b 478 711 633 601 563 711 b 322 467 393 711 322 601 b 478 222 322 332 393 222 "},"1":{"ha":644,"x_min":0,"x_max":0,"o":"m 544 956 l 544 0 l 278 0 l 278 657 l 78 618 l 78 844 "},"2":{"ha":911,"x_min":0,"x_max":0,"o":"m 56 600 b 435 956 56 769 183 956 b 833 613 676 956 833 814 b 569 244 833 490 742 354 l 856 244 l 856 0 l 56 0 l 456 422 b 564 600 547 519 564 563 b 444 711 564 669 514 711 b 315 578 375 711 315 661 l 56 600 "},"3":{"ha":911,"x_min":0,"x_max":0,"o":"m 722 493 b 856 289 800 456 856 379 b 456 -22 856 150 738 -22 b 56 311 239 -22 56 79 l 322 333 b 465 206 322 240 382 206 b 579 293 532 206 579 243 b 381 389 579 365 506 389 l 381 567 b 567 654 381 567 567 561 b 456 731 567 694 521 731 b 322 611 388 731 326 696 l 78 633 b 456 956 100 846 249 956 b 833 667 700 956 833 817 b 722 493 833 586 789 528 "},"4":{"ha":956,"x_min":0,"x_max":0,"o":"m 900 378 l 900 156 l 789 156 l 789 0 l 522 0 l 522 156 l 56 156 l 56 356 l 456 933 l 789 933 l 789 378 m 522 667 l 344 378 l 522 378 "},"5":{"ha":911,"x_min":0,"x_max":0,"o":"m 500 622 b 856 333 721 622 856 529 b 444 -22 856 111 689 -22 b 56 289 225 -22 56 89 l 332 306 b 456 200 340 246 392 200 b 582 322 525 200 582 254 b 456 422 582 390 525 422 b 344 378 407 422 367 404 l 76 378 l 147 933 l 767 933 l 767 689 l 367 689 l 358 600 b 500 622 404 622 500 622 "},"6":{"ha":911,"x_min":0,"x_max":0,"o":"m 528 667 b 856 356 749 667 856 506 b 456 -22 856 126 693 -22 b 56 364 207 -22 56 115 b 393 933 56 432 71 688 l 789 933 b 438 653 789 933 569 836 b 528 667 438 653 467 667 m 456 222 b 589 333 529 222 589 272 b 456 444 589 394 529 444 b 322 333 382 444 322 394 b 456 222 322 272 382 222 "},"7":{"ha":867,"x_min":0,"x_max":0,"o":"m 878 933 l 456 0 l 144 0 l 478 689 l 56 689 l 56 933 "},"8":{"ha":911,"x_min":0,"x_max":0,"o":"m 736 493 b 856 289 808 458 856 379 b 456 -22 856 118 715 -22 b 56 289 196 -22 56 118 b 175 493 56 379 103 458 b 75 667 103 536 75 603 b 456 956 75 831 233 956 b 836 667 681 956 836 828 b 736 493 836 603 808 536 m 456 733 b 333 644 389 733 333 694 b 456 556 333 594 389 556 b 578 644 522 556 578 594 b 456 733 578 694 522 733 m 456 200 b 589 300 529 200 589 244 b 456 400 589 356 529 400 b 322 300 382 400 322 356 b 456 200 322 244 382 200 "},"9":{"ha":911,"x_min":0,"x_max":0,"o":"m 383 267 b 56 578 163 267 56 428 b 456 956 56 807 218 956 b 856 569 704 956 856 818 b 518 0 856 501 840 246 l 122 0 b 474 281 122 0 342 97 b 383 267 474 281 444 267 m 456 711 b 322 600 382 711 322 661 b 456 489 322 539 382 489 b 589 600 529 489 589 539 b 456 711 589 661 529 711 "},"A":{"ha":1000,"x_min":0,"x_max":0,"o":"m 1011 0 l 740 0 l 681 156 l 319 156 l 260 0 l -11 0 l 375 933 l 625 933 m 603 356 l 500 622 l 397 356 "},"B":{"ha":911,"x_min":0,"x_max":0,"o":"m 721 501 b 878 281 839 475 878 374 b 558 0 878 119 758 0 l 78 0 l 78 933 l 478 933 b 833 689 692 933 833 850 b 721 501 833 596 786 525 m 344 578 l 456 578 b 567 656 526 578 567 601 b 456 733 567 708 526 733 l 344 733 m 478 200 b 611 289 558 200 611 228 b 478 378 611 350 558 378 l 344 378 l 344 200 l 478 200 "},"C":{"ha":911,"x_min":0,"x_max":0,"o":"m 565 222 b 776 317 650 222 726 260 l 878 90 b 558 -22 794 18 668 -22 b 33 467 269 -22 33 197 b 558 956 33 736 269 956 b 878 844 668 956 794 917 l 776 617 b 565 711 726 674 650 711 b 300 467 419 711 300 601 b 565 222 300 332 419 222 "},"D":{"ha":978,"x_min":0,"x_max":0,"o":"m 454 933 b 944 467 775 933 944 725 b 454 0 944 208 767 0 l 78 0 l 78 933 l 454 933 m 478 244 b 678 467 569 244 678 344 b 478 689 678 589 569 689 l 344 689 l 344 244 l 478 244 "},"E":{"ha":756,"x_min":0,"x_max":0,"o":"m 344 689 l 344 578 l 633 578 l 633 356 l 344 356 l 344 244 l 700 244 l 700 0 l 78 0 l 78 933 l 700 933 l 700 689 "},"F":{"ha":733,"x_min":0,"x_max":0,"o":"m 78 0 l 78 933 l 700 933 l 700 689 l 344 689 l 344 578 l 633 578 l 633 356 l 344 356 l 344 0 "},"G":{"ha":1044,"x_min":0,"x_max":0,"o":"m 1003 556 b 1011 467 1008 525 1011 499 b 533 -22 1011 197 810 -22 b 33 467 257 -22 33 197 b 533 956 33 736 257 956 b 965 689 732 956 882 847 l 714 621 b 533 711 671 676 607 711 b 300 467 404 711 300 601 b 533 222 300 332 404 222 b 736 356 624 222 700 274 l 478 356 l 478 556 l 1003 556 "},"H":{"ha":1000,"x_min":0,"x_max":0,"o":"m 922 933 l 922 0 l 656 0 l 656 344 l 344 344 l 344 0 l 78 0 l 78 933 l 344 933 l 344 589 l 656 589 l 656 933 "},"I":{"ha":422,"x_min":0,"x_max":0,"o":"m 78 0 l 78 933 l 344 933 l 344 0 "},"J":{"ha":711,"x_min":0,"x_max":0,"o":"m 656 933 l 656 356 b 261 -22 656 101 500 -22 b 33 67 176 -22 79 15 l 149 276 b 256 222 172 243 211 222 b 389 356 329 222 389 264 l 389 933 "},"K":{"ha":978,"x_min":0,"x_max":0,"o":"m 967 0 l 633 0 l 344 400 l 344 0 l 78 0 l 78 933 l 344 933 l 344 578 l 611 933 l 944 933 l 589 489 "},"L":{"ha":733,"x_min":0,"x_max":0,"o":"m 700 244 l 700 0 l 78 0 l 78 933 l 344 933 l 344 244 "},"M":{"ha":1222,"x_min":0,"x_max":0,"o":"m 1189 0 l 922 0 l 878 489 l 722 0 l 500 0 l 344 489 l 300 0 l 33 0 l 122 933 l 389 933 l 611 378 l 833 933 l 1100 933 "},"N":{"ha":1044,"x_min":0,"x_max":0,"o":"m 967 933 l 967 0 l 700 0 l 344 511 l 344 0 l 78 0 l 78 933 l 344 933 l 700 422 l 700 933 "},"O":{"ha":1089,"x_min":0,"x_max":0,"o":"m 544 956 b 1056 467 826 956 1056 736 b 544 -22 1056 197 826 -22 b 33 467 263 -22 33 197 b 544 956 33 736 263 956 m 544 222 b 789 467 679 222 789 332 b 544 711 789 601 679 711 b 300 467 410 711 300 601 b 544 222 300 332 410 222 "},"P":{"ha":889,"x_min":0,"x_max":0,"o":"m 500 933 b 856 622 743 933 856 803 b 544 289 856 442 742 289 l 344 289 l 344 0 l 78 0 l 78 933 l 500 933 m 475 511 b 589 611 538 511 589 542 b 475 711 589 679 538 711 l 344 711 l 344 511 l 475 511 "},"Q":{"ha":1089,"x_min":0,"x_max":0,"o":"m 1078 0 l 811 0 l 785 35 b 544 -22 713 -1 631 -22 b 33 467 263 -22 33 197 b 544 956 33 736 263 956 b 1056 467 826 956 1056 736 b 935 151 1056 347 1010 236 m 756 343 b 789 467 776 379 789 421 b 544 711 789 601 679 711 b 300 467 410 711 300 601 b 544 222 300 332 410 222 b 629 238 575 222 603 228 l 522 378 l 722 378 l 756 343 "},"R":{"ha":933,"x_min":0,"x_max":0,"o":"m 900 0 l 589 0 l 396 289 l 344 289 l 344 0 l 78 0 l 78 933 l 500 933 b 856 622 743 933 856 803 b 671 314 856 485 789 364 m 475 511 b 589 611 538 511 589 542 b 475 711 589 679 538 711 l 344 711 l 344 511 l 475 511 "},"S":{"ha":889,"x_min":0,"x_max":0,"o":"m 444 610 b 856 304 628 586 856 540 b 433 -22 856 124 733 -22 b 33 117 185 -22 33 117 l 132 329 b 433 222 271 222 433 222 b 589 279 507 219 589 228 b 418 347 589 319 540 328 b 56 653 164 388 56 492 b 458 956 56 817 182 956 b 811 844 458 956 685 956 l 706 644 b 433 711 706 644 619 711 b 322 667 346 711 322 692 b 444 610 322 636 346 622 "},"T":{"ha":822,"x_min":0,"x_max":0,"o":"m 789 933 l 789 689 l 544 689 l 544 0 l 278 0 l 278 689 l 33 689 l 33 933 "},"U":{"ha":1000,"x_min":0,"x_max":0,"o":"m 944 933 l 944 400 b 500 -22 944 154 778 -22 b 56 400 222 -22 56 154 l 56 933 l 344 933 l 344 397 b 500 222 344 281 422 222 b 656 397 578 222 656 281 l 656 933 "},"V":{"ha":1000,"x_min":0,"x_max":0,"o":"m -11 933 l 300 933 l 500 375 l 700 933 l 1011 933 l 633 0 l 367 0 "},"W":{"ha":1422,"x_min":0,"x_max":0,"o":"m 967 378 l 1122 933 l 1422 933 l 1111 0 l 833 0 l 711 444 l 589 0 l 311 0 l 0 933 l 300 933 l 456 378 l 589 933 l 833 933 "},"X":{"ha":1022,"x_min":0,"x_max":0,"o":"m 1011 0 l 697 0 l 511 294 l 325 0 l 11 0 l 328 489 l 35 933 l 349 933 l 511 672 l 674 933 l 988 933 l 694 489 "},"Y":{"ha":956,"x_min":0,"x_max":0,"o":"m 967 933 l 611 378 l 611 0 l 344 0 l 344 378 l -11 933 l 300 933 l 478 644 l 656 933 "},"Z":{"ha":889,"x_min":0,"x_max":0,"o":"m 33 0 l 422 689 l 56 689 l 56 933 l 856 933 l 467 244 l 833 244 l 833 0 "}},"familyName":"Noir Pro Bold","ascender":1311,"descender":-356,"underlinePosition":-104,"underlineThickness":69,"boundingBox":{"yMin":-422,"xMin":-267,"yMax":1600,"xMax":1656},"resolution":1000,"original_font_information":{"format":0,"copyright":"Copyright (c) Milos Mitrovic, 2016. All rights reserved.","fontFamily":"Noir Pro Bold","fontSubfamily":"Regular","uniqueID":"1.000;UKWN;NoirPro-Bold","fullName":"Noir Pro Bold","version":"Version 1.000;PS 001.000;hotconv 1.0.70;makeotf.lib2.5.58329","postScriptName":"NoirPro-Bold","manufacturer":"Mindburger","designer":"Milos Mitrovic","manufacturerURL":"http://www.mindburger.net","designerURL":"http://www.mindburger.net","preferredFamily":"Noir Pro","preferredSubfamily":"Bold"},"cssFontWeight":"normal","cssFontStyle":"normal"}

‎apps/kitchen-sink-new/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 { SceneGraph as BasicSceneGraph } from '../basic/scene';
2+
import { SceneGraph as BrunoSceneGraph } from '../bruno-simons-20k/scene';
3+
import { SceneGraph as InstancedVertexColorsSceneGraph } from '../instanced-vertex-colors/scene';
4+
import { SceneGraph as LodSceneGraph } from '../lod/scene';
5+
import { SceneGraph as LowpolyEarthSceneGraph } from '../lowpoly-earth/scene';
6+
import { SceneGraph as ShakySceneGraph } from '../shaky/scene';
7+
import { SceneGraph as StarsSceneGraph } from '../stars/scene';
8+
9+
export const Scenes = {
10+
basic: BasicSceneGraph,
11+
instancedVertexColors: InstancedVertexColorsSceneGraph,
12+
lowpolyEarth: LowpolyEarthSceneGraph,
13+
shaky: ShakySceneGraph,
14+
stars: StarsSceneGraph,
15+
lod: LodSceneGraph,
16+
bruno: BrunoSceneGraph,
17+
} as const;

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

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
import {
2+
ChangeDetectionStrategy,
3+
Component,
4+
contentChild,
5+
CUSTOM_ELEMENTS_SCHEMA,
6+
ElementRef,
7+
input,
8+
signal,
9+
TemplateRef,
10+
viewChild,
11+
} from '@angular/core';
12+
import {
13+
injectBeforeRender,
14+
injectStore,
15+
NgtArgs,
16+
NgtEuler,
17+
NgtObjectEvents,
18+
NgtThreeEvent,
19+
NgtVector3,
20+
} from 'angular-three';
21+
import { NgtrRigidBody } from 'angular-three-rapier';
22+
import { NgtsText3D } from 'angular-three-soba/abstractions';
23+
import { NgtsMeshTransmissionMaterial } from 'angular-three-soba/materials';
24+
import { NgtsCenter, NgtsRenderTexture, NgtsRenderTextureContent } from 'angular-three-soba/staging';
25+
import { Group } from 'three';
26+
27+
import { NgTemplateOutlet } from '@angular/common';
28+
import CameraControls from 'camera-controls';
29+
import boldFont from './bold.blob';
30+
31+
@Component({
32+
selector: 'app-letter',
33+
template: `
34+
<ngt-object3D
35+
rigidBody
36+
[options]="{ restitution: 0.1, colliders: 'cuboid' }"
37+
[position]="position()"
38+
[rotation]="rotation()"
39+
>
40+
<ngts-center>
41+
<ngts-text-3d
42+
#text3D
43+
[ngtObjectEvents]="text3D.meshRef()"
44+
[text]="char()"
45+
[font]="boldFont"
46+
[options]="{
47+
bevelEnabled: true,
48+
smooth: 1,
49+
scale: 0.125,
50+
size: 80,
51+
height: 4,
52+
curveSegments: 10,
53+
bevelThickness: 10,
54+
bevelSize: 2,
55+
bevelOffset: 0,
56+
}"
57+
(dblclick)="onDblClick($any($event))"
58+
>
59+
<ngts-mesh-transmission-material
60+
[options]="$any({ clearcoat: 1, samples: 3, thickness: 40, chromaticAberration: 0.25, anisotropy: 0.4 })"
61+
>
62+
<!--Render a portalled scene into the "buffer" attribute of transmission material, which is a texture.-->
63+
<!--Since we're moving the contents with the letter shape in world space we take the standard event compute-->
64+
<ngts-render-texture
65+
attach="buffer"
66+
[options]="{ stencilBuffer: stencilBuffer(), width: 512, height: 512, compute: $any(eventsCompute?.()) }"
67+
>
68+
<!--Everything in here is self-contained, behaves like a regular canvas, but we're *in* the texture-->
69+
<ng-template renderTextureContent let-injector="injector">
70+
<ngt-color attach="background" *args="['#4899c9']" />
71+
<ngt-group #contents [matrixAutoUpdate]="false">
72+
<ng-container [ngTemplateOutlet]="content()" [ngTemplateOutletInjector]="injector" />
73+
</ngt-group>
74+
</ng-template>
75+
</ngts-render-texture>
76+
</ngts-mesh-transmission-material>
77+
</ngts-text-3d>
78+
</ngts-center>
79+
</ngt-object3D>
80+
`,
81+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
82+
changeDetection: ChangeDetectionStrategy.OnPush,
83+
imports: [
84+
NgtrRigidBody,
85+
NgtsCenter,
86+
NgtsText3D,
87+
NgtsMeshTransmissionMaterial,
88+
NgtsRenderTexture,
89+
NgtsRenderTextureContent,
90+
NgtArgs,
91+
NgTemplateOutlet,
92+
NgtObjectEvents,
93+
],
94+
})
95+
export class Letter {
96+
protected readonly boldFont: string = boldFont;
97+
98+
char = input.required<string>();
99+
stencilBuffer = input(false);
100+
position = input<NgtVector3>([0, 0, 0]);
101+
rotation = input<NgtEuler>([0, 0, 0]);
102+
103+
private centerRef = viewChild.required(NgtsCenter);
104+
private contentsRef = viewChild<ElementRef<Group>>('contents');
105+
106+
protected content = contentChild.required(TemplateRef);
107+
108+
private store = injectStore();
109+
protected eventsCompute = this.store.events.compute;
110+
111+
private focused = signal(false);
112+
113+
constructor() {
114+
injectBeforeRender(() => {
115+
const contents = this.contentsRef()?.nativeElement;
116+
if (!contents) return;
117+
// The letters contents are moved to its whereabouts in world coordinates
118+
contents.matrix.copy(this.centerRef().groupRef().nativeElement.matrixWorld);
119+
});
120+
}
121+
122+
onDblClick(event: NgtThreeEvent<MouseEvent>) {
123+
event.stopPropagation();
124+
const controls = this.store.snapshot.controls as CameraControls;
125+
if (!controls) return;
126+
127+
if (this.focused()) {
128+
void controls.reset(true);
129+
} else {
130+
// NOTE: if any of the render-texture scene has other controls, it messes this up
131+
void controls.fitToBox(this.centerRef().groupRef().nativeElement, true);
132+
}
133+
134+
this.focused.update((v) => !v);
135+
}
136+
}

‎apps/kitchen-sink-new/src/app/soba/portal-shapes/portal-shapes.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]="{ fov: 45, position: [-20, 40, 30], near: 1, far: 300 }">
8+
<app-scene-graph *canvasContent />
9+
</ngt-canvas>
10+
<code class="absolute top-2 left-2 text-black">double click to zoom in/out</code>
11+
`,
12+
changeDetection: ChangeDetectionStrategy.OnPush,
13+
imports: [NgtCanvas, SceneGraph, NgtCanvasContent],
14+
})
15+
export default class PortalShapes {}

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

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

0 commit comments

Comments
 (0)