Skip to content

Commit 0fa7732

Browse files
nartcnartc
committed
docs: fix portal shapes example
1 parent 3c0cdfe commit 0fa7732

File tree

9 files changed

+77
-51
lines changed

9 files changed

+77
-51
lines changed

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ export class Bot {
9999
100100
<app-bot />
101101
102-
@if (withEffect()) {
102+
@if (!asRenderTexture()) {
103103
<ngtp-effect-composer>
104104
@if (bloom()) {
105105
<ngtp-bloom [options]="{ kernelSize: 3, luminanceThreshold: 0, luminanceSmoothing: 0.4, intensity: 1.5 }" />
@@ -109,9 +109,9 @@ export class Bot {
109109
<ngtp-glitch />
110110
}
111111
</ngtp-effect-composer>
112-
}
113112
114-
<ngts-orbit-controls [options]="{ makeDefault: true, autoRotate: true }" />
113+
<ngts-orbit-controls [options]="{ makeDefault: true, autoRotate: true }" />
114+
}
115115
`,
116116
imports: [NgtsOrbitControls, NgtArgs, Bot, NgtpEffectComposer, NgtpBloom, NgtpGlitch],
117117
changeDetection: ChangeDetectionStrategy.OnPush,
@@ -123,5 +123,5 @@ export class Experience {
123123
protected bloom = bloom;
124124
protected glitch = glitch;
125125

126-
withEffect = input(true);
126+
asRenderTexture = input(false);
127127
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ export class Boxes {
105105
template: `
106106
<ngt-color attach="background" *args="['#282828']" />
107107
<app-boxes />
108-
@if (withEffect()) {
108+
@if (!asRenderTexture()) {
109109
<ngtp-effect-composer [options]="{ enableNormalPass: false }">
110110
<ngtp-n8ao [options]="{ aoRadius: 0.5, intensity: Math.PI }" />
111111
<ngtp-bloom [options]="{ luminanceThreshold: 1, intensity: 0.5 * Math.PI, levels: 9, mipmapBlur: true }" />
@@ -120,5 +120,5 @@ export class Boxes {
120120
export class Experience {
121121
protected readonly Math = Math;
122122

123-
withEffect = input(true);
123+
asRenderTexture = input(false);
124124
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@ export class Boxes {
119119
120120
<app-boxes />
121121
122-
@if (withEffect()) {
122+
@if (!asRenderTexture()) {
123123
<ngts-camera-controls />
124124
}
125125
`,
@@ -129,5 +129,5 @@ export class Boxes {
129129
imports: [NgtsCameraControls, Boxes, NgtArgs],
130130
})
131131
export class Experience {
132-
withEffect = input(true);
132+
asRenderTexture = input(false);
133133
}

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

Lines changed: 36 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { NgTemplateOutlet } from '@angular/common';
12
import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, input, signal } from '@angular/core';
23
import { NgtArgs, NgtEuler, NgtVector3 } from 'angular-three';
34
import { NgtsRoundedBox } from 'angular-three-soba/abstractions';
@@ -89,20 +90,39 @@ export class Box {
8990
<ngt-hemisphere-light [intensity]="Math.PI * 1.5" groundColor="red" />
9091
9192
<app-circular-mask />
92-
<ngts-bounds [options]="{ fit: withEffect(), clip: withEffect(), observe: withEffect() }">
93-
<ngts-float [options]="{ floatIntensity: 4, rotationIntensity: 0, speed: 4 }">
94-
@switch (logo()) {
95-
@case ('angular') {
96-
<app-angular [invert]="invert()" [scale]="20" />
97-
}
98-
@case ('nx') {
99-
<app-nx [invert]="invert()" [scale]="20" />
100-
}
101-
@case ('nx-cloud') {
102-
<app-nx-cloud [invert]="invert()" [scale]="160" />
103-
}
93+
94+
@if (!asRenderTexture()) {
95+
<ngts-bounds [options]="{ fit: true, clip: true, observe: true }">
96+
<ngts-float [options]="{ floatIntensity: 4, rotationIntensity: 0, speed: 4 }">
97+
<ng-container [ngTemplateOutlet]="logos" />
98+
</ngts-float>
99+
<ng-container [ngTemplateOutlet]="boxes" />
100+
</ngts-bounds>
101+
} @else {
102+
<ng-container [ngTemplateOutlet]="logos" />
103+
<ng-container [ngTemplateOutlet]="boxes" />
104+
}
105+
106+
<ngts-environment [options]="{ preset: 'city' }" />
107+
@if (!asRenderTexture()) {
108+
<ngts-orbit-controls [options]="{ makeDefault: true }" />
109+
}
110+
111+
<ng-template #logos>
112+
@switch (logo()) {
113+
@case ('angular') {
114+
<app-angular [invert]="invert()" [scale]="20" />
104115
}
105-
</ngts-float>
116+
@case ('nx') {
117+
<app-nx [invert]="invert()" [scale]="20" />
118+
}
119+
@case ('nx-cloud') {
120+
<app-nx-cloud [invert]="invert()" [scale]="160" />
121+
}
122+
}
123+
</ng-template>
124+
125+
<ng-template #boxes>
106126
<app-box
107127
color="#EAC435"
108128
[width]="1"
@@ -113,17 +133,13 @@ export class Box {
113133
/>
114134
<app-box color="#03CEA4" [width]="2" [height]="2" [depth]="2" [position]="[-2, 0, -2]" />
115135
<app-box color="#FB4D3D" [width]="2" [height]="2" [depth]="2" [position]="[2, 0, -2]" />
116-
</ngts-bounds>
117-
118-
<ngts-environment [options]="{ preset: 'city' }" />
119-
@if (withEffect()) {
120-
<ngts-orbit-controls [options]="{ makeDefault: true }" />
121-
}
136+
</ng-template>
122137
`,
123138
schemas: [CUSTOM_ELEMENTS_SCHEMA],
124139
changeDetection: ChangeDetectionStrategy.OnPush,
125140
host: { class: 'inverted-stencil-buffer-soba-experience' },
126141
imports: [
142+
NgTemplateOutlet,
127143
CircularMask,
128144
NgtsBounds,
129145
NgtsFloat,
@@ -141,5 +157,5 @@ export class Experience {
141157
protected invert = invert;
142158
protected logo = logo;
143159

144-
withEffect = input(true);
160+
asRenderTexture = input(false);
145161
}

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,11 @@ export class LODBust {
5757
@for (p of positions; track $index) {
5858
<app-bust [position]="p.position" [rotation]="p.rotation" />
5959
}
60-
<ngts-orbit-controls [options]="{ autoRotate: true, autoRotateSpeed: 0.5, zoomSpeed: 0.075 }" />
60+
61+
@if (!asRenderTexture()) {
62+
<ngts-orbit-controls [options]="{ autoRotate: true, autoRotateSpeed: 0.5, zoomSpeed: 0.075 }" />
63+
}
64+
6165
<ngt-point-light [intensity]="0.5 * Math.PI" [decay]="0" />
6266
<ngt-spot-light [position]="50" [intensity]="1.5 * Math.PI" [castShadow]="true" [decay]="0" />
6367
<ngts-environment [options]="{ preset: 'city' }" />
@@ -71,4 +75,6 @@ export class LODBust {
7175
export class Experience {
7276
protected Math = Math;
7377
protected positions = positions;
78+
79+
asRenderTexture = input(false);
7480
}

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,14 +133,18 @@ export class Model {
133133
/>
134134
</app-model>
135135
<ngts-environment [options]="{ preset: 'city' }" />
136-
<ngts-orbit-controls [options]="{ autoRotate: true }" />
136+
@if (!asRenderTexture()) {
137+
<ngts-orbit-controls [options]="{ autoRotate: true }" />
138+
}
137139
`,
138140
schemas: [CUSTOM_ELEMENTS_SCHEMA],
139141
changeDetection: ChangeDetectionStrategy.OnPush,
140142
imports: [Model, NgtsEnvironment, NgtsContactShadows, NgtsOrbitControls, NgtArgs],
141143
})
142144
export class Experience {
143145
protected Math = Math;
146+
147+
asRenderTexture = input(false);
144148
}
145149

146150
injectGLTF.preload(() => './earth.gltf');

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,49 +25,49 @@ import { Letter } from './letter';
2525
<app-letter char="A" [position]="[1, 50, -1]">
2626
<ng-template>
2727
<ngt-group [scale]="10">
28-
<app-basic-experience [withEffect]="false" />
28+
<app-basic-experience [asRenderTexture]="true" />
2929
</ngt-group>
3030
</ng-template>
3131
</app-letter>
3232
3333
<app-letter char="N" [position]="[2, 60, -2]" [rotation]="[4, 5, 6]">
3434
<ng-template>
3535
<ngt-group [scale]="10">
36-
<app-instances-experience [withEffect]="false" />
36+
<app-instances-experience [asRenderTexture]="true" />
3737
</ngt-group>
3838
</ng-template>
3939
</app-letter>
4040
4141
<app-letter char="G" [position]="[3, 70, 2]" [rotation]="[7, 8, 9]">
4242
<ng-template>
43-
<app-instanced-vertex-colors-experience [withEffect]="false" />
43+
<app-instanced-vertex-colors-experience [asRenderTexture]="true" />
4444
</ng-template>
4545
</app-letter>
4646
4747
<app-letter char="U" [position]="[-1, 80, 3]" [rotation]="[10, 11, 12]">
4848
<ng-template>
49-
<app-lod-experience />
49+
<app-lod-experience [asRenderTexture]="true" />
5050
</ng-template>
5151
</app-letter>
5252
5353
<app-letter char="L" [position]="[-2, 90, 2]" [rotation]="[13, 14, 15]">
5454
<ng-template>
5555
<ngt-group [scale]="10">
56-
<app-lowpoly-earth-experience />
56+
<app-lowpoly-earth-experience [asRenderTexture]="true" />
5757
</ngt-group>
5858
</ng-template>
5959
</app-letter>
6060
6161
<app-letter char="A" [position]="[-3, 100, -3]" [rotation]="[16, 17, 18]">
6262
<ng-template>
63-
<app-shaky-experience [withEffect]="false" />
63+
<app-shaky-experience [asRenderTexture]="true" />
6464
</ng-template>
6565
</app-letter>
6666
6767
<app-letter char="R" [position]="[-4, 110, 1]" [rotation]="[19, 20, 21]" [stencilBuffer]="true">
6868
<ng-template>
6969
<ngt-group [scale]="5">
70-
<app-inverted-stencil-buffer-experience [withEffect]="false" />
70+
<app-inverted-stencil-buffer-experience [asRenderTexture]="true" />
7171
</ngt-group>
7272
</ng-template>
7373
</app-letter>

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

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import { NgtsCenter, NgtsRenderTexture, NgtsRenderTextureContent } from 'angular
2424
import { Group } from 'three';
2525

2626
import { NgTemplateOutlet } from '@angular/common';
27+
import CameraControls from 'camera-controls';
2728
import boldFont from './bold.blob';
2829

2930
@Component({
@@ -118,20 +119,19 @@ export class Letter {
118119
}
119120

120121
onDblClick(event: NgtThreeEvent<MouseEvent>) {
121-
// event.stopPropagation();
122-
// const controls = this.controls() as CameraControls;
123-
// if (!controls) return;
124-
//
125-
// // TODO: not sure why this is not working as expected.
126-
// // This is supposed to zoom to the center of the letter, but it's always zooming to the center of the scene
127-
// void controls.fitToBox(this.centerRef().groupRef().nativeElement, true);
122+
event.stopPropagation();
123+
const controls = this.controls() as CameraControls;
124+
if (!controls) return;
125+
126+
// NOTE: if any of the render-texture scene has other controls, it messes this up
127+
void controls.fitToBox(this.centerRef().groupRef().nativeElement, true);
128128
}
129129

130130
onPointerMissed(event: NgtThreeEvent<MouseEvent>) {
131-
// event.stopPropagation();
132-
// const controls = this.controls() as CameraControls;
133-
// if (!controls) return;
134-
//
135-
// void controls.reset(true);
131+
event.stopPropagation();
132+
const controls = this.controls() as CameraControls;
133+
if (!controls) return;
134+
135+
void controls.reset(true);
136136
}
137137
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ export class Rig {
8989
9090
<ngts-environment [options]="{ preset: 'warehouse' }" />
9191
92-
@if (withEffect()) {
92+
@if (!asRenderTexture()) {
9393
<app-rig />
9494
<ngts-orbit-controls [options]="{ makeDefault: true, minPolarAngle: 0, maxPolarAngle: Math.PI / 2 }" />
9595
}
@@ -102,5 +102,5 @@ export class Rig {
102102
export class Experience {
103103
protected readonly Math = Math;
104104

105-
withEffect = input(true);
105+
asRenderTexture = input(false);
106106
}

0 commit comments

Comments
 (0)