docs: adjust new demo

Author: nartc

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

@@ -4,6 +4,7 @@ import {
 	CUSTOM_ELEMENTS_SCHEMA,
 	effect,
 	ElementRef,
+	input,
 	viewChild,
 } from '@angular/core';
 import { extend, NgtArgs } from 'angular-three';
@@ -110,6 +111,7 @@ export class Boxes {
 }
 
 @Component({
+	selector: 'app-instances-experience',
 	standalone: true,
 	template: `
 		<ngt-color attach="background" *args="['#e0e0e0']" />
@@ -119,11 +121,15 @@ export class Boxes {
 
 		<app-boxes />
 
-		<ngts-camera-controls />
+		@if (withEffect()) {
+			<ngts-camera-controls />
+		}
 	`,
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	host: { class: 'instances-soba-experience' },
 	imports: [NgtsCameraControls, Boxes, NgtArgs],
 })
-export class Experience {}
+export class Experience {
+	withEffect = input(true);
+}

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

@@ -83,6 +83,7 @@ export class Box {
 }
 
 @Component({
+	selector: 'app-inverted-stencil-buffer-experience',
 	standalone: true,
 	template: `
 		<ngt-color attach="background" *args="['#e0e0e0']" />
@@ -91,7 +92,7 @@ export class Box {
 		<ngt-hemisphere-light [intensity]="Math.PI * 1.5" groundColor="red" />
 
 		<app-circular-mask />
-		<ngts-bounds [options]="{ fit: true, clip: true, observe: true }">
+		<ngts-bounds [options]="{ fit: withEffect(), clip: withEffect(), observe: withEffect() }">
 			<ngts-float [options]="{ floatIntensity: 4, rotationIntensity: 0, speed: 4 }">
 				@switch (logo()) {
 					@case ('angular') {
@@ -118,7 +119,9 @@ export class Box {
 		</ngts-bounds>
 
 		<ngts-environment [options]="{ preset: 'city' }" />
-		<ngts-orbit-controls [options]="{ makeDefault: true }" />
+		@if (withEffect()) {
+			<ngts-orbit-controls [options]="{ makeDefault: true }" />
+		}
 	`,
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 	changeDetection: ChangeDetectionStrategy.OnPush,
@@ -140,4 +143,6 @@ export class Experience {
 	protected readonly Math = Math;
 	protected invert = invert;
 	protected logo = logo;
+
+	withEffect = input(true);
 }

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

@@ -1,16 +1,16 @@
 import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, inject } from '@angular/core';
 import { NgtArgs } from 'angular-three';
 import { NgtrCuboidCollider, NgtrPhysics } from 'angular-three-rapier';
-import { NgtsCameraControls } from 'angular-three-soba/controls';
+import { NgtsCameraControls, NgtsOrbitControls } from 'angular-three-soba/controls';
 import { NgtsPreload } from 'angular-three-soba/misc';
-import { NgtsContactShadows, NgtsEnvironment, NgtsLightformer } from 'angular-three-soba/staging';
+import { NgtsBounds, NgtsContactShadows, NgtsEnvironment, NgtsLightformer } from 'angular-three-soba/staging';
 import { Experience as BasicExperience } from '../basic/experience';
-import { Experience as BrunoExperience } from '../bruno-simons-20k/experience';
 import { Experience as InstancedVertexColorsExperience } from '../instanced-vertex-colors/experience';
+import { Experience as InstancesExperience } from '../instances/exprience';
+import { Experience as InvertedStencilBufferExperience } from '../inverted-stencil-buffer/experience';
 import { Experience as LodExperience } from '../lod/experience';
 import { Experience as LowpolyEarthExperience } from '../lowpoly-earth/experience';
 import { Experience as ShakyExperience } from '../shaky/experience';
-import { Experience as StarsExperience } from '../stars/experience';
 import { Letter } from './letter';
 
 /* credit: https://pmndrs.github.io/examples/demos/portal-shapes */
@@ -25,13 +25,17 @@ import { Letter } from './letter';
 				<!-- ANGULAR -->
 				<app-letter char="A" [position]="[1, 50, -1]">
 					<ng-template>
-						<app-basic-experience [withEffect]="false" />
+						<ngt-group [scale]="10">
+							<app-basic-experience [withEffect]="false" />
+						</ngt-group>
 					</ng-template>
 				</app-letter>
 
 				<app-letter char="N" [position]="[2, 60, -2]" [rotation]="[4, 5, 6]">
 					<ng-template>
-						<app-bruno-experience [withEffect]="false" />
+						<ngt-group [scale]="10">
+							<app-instances-experience [withEffect]="false" />
+						</ngt-group>
 					</ng-template>
 				</app-letter>
 
@@ -49,7 +53,7 @@ import { Letter } from './letter';
 
 				<app-letter char="L" [position]="[-2, 90, 2]" [rotation]="[13, 14, 15]">
 					<ng-template>
-						<ngt-group [scale]="15">
+						<ngt-group [scale]="10">
 							<app-lowpoly-earth-experience />
 						</ngt-group>
 					</ng-template>
@@ -63,7 +67,9 @@ import { Letter } from './letter';
 
 				<app-letter char="R" [position]="[-4, 110, 1]" [rotation]="[19, 20, 21]" [stencilBuffer]="true">
 					<ng-template>
-						<app-stars-experience />
+						<ngt-group [scale]="5">
+							<app-inverted-stencil-buffer-experience [withEffect]="false" />
+						</ngt-group>
 					</ng-template>
 				</app-letter>
 
@@ -147,12 +153,14 @@ import { Letter } from './letter';
 		Letter,
 		BasicExperience,
 		NgtArgs,
-		BrunoExperience,
 		InstancedVertexColorsExperience,
 		LodExperience,
 		LowpolyEarthExperience,
 		ShakyExperience,
-		StarsExperience,
+		InvertedStencilBufferExperience,
+		InstancesExperience,
+		NgtsBounds,
+		NgtsOrbitControls,
 	],
 	hostDirectives: [NgtsPreload],
 })

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

