refactor: improve navigation limits behaviors

src/common/experiences/navigation.model.ts

@@ -55,3 +55,8 @@ export interface NavigationView {
 	onContextMenu?: (event: MouseEvent) => unknown;
 	onWheel?: (event: Event) => unknown;
 }
+
+export interface ViewLimits {
+	spherical: Exclude<NavigationView["spherical"], undefined>["limits"];
+	target: Exclude<NavigationView["target"], undefined>["limits"];
+}

src/experiences/home/camera-animation.ts

@@ -117,34 +117,35 @@ export class CameraAnimation extends ExperienceBasedBlueprint {
 
 	public enable() {
 		this._doneAnimations();
+		this.enabled = true;
 
 		if (this._navigation?.view) this._navigation.view.controls = false;
-		this.cameraPath.getPointAt(this.progress.current, this.positionOnCurve);
+		this.cameraPath.getPointAt(this.progress.current % 1, this.positionOnCurve);
 
 		return this._navigation
 			?.updateCameraPosition(
 				this.positionOnCurve,
 				this._navigation.view.center,
-				Config.GSAP_ANIMATION_DURATION * 0.8
+				Config.GSAP_ANIMATION_DURATION * 0.4
 			)
 			.add(() => {
-				this.enabled = true;
 				this.emit(events.STARTED, this);
 			});
 	}
 
 	public disable() {
 		this._doneAnimations();
+
 		this.enabled = false;
+		if (this._navigation?.view) this._navigation.view.controls = true;
 
 		return this._navigation
 			?.updateCameraPosition(
 				this.positionOnCurve.setY(this._camera?.lookAtPosition.y ?? 0),
 				this._navigation.view.center,
-				Config.GSAP_ANIMATION_DURATION * 0.5
+				Config.GSAP_ANIMATION_DURATION * 0.2
 			)
 			.add(() => {
-				if (this._navigation?.view) this._navigation.view.controls = true;
 				this.emit(events.ENDED, this);
 			});
 	}

src/experiences/home/camera.ts

@@ -41,7 +41,7 @@ export class Camera extends ExperienceBasedBlueprint {
 	private _onRouteChange?: () => void;
 
 	public readonly initialCameraFov = 45;
-	public readonly initialCameraPosition = new Vector3(0, 10, 20);
+	public readonly initialCameraPosition = new Vector3(0, 15, 30);
 	public readonly cameras = [
 		(() =>
 			this._appCameraInstance instanceof PerspectiveCamera

src/experiences/home/navigation.ts

@@ -9,7 +9,10 @@ import { HomeExperience } from "./";
 import { ExperienceBasedBlueprint } from "~/blueprints/experiences/experience-based.blueprint";
 
 // MODELS
-import type { NavigationView } from "~/common/experiences/navigation.model";
+import type {
+	NavigationView,
+	ViewLimits,
+} from "~/common/experiences/navigation.model";
 
 // STATIC
 import { ANIMATION_ENDED, ANIMATION_STARTED } from "~/static/event.static";
@@ -36,10 +39,7 @@ export class Navigation extends ExperienceBasedBlueprint {
 		smallestSide: 0,
 		largestSide: 0,
 	};
-	private readonly _viewLimits: {
-		spherical: Exclude<NavigationView["spherical"], undefined>["limits"];
-		target: Exclude<NavigationView["target"], undefined>["limits"];
-	} = {
+	private readonly _viewLimits: ViewLimits = {
 		spherical: {
 			radius: { min: 0, max: 0 },
 			phi: { min: 0, max: 0 },
@@ -58,7 +58,7 @@ export class Navigation extends ExperienceBasedBlueprint {
 	private readonly _view: NavigationView = {
 		enabled: true,
 		controls: true,
-		limits: false,
+		limits: true,
 		center: new Vector3(),
 		spherical: {
 			value: new Spherical(),

src/experiences/home/world/manager.ts

@@ -108,7 +108,12 @@ export class WorldManager extends ExperienceBasedBlueprint {
 			});
 
 		if (!this._cameraAnimation)
-			throw new Error("No cameraAnimation class found", { cause: WRONG_PARAM });
+			throw new Error("No cameraAnimation module found", {
+				cause: WRONG_PARAM,
+			});
+
+		if (!this._navigation)
+			throw new Error("No navigation module found", { cause: WRONG_PARAM });
 
 		const PREV_SCENE = this?._prevSceneKey
 			? this._world.availablePageScenes[this._prevSceneKey]
@@ -131,7 +136,7 @@ export class WorldManager extends ExperienceBasedBlueprint {
 			this._router?.currentRouteKey === this._world.mainSceneKey
 		);
 		const IS_SWITCHING_PROJECTED =
-			this._router.currentRouteKey !== this._world?.mainSceneKey &&
+			this._router.currentRouteKey !== this._world.mainSceneKey &&
 			this._camera?.currentCameraIndex === 0;
 		const updateCameraToCurrentScene = () => {
 			if (this._navigation?.timeline.isActive())
@@ -143,6 +148,7 @@ export class WorldManager extends ExperienceBasedBlueprint {
 				0.84
 			);
 		};
+		const prevNavigationLimits = this._navigation.view.limits;
 
 		if (this?._prevSceneKey !== this._world.mainSceneKey && !IS_SWITCHING_MAIN)
 			PREV_SCENE?.outro();
@@ -163,18 +169,22 @@ export class WorldManager extends ExperienceBasedBlueprint {
 			target: 0,
 		};
 
+		if (IS_SWITCHING_MAIN || IS_SWITCHING_PROJECTED)
+			this._navigation.view.limits = false;
+
 		if (IS_SWITCHING_MAIN) {
 			this._prevProjectedSceneKey = this._prevSceneKey;
-
 			this._triggerTransitionEffect().add(() => {
-				this._camera?.switchCamera(0);
-				console.log(SCENE1_PC_SCREEN_POSITION)
-				this._navigation?.setLimits(CURRENT_SCENE.navigationLimits);
-				this._navigation?.setTargetPosition(SCENE1_PC_SCREEN_POSITION);
-				this._navigation?.updateCameraPosition(
+				if (!this._navigation || !this._camera) return;
+
+				this._camera.switchCamera(0);
+				this._navigation.setLimits(CURRENT_SCENE.navigationLimits);
+				this._navigation.setTargetPosition(SCENE1_PC_SCREEN_POSITION);
+				this._navigation.updateCameraPosition(
 					CURRENT_SCENE.cameraPath?.getPoint(0),
 					CURRENT_SCENE.center
 				);
+				this._navigation.view.limits = prevNavigationLimits;
 			}, `-=${this._transitionEffectDefault.duration}`);
 		}
 
@@ -191,14 +201,17 @@ export class WorldManager extends ExperienceBasedBlueprint {
 				.add(() => {
 					this._triggerTransitionEffect()
 						.add(() => {
-							this._camera?.switchCamera(1);
-							this._navigation?.setLimits(CURRENT_SCENE.navigationLimits);
-							this._navigation?.setTargetPosition(
-								this._camera?.currentCamera.userData.lookAt
+							if (!this._navigation || !this._camera) return;
+
+							this._camera.switchCamera(1);
+							this._navigation.setLimits(CURRENT_SCENE.navigationLimits);
+							this._navigation.setTargetPosition(
+								this._camera.currentCamera.userData.lookAt
 							);
-							this._navigation?.setPositionInSphere(
-								this._camera?.currentCamera.position
+							this._navigation.setPositionInSphere(
+								this._camera.currentCamera.position
 							);
+							this._navigation.view.limits = prevNavigationLimits;
 						}, `-=${this._transitionEffectDefault.duration}`)
 						.add(() => {
 							PREV_SCENE?.outro();
@@ -214,6 +227,42 @@ export class WorldManager extends ExperienceBasedBlueprint {
 		this._prevSceneKey = this._router?.currentRouteKey;
 	}
 
+	/** Initialize the main scene and launch it intro */
+	private async _intro() {
+		if (
+			!(
+				this._world?.scene1?.pcScreen &&
+				this._world?.scene1.pcScreenWebglTexture &&
+				this._world?.scene1.pcScreenProjectedCamera &&
+				this._cameraAnimation
+			)
+		)
+			throw new Error("Wrong intro configs", {
+				cause: errors.WRONG_PARAM,
+			});
+
+		this._prevProjectedSceneKey = pages.SKILL_PAGE;
+		const mainScene = this._world.scene1;
+		const projectedScene =
+			this._world.availablePageScenes[this._prevProjectedSceneKey];
+
+		projectedScene.intro();
+		projectedScene.cameraPath.getPoint(
+			0,
+			mainScene.pcScreenProjectedCamera.position
+		);
+
+		mainScene.pcScreenProjectedCamera.lookAt(projectedScene.center);
+		mainScene.pcScreenProjectedCamera.userData.lookAt = projectedScene.center;
+		mainScene.intro();
+		this._navigation?.setLimits(mainScene.navigationLimits);
+		await this._navigation?.updateCameraPosition(
+			mainScene.cameraPath?.getPoint(0),
+			mainScene.center
+		);
+		this._cameraAnimation.enabled = true
+	}
+
 	public async construct() {
 		this._world = this._experience.world;
 
@@ -232,31 +281,9 @@ export class WorldManager extends ExperienceBasedBlueprint {
 				cause: errors.WRONG_PARAM,
 			});
 
-		// INTRO
-		this._prevProjectedSceneKey = pages.SKILL_PAGE;
-		this._world.availablePageScenes[this._prevProjectedSceneKey].intro();
-
-		if (
-			this._world.scene1?.pcScreen &&
-			this._world.scene1.pcScreenWebglTexture &&
-			this._world.scene1.pcScreenProjectedCamera
-		) {
-			this._world.availablePageScenes[
-				this._prevProjectedSceneKey ?? ""
-			]?.cameraPath?.getPoint(
-				0,
-				this._world.scene1.pcScreenProjectedCamera.position
-			);
-			this._world.scene1.pcScreenProjectedCamera.lookAt(
-				this._world.availablePageScenes[this._prevProjectedSceneKey].center
-			);
-			this._world.scene1.pcScreenProjectedCamera.userData.lookAt =
-				this._world.availablePageScenes[this._prevProjectedSceneKey].center;
-		}
-
-		await this._world.availablePageScenes[this._world.mainSceneKey].intro();
-
+		await this._intro();
 		this._setScene();
+
 		this._router?.on(events.CHANGED, () => this._setScene());
 		this.emit(events.CONSTRUCTED, this);
 	}

src/experiences/home/world/scene-1.component.ts

@@ -38,6 +38,7 @@ import type {
 	Materials,
 	ModelChildrenMaterials,
 } from "~/common/experiences/experience-world.model";
+import type { ViewLimits } from "~/common/experiences/navigation.model";
 
 // ASSETS
 import monitor_a_screen_recording from "~/assets/videos/monitor_a_screen_recording.webm?url";
@@ -59,28 +60,28 @@ export class Scene1Component extends SceneComponentBlueprint {
 		fixedComputerLed: "#50cdff",
 		coffeeSteam: "#b7a08e",
 	};
-	public readonly navigationLimits = {
+	public readonly navigationLimits: ViewLimits = {
 		spherical: {
-			radius: { min: 5, max: 20 },
+			radius: { min: 10, max: 19.2 },
 			phi: { min: 0.01, max: Math.PI * 0.5 },
 			theta: { min: 0, max: Math.PI * 0.5 },
 			enabled: true,
 			enabledPhi: true,
 			enabledTheta: true,
 		},
 		target: {
-			x: { min: -3, max: 3 },
-			y: { min: 2, max: 6 },
-			z: { min: -2.5, max: 4 },
+			x: { min: -1.5, max: 1.5 },
+			y: { min: 0, max: 3.5 },
+			z: { min: -1.5, max: 1.5 },
 			enabled: true,
 		},
 	};
 	public readonly cameraPath = new CatmullRomCurve3([
-		new Vector3(0, 5.5, 21),
+		new Vector3(0, 5.5, 19),
 		new Vector3(12, 10, 12),
-		new Vector3(21, 5.5, 0),
+		new Vector3(19, 5.5, 0),
 		new Vector3(12, 3.7, 12),
-		new Vector3(0, 5.5, 21),
+		new Vector3(0, 5.5, 19),
 	]);
 	public center = new Vector3(0, 3, 0);
 

src/experiences/home/world/scene-2.component.ts

@@ -13,27 +13,27 @@ import { Config } from "~/config";
 export class Scene2Component extends SceneComponentBlueprint {
 	public readonly navigationLimits = {
 		spherical: {
-			radius: { min: 8, max: 12 },
+			radius: { min: 6.5, max: 12 },
 			phi: { min: 0.01, max: Math.PI * 0.5 },
 			theta: { min: 0, max: Math.PI * 0.5 },
 			enabled: true,
 			enabledPhi: true,
 			enabledTheta: false,
 		},
 		target: {
-			x: { min: -3, max: 3 },
-			y: { min: 0, max: 3 },
-			z: { min: -3, max: 3 },
+			x: { min: -1.5, max: 1.5 },
+			y: { min: 0, max: 1.5 },
+			z: { min: -1.5, max: 1.5 },
 			enabled: true,
 		},
 	};
 	public cameraPath = new CatmullRomCurve3(
 		[
-			new Vector3(3.4, 4.5, -8.2),
-			new Vector3(8.4, 2.6, 2.5),
-			new Vector3(-1, 4.3, 8.1),
+			new Vector3(3.4, 4.5, -8.4),
+			new Vector3(8.6, 2.6, 2.5),
+			new Vector3(-1, 4.3, 8.4),
 			new Vector3(-8.3, 5.5, -1.9),
-			new Vector3(2, 4.85, -8.3),
+			new Vector3(3, 4.65, -8.5),
 		],
 		true
 	);

src/experiences/home/world/scene-3.component.ts

@@ -62,11 +62,11 @@ export class Scene3Component extends SceneComponentBlueprint {
 
 	public cameraPath = new CatmullRomCurve3(
 		[
-			new Vector3(5.8, 2.8, -3.7),
-			new Vector3(3.4, 4.2, 4.6),
-			new Vector3(-5.3, 2.2, 3.8),
-			new Vector3(-4, 2, -5.3),
-			new Vector3(5, 2.6, -4.4),
+			new Vector3(5.8, 2.8, -4.6),
+			new Vector3(4.6, 4.2, 4.6),
+			new Vector3(-5.3, 2.2, 4.6),
+			new Vector3(-4.6, 2, -5.3),
+			new Vector3(4.2, 2.7, -5),
 		],
 		true
 	);