Skip to content

Commit 2e5f8a4

Browse files
nartcnartc
committed
docs: adjust new demo
1 parent c7327d4 commit 2e5f8a4

File tree

4 files changed

+54
-29
lines changed

4 files changed

+54
-29
lines changed

‎apps/kitchen-sink/src/app/soba/instances/exprience.ts

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
CUSTOM_ELEMENTS_SCHEMA,
55
effect,
66
ElementRef,
7+
input,
78
viewChild,
89
} from '@angular/core';
910
import { extend, NgtArgs } from 'angular-three';
@@ -110,6 +111,7 @@ export class Boxes {
110111
}
111112

112113
@Component({
114+
selector: 'app-instances-experience',
113115
standalone: true,
114116
template: `
115117
<ngt-color attach="background" *args="['#e0e0e0']" />
@@ -119,11 +121,15 @@ export class Boxes {
119121
120122
<app-boxes />
121123
122-
<ngts-camera-controls />
124+
@if (withEffect()) {
125+
<ngts-camera-controls />
126+
}
123127
`,
124128
schemas: [CUSTOM_ELEMENTS_SCHEMA],
125129
changeDetection: ChangeDetectionStrategy.OnPush,
126130
host: { class: 'instances-soba-experience' },
127131
imports: [NgtsCameraControls, Boxes, NgtArgs],
128132
})
129-
export class Experience {}
133+
export class Experience {
134+
withEffect = input(true);
135+
}

‎apps/kitchen-sink/src/app/soba/inverted-stencil-buffer/experience.ts

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,7 @@ export class Box {
8383
}
8484

8585
@Component({
86+
selector: 'app-inverted-stencil-buffer-experience',
8687
standalone: true,
8788
template: `
8889
<ngt-color attach="background" *args="['#e0e0e0']" />
@@ -91,7 +92,7 @@ export class Box {
9192
<ngt-hemisphere-light [intensity]="Math.PI * 1.5" groundColor="red" />
9293
9394
<app-circular-mask />
94-
<ngts-bounds [options]="{ fit: true, clip: true, observe: true }">
95+
<ngts-bounds [options]="{ fit: withEffect(), clip: withEffect(), observe: withEffect() }">
9596
<ngts-float [options]="{ floatIntensity: 4, rotationIntensity: 0, speed: 4 }">
9697
@switch (logo()) {
9798
@case ('angular') {
@@ -118,7 +119,9 @@ export class Box {
118119
</ngts-bounds>
119120
120121
<ngts-environment [options]="{ preset: 'city' }" />
121-
<ngts-orbit-controls [options]="{ makeDefault: true }" />
122+
@if (withEffect()) {
123+
<ngts-orbit-controls [options]="{ makeDefault: true }" />
124+
}
122125
`,
123126
schemas: [CUSTOM_ELEMENTS_SCHEMA],
124127
changeDetection: ChangeDetectionStrategy.OnPush,
@@ -140,4 +143,6 @@ export class Experience {
140143
protected readonly Math = Math;
141144
protected invert = invert;
142145
protected logo = logo;
146+
147+
withEffect = input(true);
143148
}

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

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, inject } from '@angular/core';
22
import { NgtArgs } from 'angular-three';
33
import { NgtrCuboidCollider, NgtrPhysics } from 'angular-three-rapier';
4-
import { NgtsCameraControls } from 'angular-three-soba/controls';
4+
import { NgtsCameraControls, NgtsOrbitControls } from 'angular-three-soba/controls';
55
import { NgtsPreload } from 'angular-three-soba/misc';
6-
import { NgtsContactShadows, NgtsEnvironment, NgtsLightformer } from 'angular-three-soba/staging';
6+
import { NgtsBounds, NgtsContactShadows, NgtsEnvironment, NgtsLightformer } from 'angular-three-soba/staging';
77
import { Experience as BasicExperience } from '../basic/experience';
8-
import { Experience as BrunoExperience } from '../bruno-simons-20k/experience';
98
import { Experience as InstancedVertexColorsExperience } from '../instanced-vertex-colors/experience';
9+
import { Experience as InstancesExperience } from '../instances/exprience';
10+
import { Experience as InvertedStencilBufferExperience } from '../inverted-stencil-buffer/experience';
1011
import { Experience as LodExperience } from '../lod/experience';
1112
import { Experience as LowpolyEarthExperience } from '../lowpoly-earth/experience';
1213
import { Experience as ShakyExperience } from '../shaky/experience';
13-
import { Experience as StarsExperience } from '../stars/experience';
1414
import { Letter } from './letter';
1515

1616
/* credit: https://pmndrs.github.io/examples/demos/portal-shapes */
@@ -25,13 +25,17 @@ import { Letter } from './letter';
2525
<!-- ANGULAR -->
2626
<app-letter char="A" [position]="[1, 50, -1]">
2727
<ng-template>
28-
<app-basic-experience [withEffect]="false" />
28+
<ngt-group [scale]="10">
29+
<app-basic-experience [withEffect]="false" />
30+
</ngt-group>
2931
</ng-template>
3032
</app-letter>
3133
3234
<app-letter char="N" [position]="[2, 60, -2]" [rotation]="[4, 5, 6]">
3335
<ng-template>
34-
<app-bruno-experience [withEffect]="false" />
36+
<ngt-group [scale]="10">
37+
<app-instances-experience [withEffect]="false" />
38+
</ngt-group>
3539
</ng-template>
3640
</app-letter>
3741
@@ -49,7 +53,7 @@ import { Letter } from './letter';
4953
5054
<app-letter char="L" [position]="[-2, 90, 2]" [rotation]="[13, 14, 15]">
5155
<ng-template>
52-
<ngt-group [scale]="15">
56+
<ngt-group [scale]="10">
5357
<app-lowpoly-earth-experience />
5458
</ngt-group>
5559
</ng-template>
@@ -63,7 +67,9 @@ import { Letter } from './letter';
6367
6468
<app-letter char="R" [position]="[-4, 110, 1]" [rotation]="[19, 20, 21]" [stencilBuffer]="true">
6569
<ng-template>
66-
<app-stars-experience />
70+
<ngt-group [scale]="5">
71+
<app-inverted-stencil-buffer-experience [withEffect]="false" />
72+
</ngt-group>
6773
</ng-template>
6874
</app-letter>
6975
@@ -147,12 +153,14 @@ import { Letter } from './letter';
147153
Letter,
148154
BasicExperience,
149155
NgtArgs,
150-
BrunoExperience,
151156
InstancedVertexColorsExperience,
152157
LodExperience,
153158
LowpolyEarthExperience,
154159
ShakyExperience,
155-
StarsExperience,
160+
InvertedStencilBufferExperience,
161+
InstancesExperience,
162+
NgtsBounds,
163+
NgtsOrbitControls,
156164
],
157165
hostDirectives: [NgtsPreload],
158166
})

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