@@ -8,15 +8,15 @@ import {
 	TemplateRef,
 	viewChild,
 } from '@angular/core';
-import { injectBeforeRender, injectObjectEvents, injectStore, NgtArgs, NgtEuler, NgtVector3 } from 'angular-three';
+import { injectBeforeRender, injectStore, NgtArgs, NgtEuler, NgtThreeEvent, NgtVector3 } from 'angular-three';
 import { NgtrRigidBody } from 'angular-three-rapier';
 import { NgtsText3D } from 'angular-three-soba/abstractions';
 import { NgtsMeshTransmissionMaterial } from 'angular-three-soba/materials';
 import { NgtsCenter, NgtsRenderTexture, NgtsRenderTextureContent } from 'angular-three-soba/staging';
-import CameraControls from 'camera-controls';
 import { Group } from 'three';
 
 import { NgTemplateOutlet } from '@angular/common';
+import CameraControls from 'camera-controls';
 import boldFont from './bold.blob';
 
 @Component({
@@ -28,6 +28,8 @@ import boldFont from './bold.blob';
 			[options]="{ restitution: 0.1, colliders: 'cuboid' }"
 			[position]="position()"
 			[rotation]="rotation()"
+			(dblclick)="onDblClick($any($event))"
+			(pointermissed)="onPointerMissed($any($event))"
 		>
 			<ngts-center>
 				<ngts-text-3d
@@ -89,7 +91,6 @@ export class Letter {
 	rotation = input<NgtEuler>([0, 0, 0]);
 
 	private centerRef = viewChild.required(NgtsCenter);
-	private text3DRef = viewChild.required(NgtsText3D);
 	private contentsRef = viewChild<ElementRef<Group>>('contents');
 
 	protected content = contentChild.required(TemplateRef);
@@ -103,20 +104,25 @@ export class Letter {
 			const contents = this.contentsRef()?.nativeElement;
 			if (!contents) return;
 			// The letters contents are moved to its whereabouts in world coordinates
-			// contents.matrix.copy(this.centerRef().groupRef().nativeElement.matrixWorld);
+			contents.matrix.copy(this.centerRef().groupRef().nativeElement.matrixWorld);
 		});
+	}
 
-		// attach event to the mesh of text3D
-		injectObjectEvents(() => this.text3DRef().meshRef().nativeElement, {
-			dblclick: (event) => {
-				event.stopPropagation();
-				const controls = this.controls() as CameraControls;
-				if (!controls) return;
+	onDblClick(event: NgtThreeEvent<MouseEvent>) {
+		event.stopPropagation();
+		const controls = this.controls() as CameraControls;
+		if (!controls) return;
 
-				// TODO: not sure why this is not working as expected.
-				//  This is supposed to zoom to the center of the letter, but it's always zooming to the center of the scene
-				void controls.fitToBox(this.centerRef().groupRef().nativeElement, true);
-			},
-		});
+		// TODO: not sure why this is not working as expected.
+		//  This is supposed to zoom to the center of the letter, but it's always zooming to the center of the scene
+		void controls.fitToBox(this.centerRef().groupRef().nativeElement, true);
+	}
+
+	onPointerMissed(event: NgtThreeEvent<MouseEvent>) {
+		event.stopPropagation();
+		const controls = this.controls() as CameraControls;
+		if (!controls) return;
+
+		void controls.reset(true);
 	}
 }