docs: update theatre example

Author: nartc

apps/examples/src/app/theatre/basic/basic.ts

@@ -1,12 +1,12 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { TheatreProject, TheatreSequence, TheatreSheet, TheatreStudio } from 'angular-three-theatre';
+import { TheatreProject, TheatreSheet, TheatreStudio } from 'angular-three-theatre';
 import { NgtCanvas } from 'angular-three/dom';
 import { SceneGraph } from './scene';
 import stateJson from './state.json';
 
 @Component({
 	template: `
-		<ngt-canvas shadows [camera]="{ position: [5, 5, 5] }">
+		<ngt-canvas shadows>
 			<theatre-project *canvasContent studio [config]="{ state }">
 				<theatre-sheet [sequence]="{ autoplay: true, iterationCount: Infinity }">
 					<app-scene-graph />
@@ -15,7 +15,7 @@ import stateJson from './state.json';
 		</ngt-canvas>
 	`,
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	imports: [NgtCanvas, SceneGraph, TheatreProject, TheatreStudio, TheatreSheet, TheatreSequence],
+	imports: [NgtCanvas, SceneGraph, TheatreProject, TheatreStudio, TheatreSheet],
 	host: { class: 'basic-theatre' },
 })
 export default class Basic {

apps/examples/src/app/theatre/basic/scene.ts

@@ -1,52 +1,76 @@
-import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component } from '@angular/core';
-import { NgtArgs } from 'angular-three';
-import { TheatreSheetObject } from 'angular-three-theatre';
+import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, signal, viewChild } from '@angular/core';
+import { injectBeforeRender, NgtArgs } from 'angular-three';
+import { NgtsRoundedBox } from 'angular-three-soba/abstractions';
+import { NgtsPerspectiveCamera } from 'angular-three-soba/cameras';
+import { TheatreSheetObject, TheatreSheetObjectTransform } from 'angular-three-theatre';
 
 @Component({
 	selector: 'app-scene-graph',
 	template: `
+		<ngts-perspective-camera #camera [options]="{ makeDefault: true, position: [5, 5, 5], fov: 75, far: 1000 }" />
+
 		<ngt-ambient-light
 			#ambientLight
 			*sheetObject="'Ambient Light'"
 			[sync]="ambientLight"
 			[syncProps]="['intensity', 'color']"
 		/>
 
-		<ng-template sheetObject="Directional Light">
-			<theatre-transform>
-				<ngt-directional-light
-					#directionalLight
-					castShadow
-					[sync]="directionalLight"
-					[syncProps]="['intensity', 'color']"
+		<theatre-transform *sheetObject="'Directional Light'">
+			<ngt-directional-light
+				#directionalLight
+				castShadow
+				[sync]="directionalLight"
+				[syncProps]="['intensity', 'color']"
+			/>
+		</theatre-transform>
+
+		<theatre-transform
+			#boxTransform
+			*sheetObject="'Box'; select as select; deselect as deselect"
+			[options]="{ mode: boxTransformMode() }"
+		>
+			<ngts-rounded-box [options]="{ castShadow: true }" (click)="select()" (pointermissed)="deselect()">
+				<ngt-mesh-standard-material
+					#boxMaterial
+					transparent
+					[sync]="boxMaterial"
+					[syncProps]="['color', 'roughness', 'metalness', 'side', 'opacity']"
 				/>
-			</theatre-transform>
-		</ng-template>
-
-		<ng-template sheetObject="Box" let-select="select" let-deselect="deselect">
-			<theatre-transform>
-				<ngt-mesh castShadow (click)="select()" (pointermissed)="deselect()">
-					<ngt-box-geometry />
-					<ngt-mesh-standard-material
-						#boxMaterial
-						transparent
-						[sync]="boxMaterial"
-						[syncProps]="['color', 'roughness', 'metalness', 'side', 'opacity']"
-					/>
-				</ngt-mesh>
-			</theatre-transform>
-		</ng-template>
-
-		<ngt-mesh receiveShadow [position.y]="-1" [rotation.x]="-Math.PI / 2">
-			<ngt-circle-geometry *args="[1.4, 48]" />
+			</ngts-rounded-box>
+		</theatre-transform>
+
+		<ngt-mesh receiveShadow [position.y]="-1" [rotation.x]="-Math.PI / 2" [scale]="10">
+			<ngt-circle-geometry />
 			<ngt-mesh-standard-material />
 		</ngt-mesh>
 	`,
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
-	imports: [NgtArgs, TheatreSheetObject],
+	imports: [NgtArgs, TheatreSheetObject, NgtsRoundedBox, NgtsPerspectiveCamera],
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	host: { class: 'experience-basic-theatre' },
+	host: { class: 'experience-basic-theatre', '(document:keyup)': 'onKeyup($event)' },
 })
 export class SceneGraph {
 	protected readonly Math = Math;
+
+	private boxTransform = viewChild.required('boxTransform', { read: TheatreSheetObjectTransform });
+	private modes = ['translate', 'rotate', 'scale'] as const;
+	protected boxTransformMode = signal<(typeof this.modes)[number]>('translate');
+
+	protected onKeyup(event: KeyboardEvent) {
+		if (event.key === 'Shift' && event.location === KeyboardEvent.DOM_KEY_LOCATION_LEFT) {
+			// cycle through modes
+			this.boxTransformMode.set(
+				this.modes[(this.modes.indexOf(this.boxTransformMode()) + 1) % this.modes.length],
+			);
+		}
+	}
+
+	constructor() {
+		injectBeforeRender(({ camera }) => {
+			const boxSheetObject = this.boxTransform().sheetObject();
+			const position = boxSheetObject.value['position'];
+			camera.lookAt(position.x, position.y, position.z);
+		});
+	}
 }