docs: adjust aviator demo agian

Author: nartc

apps/kitchen-sink/src/app/misc/aviator/airplane/airplane.ts

@@ -1,4 +1,5 @@
 import {
+	afterNextRender,
 	ChangeDetectionStrategy,
 	Component,
 	CUSTOM_ELEMENTS_SCHEMA,
@@ -122,15 +123,9 @@ export class Airplane {
 	constructor() {
 		const gameStore = inject(GameStore);
 
-		effect(
-			() => {
-				const airplane = this.airplaneRef().nativeElement;
-				if (!airplane) return;
-
-				gameStore.airplane.set(airplane);
-			},
-			{ allowSignalWrites: true },
-		);
+		afterNextRender(() => {
+			gameStore.airplaneRef = this.airplaneRef;
+		});
 
 		effect(() => {
 			const suspensionGeometry = this.suspensionGeometryRef()?.nativeElement;

apps/kitchen-sink/src/app/misc/aviator/airplane/pilot.ts

@@ -115,16 +115,14 @@ export class Pilot {
 		});
 
 		effect(() => {
-			const sideGeometries = this.sideGeometryRefs();
-			for (const sideGeometry of sideGeometries) {
+			for (const sideGeometry of this.sideGeometryRefs()) {
 				sideGeometry.nativeElement.applyMatrix4(new Matrix4().makeTranslation(-6, 0, 0));
 			}
 		});
 
 		let angleHairs = 0;
 		injectBeforeRender(({ delta }) => {
 			const topHair = this.topHairRef().nativeElement;
-			if (!topHair) return;
 
 			for (let i = 0; i < topHair.children.length; i++) {
 				const child = topHair.children[i];

apps/kitchen-sink/src/app/misc/aviator/airplane/propeller.ts

@@ -60,14 +60,15 @@ export class Propeller {
 			const propellerGeometry = this.propellerGeometryRef()?.nativeElement;
 			if (!propellerGeometry) return;
 
-			propellerGeometry.attributes['position'].array[4 * 3 + 1] -= 5;
-			propellerGeometry.attributes['position'].array[4 * 3 + 2] += 5;
-			propellerGeometry.attributes['position'].array[5 * 3 + 1] -= 5;
-			propellerGeometry.attributes['position'].array[5 * 3 + 2] -= 5;
-			propellerGeometry.attributes['position'].array[6 * 3 + 1] += 5;
-			propellerGeometry.attributes['position'].array[6 * 3 + 2] += 5;
-			propellerGeometry.attributes['position'].array[7 * 3 + 1] += 5;
-			propellerGeometry.attributes['position'].array[7 * 3 + 2] -= 5;
+			const positions = propellerGeometry.attributes['position'].array;
+			positions[4 * 3 + 1] -= 5;
+			positions[4 * 3 + 2] += 5;
+			positions[5 * 3 + 1] -= 5;
+			positions[5 * 3 + 2] -= 5;
+			positions[6 * 3 + 1] += 5;
+			positions[6 * 3 + 2] += 5;
+			positions[7 * 3 + 1] += 5;
+			positions[7 * 3 + 2] -= 5;
 		});
 
 		injectBeforeRender(({ delta }) => {

apps/kitchen-sink/src/app/misc/aviator/collectible/coin.ts

@@ -55,14 +55,15 @@ export class Coin extends Collectible {
 		super();
 		injectBeforeRender(({ delta }) => {
 			const coin = this.coinRef().nativeElement;
-			if (!coin) return;
 
 			this.rotateAroundSea(coin, delta);
-
 			coin.rotation.x += Math.random() * 0.1;
 			coin.rotation.y += Math.random() * 0.1;
 
-			const airplane = this.gameStore.airplane();
+			const airplaneRef = this.gameStore.airplaneRef;
+			if (!airplaneRef) return;
+
+			const airplane = airplaneRef().nativeElement;
 			if (!airplane) return;
 
 			if (this.collide(airplane, coin, COIN_DISTANCE_TOLERANCE)) {

apps/kitchen-sink/src/app/misc/aviator/game.store.ts

@@ -1,10 +1,10 @@
-import { Injectable, signal } from '@angular/core';
+import { ElementRef, Injectable, Signal, signal } from '@angular/core';
 import { Object3D } from 'three';
 
 @Injectable()
 export class GameStore {
 	coins = signal(0);
-	airplane = signal<Object3D | null>(null);
+	airplaneRef?: Signal<ElementRef<Object3D>>;
 
 	// NOTE: these aren't signals because they are game state used in the animation loop.
 	state = {

apps/kitchen-sink/src/app/misc/aviator/sky/sky.ts

@@ -40,9 +40,8 @@ export class Sky {
 	private skyRef = viewChild.required<ElementRef<Object3D>>('sky');
 	private clouds = viewChildren(Cloud);
 	private cloudObjects = computed(() => {
-		const clouds = this.clouds();
 		const objects: Object3D[] = [];
-		for (const cloud of clouds) {
+		for (const cloud of this.clouds()) {
 			objects.push(cloud.cloudRef().nativeElement);
 		}
 		return objects;