feat: camera transition update

src/experiences/pages/Home/Navigation.ts

@@ -13,8 +13,8 @@ export class Navigation extends ExperienceBasedBlueprint {
 	protected _experience = new HomeExperience();
 	protected _router = useRouter();
 	protected _route = useRoute();
-	protected _availableRoutes: string[] = [];
-	protected _currentRouteIndex: number = 0;
+	protected _availableRoutes: { [routeName: string]: RouteRecordRaw } = {};
+	protected _currentRouteName?: string;
 
 	constructor() {
 		super();
@@ -28,9 +28,9 @@ export class Navigation extends ExperienceBasedBlueprint {
 			const CAUSE = _.cause as RouteRecordNormalized | undefined;
 			if (!CAUSE?.children.length) return;
 
-			this._availableRoutes = CAUSE.children.map(
-				(route) => route.name?.toString() || ""
-			);
+			CAUSE.children.forEach((route) => {
+				this._availableRoutes[route.name?.toString() ?? ""] = route;
+			});
 		}
 
 		this._setCurrentRouteIndexFromName(this._route.name?.toString());
@@ -41,23 +41,31 @@ export class Navigation extends ExperienceBasedBlueprint {
 		});
 	}
 
+	private _setCurrentRouteIndexFromName(routeName?: string) {
+		if (!routeName || !this._availableRoutes[routeName])
+			throw new Error("Route name not available", { cause: WRONG_PARAM });
+
+		this._currentRouteName = routeName;
+	}
+
 	public get availableRoutes() {
 		return this._availableRoutes;
 	}
 
 	public get currentRoute() {
-		return this.availableRoutes[this._currentRouteIndex];
+		if (!this._currentRouteName) return undefined;
+
+		return this.availableRoutes[this._currentRouteName];
 	}
 