Lines changed: 21 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,15 @@ import {
88
TemplateRef,
99
viewChild,
1010
} from '@angular/core';
11-
import { injectBeforeRender, injectObjectEvents, injectStore, NgtArgs, NgtEuler, NgtVector3 } from 'angular-three';
11+
import { injectBeforeRender, injectStore, NgtArgs, NgtEuler, NgtThreeEvent, NgtVector3 } from 'angular-three';
1212
import { NgtrRigidBody } from 'angular-three-rapier';
1313
import { NgtsText3D } from 'angular-three-soba/abstractions';
1414
import { NgtsMeshTransmissionMaterial } from 'angular-three-soba/materials';
1515
import { NgtsCenter, NgtsRenderTexture, NgtsRenderTextureContent } from 'angular-three-soba/staging';
16-
import CameraControls from 'camera-controls';
1716
import { Group } from 'three';
1817

1918
import { NgTemplateOutlet } from '@angular/common';
19+
import CameraControls from 'camera-controls';
2020
import boldFont from './bold.blob';
2121

2222
@Component({
@@ -28,6 +28,8 @@ import boldFont from './bold.blob';
2828
[options]="{ restitution: 0.1, colliders: 'cuboid' }"
2929
[position]="position()"
3030
[rotation]="rotation()"
31+
(dblclick)="onDblClick($any($event))"
32+
(pointermissed)="onPointerMissed($any($event))"
3133
>
3234
<ngts-center>
3335
<ngts-text-3d
@@ -89,7 +91,6 @@ export class Letter {
8991
rotation = input<NgtEuler>([0, 0, 0]);
9092

9193
private centerRef = viewChild.required(NgtsCenter);
92-
private text3DRef = viewChild.required(NgtsText3D);
9394
private contentsRef = viewChild<ElementRef<Group>>('contents');
9495

9596
protected content = contentChild.required(TemplateRef);
@@ -103,20 +104,25 @@ export class Letter {
103104
const contents = this.contentsRef()?.nativeElement;
104105
if (!contents) return;
105106
// The letters contents are moved to its whereabouts in world coordinates
106-
// contents.matrix.copy(this.centerRef().groupRef().nativeElement.matrixWorld);
107+
contents.matrix.copy(this.centerRef().groupRef().nativeElement.matrixWorld);
107108
});
109+
}
108110

109-
// attach event to the mesh of text3D
110-
injectObjectEvents(() => this.text3DRef().meshRef().nativeElement, {
111-
dblclick: (event) => {
112-
event.stopPropagation();
113-
const controls = this.controls() as CameraControls;
114-
if (!controls) return;
111+
onDblClick(event: NgtThreeEvent<MouseEvent>) {
112+
event.stopPropagation();
113+
const controls = this.controls() as CameraControls;
114+
if (!controls) return;
115115

116-
// TODO: not sure why this is not working as expected.
117-
// This is supposed to zoom to the center of the letter, but it's always zooming to the center of the scene
118-
void controls.fitToBox(this.centerRef().groupRef().nativeElement, true);
119-
},
120-
});
116+
// TODO: not sure why this is not working as expected.
117+
// This is supposed to zoom to the center of the letter, but it's always zooming to the center of the scene
118+
void controls.fitToBox(this.centerRef().groupRef().nativeElement, true);
119+
}
120+
121+
onPointerMissed(event: NgtThreeEvent<MouseEvent>) {
122+
event.stopPropagation();
123+
const controls = this.controls() as CameraControls;
124+
if (!controls) return;
125+
126+
void controls.reset(true);
121127
}
122128
}

0 commit comments

Comments
 (0)