-	public get currentRouteIndex() {
-		return this._currentRouteIndex;
+	public get currentRouteName() {
+		return this._currentRouteName;
 	}
 
-	protected _setCurrentRouteIndexFromName(routeName?: string) {
-		if (!routeName || this._availableRoutes.indexOf(routeName) === -1)
-			throw new Error("Route name not available", { cause: WRONG_PARAM });
+	public get currentRouteKey() {
+		if (!this._currentRouteName) return undefined;
 
-		this._currentRouteIndex = this._availableRoutes.indexOf(routeName);
+		return this.availableRoutes[this._currentRouteName].meta?.key;
 	}
 
 	public construct(): void {}

src/experiences/pages/Home/Renderer.ts

@@ -1,5 +1,6 @@
 import {
 	Box3,
+	Color,
 	LinearSRGBColorSpace,
 	Matrix4,
 	Mesh,
@@ -61,7 +62,7 @@ export default class Renderer extends ExperienceBasedBlueprint {
 			this._appRendererInstance.toneMappingExposure = 1;
 			this._appRendererInstance.shadowMap.enabled = false;
 			this._appRendererInstance.shadowMap.type = PCFShadowMap;
-			this._appRendererInstance.setClearColor("#211d20");
+			this._appRendererInstance.setClearColor("#5f5f5f", 1);
 			this._appRendererInstance.setSize(
 				this._experience.app.sizes.width,
 				this._experience.app.sizes.height

src/experiences/pages/Home/World/Scene_1.ts

@@ -14,6 +14,7 @@ import {
 	WebGLRenderTarget,
 	type Object3DEventMap,
 	VideoTexture,
+	LinearSRGBColorSpace,
 } from "three";
 import gsap from "gsap";
 
@@ -58,7 +59,10 @@ export class Scene_1 extends SceneBlueprint {
 		coffeeSteam: "#b7a08e",
 	};
 
-	public pcScreenWebglTexture = new WebGLRenderTarget(4096, 4096);
+	public pcScreenWebglTexture = new WebGLRenderTarget(
+		Config.FIXED_WINDOW_WIDTH,
+		Config.FIXED_WINDOW_HEIGHT
+	);
 	public pcTopArticulation?: Object3D;
 	public treeOutside?: Object3D;
 	public pcScreen?: Mesh;
@@ -215,14 +219,17 @@ export class Scene_1 extends SceneBlueprint {
 		const PHONE_VIDEO_TEXTURE = new VideoTexture(
 			this.phoneScreenVideo ?? document.createElement("video")
 		);
+		PHONE_VIDEO_TEXTURE.colorSpace = LinearSRGBColorSpace;
 
 		const MONITOR_A_VIDEO_TEXTURE = new VideoTexture(
 			this.monitorAScreenVideo ?? document.createElement("video")
 		);
+		MONITOR_A_VIDEO_TEXTURE.colorSpace = LinearSRGBColorSpace;
 
 		const MONITOR_B_VIDEO_TEXTURE = new VideoTexture(
 			this.monitorBScreenVideo ?? document.createElement("video")
 		);
+		MONITOR_B_VIDEO_TEXTURE.colorSpace = LinearSRGBColorSpace;
 
 		AVAILABLE_MATERIALS["pc_screen"] = new MeshBasicMaterial({
 			map: this.pcScreenWebglTexture?.texture,

src/experiences/pages/Home/World/Scene_2.ts

@@ -32,9 +32,15 @@ export class Scene_2 extends SceneBlueprint {
 		const AVAILABLE_MATERIALS: Materials = {};
 
 		if (!AVAILABLE_TEXTURE) return AVAILABLE_MATERIALS;
+		if (this._world?.commonMaterials["scene_container"])
+			AVAILABLE_MATERIALS["scene_container"] =
+				this._world?.commonMaterials["scene_container"].clone();
+		AVAILABLE_MATERIALS["scene_container"].alphaTest = 1;
+		AVAILABLE_MATERIALS["scene_container"].depthWrite = false;
 		AVAILABLE_MATERIALS["scene_2"] = new MeshBasicMaterial({
+			alphaMap: AVAILABLE_TEXTURE["cloudAlphaMap"],
+			alphaTest: 1,
 			map: AVAILABLE_TEXTURE["scene_2_baked_texture"],
-			transparent: true,
 		});
 
 		return AVAILABLE_MATERIALS;

src/experiences/pages/Home/World/Scene_3.ts

@@ -59,9 +59,22 @@ export class Scene_3 extends SceneBlueprint {
 		const AVAILABLE_MATERIALS: Materials = {};
 
 		if (!AVAILABLE_TEXTURE) return AVAILABLE_MATERIALS;
+
+		if (this._world?.commonMaterials["scene_container"]) {
+			AVAILABLE_MATERIALS["scene_container"] =
+				this._world?.commonMaterials["scene_container"].clone();
+			AVAILABLE_MATERIALS["scene_container"].alphaTest = 1;
+			AVAILABLE_MATERIALS["scene_container"].depthWrite = false;
+		}
+
+		if (this._world?.commonMaterials["glass"])
+			AVAILABLE_MATERIALS["glass"] =
+				this._world?.commonMaterials["glass"].clone();
+
 		AVAILABLE_MATERIALS["scene_3"] = new MeshBasicMaterial({
+			alphaMap: AVAILABLE_TEXTURE["cloudAlphaMap"],
+			alphaTest: 1,
 			map: AVAILABLE_TEXTURE["scene_3_baked_texture"],
-			transparent: true,
 		});
 
 		return AVAILABLE_MATERIALS;

src/experiences/pages/Home/World/index.ts

@@ -23,6 +23,7 @@ import { ExperienceBasedBlueprint } from "~/experiences/blueprints/ExperienceBas
 // MODELS
 import { CONSTRUCTED, DESTRUCTED } from "~/common/event.model";
 import { CAMERA_UNAVAILABLE } from "~/common/error.model";
+import { CONTACT_PAGE, HOME_PAGE, SKILL_PAGE } from "~/common/page.model";
 
 // INTERFACES
 import type { Materials } from "~/interfaces/experienceWorld";
@@ -35,8 +36,11 @@ export default class World extends ExperienceBasedBlueprint {
 	private readonly _loader = this._experience.loader;
 
 	private _commonMaterials: Materials = {};
+	private _availablePageScenes: { [sceneKey: string]: SceneBlueprint } = {};
 	private _projectedModelsPosition = new Vector3();
-	private _projectedScenes: SceneBlueprint[] = [];
+	private _projectedSceneContainer?: Group;
+
+	public readonly mainSceneKey = HOME_PAGE;
 
 	public sceneContainer?: SceneContainer;
 	public scene1?: Scene_1;
@@ -62,6 +66,7 @@ export default class World extends ExperienceBasedBlueprint {
 
 		if (AVAILABLE_TEXTURES["scene_container_baked_texture"] instanceof Texture)
 			this._commonMaterials["scene_container"] = new MeshBasicMaterial({
+				alphaMap: AVAILABLE_TEXTURES["cloudAlphaMap"],
 				map: AVAILABLE_TEXTURES["scene_container_baked_texture"],
 			});
 
@@ -76,12 +81,16 @@ export default class World extends ExperienceBasedBlueprint {
 		return this._commonMaterials;
 	}
 
+	public get availablePageScenes() {
+		return this._availablePageScenes;
+	}
+
 	public get projectedModelsPosition() {
 		return this._projectedModelsPosition;
 	}
 
-	public get projectedScenes() {
-		return this._projectedScenes;
+	public get projectedSceneContainer() {
+		return this._projectedSceneContainer;
 	}
 
 	public destruct() {
@@ -127,43 +136,49 @@ export default class World extends ExperienceBasedBlueprint {
 		this.scene1?.construct();
 		this.scene2?.construct();
 		this.scene3?.construct();
-		this.manager?.construct();
 
 		if (this.sceneContainer?.modelScene instanceof Group) {
 			const BOUNDING_BOX = new Box3().setFromObject(
 				this.sceneContainer.modelScene
 			);
-			const WIDTH = BOUNDING_BOX.max.x - BOUNDING_BOX.min.x;
-			// const HEIGHT = BOUNDING_BOX.max.y - BOUNDING_BOX.min.y;
+			// const WIDTH = BOUNDING_BOX.max.x - BOUNDING_BOX.min.x;
+			const HEIGHT = BOUNDING_BOX.max.y - BOUNDING_BOX.min.y;
 
-			this._projectedModelsPosition.set(WIDTH * 1.2, 0, 0);
+			this._projectedModelsPosition.set(0, HEIGHT * -2, 0);
 
-			const PROJECTED_SCENE_CONTAINER = this.sceneContainer.modelScene.clone();
-			PROJECTED_SCENE_CONTAINER.position.copy(this._projectedModelsPosition);
+			this._projectedSceneContainer = this.sceneContainer.modelScene.clone();
+			this._projectedSceneContainer.position.copy(
+				this._projectedModelsPosition
+			);
 
 			this.group?.add(
 				this.sceneContainer.modelScene,
-				PROJECTED_SCENE_CONTAINER
+				this._projectedSceneContainer
 			);
 		}
 
-		if (this.scene1?.modelScene) this.group?.add(this.scene1.modelScene);
+		if (this.scene1?.modelScene) {
+			this.group?.add(this.scene1.modelScene);
+			this._availablePageScenes[HOME_PAGE] = this.scene1;
+		}
 
 		if (this.scene2?.modelScene) {
 			this.scene2.modelScene.position.copy(this.projectedModelsPosition);
 
-			this._projectedScenes.push(this.scene2);
+			this._availablePageScenes[SKILL_PAGE] = this.scene2;
 			this.group?.add(this.scene2.modelScene);
 		}
 
 		if (this.scene3?.modelScene) {
 			this.scene3.modelScene.position.copy(this.projectedModelsPosition);
 
-			this._projectedScenes.push(this.scene3);
+			this._availablePageScenes[CONTACT_PAGE] = this.scene3;
 			this.group?.add(this.scene3.modelScene);
 		}
 
 		this._experience.app.scene.add(this.group);
+
+		this.manager?.construct();
 		this.emit(CONSTRUCTED, this);
 	}