refactor: correct commons and other minor imports

src/common/page.model.ts

@@ -0,0 +1,5 @@
+export const HOME_PAGE = "HOME_PAGE";
+export const SKILL_PAGE = "SKILL_PAGE";
+export const CONTACT_PAGE = "CONTACT_PAGE";
+export const BLOG_HOME_PAGE = "BLOG_HOME_PAGE";
+export const BLOG_POST = "BLOG_POST";

src/experiences/blueprints/ExperienceBased.blueprint.ts

@@ -4,7 +4,7 @@ import { EventEmitter } from "events";
 import type { ExperienceBlueprint } from "./Experience.blueprint";
 
 // INTERFACES
-import type { ExperienceBase } from "@/interfaces/experienceBase";
+import type { ExperienceBase } from "~/interfaces/experienceBase";
 
 /** Represent a class that depend on {@link ExperienceBlueprint}. */
 export abstract class ExperienceBasedBlueprint

src/experiences/blueprints/Scene.blueprint.ts

@@ -7,20 +7,21 @@ import {
 	Material,
 } from "three";
 import type { GLTF } from "three/examples/jsm/loaders/GLTFLoader";
-import EventEmitter from "events";
+
+// BLUEPRINTS
+import { ExperienceBasedBlueprint } from "./ExperienceBased.blueprint";
 
 // EXPERIENCES
-import HomeExperience from "@/experiences/pages/Home";
+import { HomeExperience } from "~/experiences/pages/Home";
 
-// EVENTS
-import { CONSTRUCTED, DESTRUCTED, LOADED } from "../common/Event.model";
+// MODELS
+import { CONSTRUCTED, DESTRUCTED, LOADED } from "~/common/event.model";
+import { WRONG_PARAM } from "~/common/error.model";
 
 // ERRORS
 import { ErrorFactory } from "../errors/Error.factory";
-import { WRONG_PARAM } from "../common/error.model";
 
 // INTERFACES
-import { type ExperienceBase } from "@interfaces/experienceBase";
 import type {
 	Materials,
 	ModelChildrenMaterials,
@@ -34,10 +35,7 @@ export interface SceneBlueprintProps {
 	onTraverseModelScene?: (child: Object3D<Object3DEventMap>) => unknown;
 }
 
-export abstract class SceneBlueprint
-	extends EventEmitter
-	implements ExperienceBase
-{
+export abstract class SceneBlueprint extends ExperienceBasedBlueprint {
 	/**
 	 * Called each time the model scene is traversed.
 	 *

src/experiences/pages/Home/Camera.ts

@@ -2,20 +2,15 @@ import { PerspectiveCamera, Vector3 } from "three";
 import gsap from "gsap";
 
 // EXPERIENCES
-import HomeExperience from ".";
+import { HomeExperience } from ".";
 import Debug from "./Debug";
 
 // BLUEPRINTS
-import { ExperienceBasedBlueprint } from "@/experiences/blueprints/ExperienceBased.blueprint";
-
-// EVENTS
-import { CONSTRUCTED, DESTRUCTED } from "@/experiences/common/Event.model";
+import { ExperienceBasedBlueprint } from "~/experiences/blueprints/ExperienceBased.blueprint";
 
 // MODELS
-import {
-	CAMERA_UNAVAILABLE,
-	WRONG_PARAM,
-} from "@/experiences/common/error.model";
+import { CONSTRUCTED, DESTRUCTED } from "~/common/event.model";
+import { CAMERA_UNAVAILABLE, WRONG_PARAM } from "~/common/error.model";
 
 // CONFIG
 import { Config } from "@/experiences/config/Config";

src/experiences/pages/Home/Composer.ts

@@ -6,12 +6,10 @@ import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass";
 import { OutputPass } from "three/examples/jsm/postprocessing/OutputPass.js";
 
 // EXPERIENCES
-import HomeExperience from ".";
+import { HomeExperience } from ".";
 
 // BLUEPRINTS
 import { ExperienceBasedBlueprint } from "~/experiences/blueprints/ExperienceBased.blueprint";
-import { ShaderPass } from "three/examples/jsm/postprocessing/ShaderPass";
-import { Vector3 } from "three";
 
 export class Composer extends ExperienceBasedBlueprint {
 	protected readonly _experience = new HomeExperience();

src/experiences/pages/Home/Debug.ts

@@ -12,15 +12,17 @@ import {
 import GUI from "three/examples/jsm/libs/lil-gui.module.min.js";
 
 // EXPERIENCE
-import Experience from ".";
+import { HomeExperience } from ".";
+import { Config } from "@/experiences/config/Config";
 
 // BLUEPRINTS
 import { ExperienceBasedBlueprint } from "@/experiences/blueprints/ExperienceBased.blueprint";
-import { DESTRUCTED } from "@/experiences/common/Event.model";
-import { Config } from "@/experiences/config/Config";
+
+// MODELS
+import { DESTRUCTED } from "~/common/event.model";
 
 export default class Debug extends ExperienceBasedBlueprint {
-	protected readonly _experience = new Experience();
+	protected readonly _experience = new HomeExperience();
 	protected readonly _appDebug = this._experience.app.debug;
 	protected readonly _appCamera = this._experience.app.camera;
 	protected readonly _camera = this._experience.camera;
@@ -43,7 +45,7 @@ export default class Debug extends ExperienceBasedBlueprint {
 
 		if (this._gui) this.destruct();
 
-		this._gui = this._experience.app.debug?.ui?.addFolder(Experience.name);
+		this._gui = this._experience.app.debug?.ui?.addFolder(HomeExperience.name);
 
 		if (!this._gui || !this._experience.world) return;
 

src/experiences/pages/Home/Loader.ts

@@ -1,7 +1,7 @@
 import { Texture, LinearSRGBColorSpace, CubeTexture } from "three";
 
 // EXPERIENCE
-import HomeExperience from ".";
+import { HomeExperience } from ".";
 
 // MODELS
 import {
@@ -10,10 +10,10 @@ import {
 	LOADED,
 	PROGRESSED,
 	STARTED,
-} from "@/experiences/common/Event.model";
+} from "~/common/event.model";
 
 // BLUEPRINTS
-import { ExperienceBasedBlueprint } from "@/experiences/blueprints/ExperienceBased.blueprint";
+import { ExperienceBasedBlueprint } from "~/experiences/blueprints/ExperienceBased.blueprint";
 
 export default class Loader extends ExperienceBasedBlueprint {
 	protected readonly _experience = new HomeExperience();

src/experiences/pages/Home/Navigation.ts

@@ -1,14 +1,13 @@
 import type { RouteRecordNormalized, RouteRecordRaw } from "#vue-router";
+// EXPERIENCES
+import { HomeExperience } from ".";
 
 // MODELS
-import { CHANGED } from "~/experiences/common/Event.model";
-
-// EXPERIENCES
-import HomeExperience from ".";
+import { CHANGED } from "~/common/event.model";
+import { WRONG_PARAM } from "~/common/error.model";
 
 // BLUEPRINTS
-import { ExperienceBasedBlueprint } from "@/experiences/blueprints/ExperienceBased.blueprint";
-import { WRONG_PARAM } from "~/experiences/common/error.model";
+import { ExperienceBasedBlueprint } from "~/experiences/blueprints/ExperienceBased.blueprint";
 
 export class Navigation extends ExperienceBasedBlueprint {
 	protected _experience = new HomeExperience();

src/experiences/pages/Home/Renderer.ts

@@ -11,10 +11,10 @@ import {
 } from "three";
 
 // EXPERIENCE
-import HomeExperience from ".";
+import { HomeExperience } from ".";
 
 // INTERFACES
-import { ExperienceBasedBlueprint } from "@/experiences/blueprints/ExperienceBased.blueprint";
+import { ExperienceBasedBlueprint } from "~/experiences/blueprints/ExperienceBased.blueprint";
 
 export interface PortalAssets {
 	mesh: THREE.Mesh;

src/experiences/pages/Home/UI.ts

@@ -1,13 +1,12 @@
 import GSAP from "gsap";
-import { EventEmitter } from "events";
 
 // EXPERIENCE
-import HomeExperience from ".";
+import { HomeExperience } from ".";
 
 // CONFIG
 import { Config } from "@/experiences/config/Config";
 
-// MODELS
+// BLUEPRINTS
 import { ExperienceBasedBlueprint } from "@/experiences/blueprints/ExperienceBased.blueprint";
 
 /**

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

@@ -18,7 +18,7 @@ import {
 import gsap from "gsap";
 
 // BLUEPRINTS
-import { SceneBlueprint } from "@/experiences/blueprints/Scene.blueprint";
+import { SceneBlueprint } from "~/experiences/blueprints/Scene.blueprint";
 
 // SHADERS
 import bakedTextureFragment from "./shaders/scene1/bakedTexture/fragment.glsl";
@@ -28,10 +28,10 @@ import coffeeSteamFragment from "./shaders/scene1/coffeeSteam/fragment.glsl";
 import coffeeSteamVertex from "./shaders/scene1/coffeeSteam/vertex.glsl";
 
 // CONFIGS
-import { Config } from "@/experiences/config/Config";
+import { Config } from "~/experiences/config/Config";
 
 // MODELS
-import { DESTRUCTED } from "~/experiences/common/Event.model";
+import { DESTRUCTED } from "~/common/event.model";
 
 // ERROR
 import { ErrorFactory } from "~/experiences/errors/Error.factory";

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

@@ -1,4 +1,5 @@
 import {
+	Box3,
 	Color,
 	Group,
 	Mesh,
@@ -9,7 +10,7 @@ import {
 } from "three";
 
 // EXPERIENCE
-import Experience from "..";
+import { HomeExperience } from "..";
 import WorldManager from "./world.manager";
 import { SceneContainer } from "./SceneContainer";
 import { Scene_1 } from "./Scene_1";
@@ -20,28 +21,29 @@ import { Scene_3 } from "./Scene_3";
 import { ExperienceBasedBlueprint } from "~/experiences/blueprints/ExperienceBased.blueprint";
 
 // MODELS
-import { CONSTRUCTED, DESTRUCTED } from "~/experiences/common/Event.model";
-
-// MODELS
-import { CAMERA_UNAVAILABLE } from "~/experiences/common/error.model";
+import { CONSTRUCTED, DESTRUCTED } from "~/common/event.model";
+import { CAMERA_UNAVAILABLE } from "~/common/error.model";
 
 // INTERFACES
 import type { Materials } from "~/interfaces/experienceWorld";
+import type { SceneBlueprint } from "~/experiences/blueprints/Scene.blueprint";
 
 export default class World extends ExperienceBasedBlueprint {
-	protected readonly _experience = new Experience();
-	protected readonly _appCamera = this._experience.app.camera;
-	protected readonly _renderer = this._experience.renderer;
-	protected readonly _loader = this._experience.loader;
+	protected readonly _experience = new HomeExperience();
 
-	public readonly commonMaterials: Materials = {};
+	private readonly _appCamera = this._experience.app.camera;
+	private readonly _loader = this._experience.loader;
 
+	private _commonMaterials: Materials = {};
+	private _projectedModelsPosition = new Vector3();
+	private _projectedScenes: SceneBlueprint[] = [];
+
+	public sceneContainer?: SceneContainer;
 	public scene1?: Scene_1;
 	public scene2?: Scene_2;
 	public scene3?: Scene_3;
-	public sceneContainer?: SceneContainer;
 	public manager?: WorldManager;
-	/** Represent the ThreeJs `Group` containing the experience. */
+	/** Represent the {@link Group `Group`} containing the experience. */
 	public group?: Group;
 
 	constructor() {
@@ -59,17 +61,29 @@ export default class World extends ExperienceBasedBlueprint {
 		if (!AVAILABLE_TEXTURES) return;
 
 		if (AVAILABLE_TEXTURES["scene_container_baked_texture"] instanceof Texture)
-			this.commonMaterials["scene_container"] = new MeshBasicMaterial({
+			this._commonMaterials["scene_container"] = new MeshBasicMaterial({
 				map: AVAILABLE_TEXTURES["scene_container_baked_texture"],
 			});
 
-		this.commonMaterials["glass"] = new MeshBasicMaterial({
+		this._commonMaterials["glass"] = new MeshBasicMaterial({
 			opacity: 0.5,
 			color: new Color(0x000000),
 			transparent: true,
 		});
 	}
 
+	public get commonMaterials() {
+		return this._commonMaterials;
+	}
+
+	public get projectedModelsPosition() {
+		return this._projectedModelsPosition;
+	}
+
+	public get projectedScenes() {
+		return this._projectedScenes;
+	}
+
 	public destruct() {
 		if (this.group) {
 			this.group.traverse((child) => {
@@ -115,45 +129,40 @@ export default class World extends ExperienceBasedBlueprint {
 		this.scene3?.construct();
 		this.manager?.construct();
 
-		if (
-			this.scene1?.modelScene &&
-			this.scene1.pcScreen &&
-			this.scene1.pcScreenWebglTexture
-		) {
-			this.group?.add(this.scene1.modelScene);
+		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;
+
+			this._projectedModelsPosition.set(WIDTH * 1.2, 0, 0);
+
+			const PROJECTED_SCENE_CONTAINER = this.sceneContainer.modelScene.clone();
+			PROJECTED_SCENE_CONTAINER.position.copy(this._projectedModelsPosition);
+
+			this.group?.add(
+				this.sceneContainer.modelScene,
+				PROJECTED_SCENE_CONTAINER
+			);
 		}
 
+		if (this.scene1?.modelScene) this.group?.add(this.scene1.modelScene);
+
 		if (this.scene2?.modelScene) {
-			this.scene2.modelScene.position.setX(40);
+			this.scene2.modelScene.position.copy(this.projectedModelsPosition);
 
+			this._projectedScenes.push(this.scene2);
 			this.group?.add(this.scene2.modelScene);
 		}
 
 		if (this.scene3?.modelScene) {
-			this.scene3.modelScene.position.setZ(40);
+			this.scene3.modelScene.position.copy(this.projectedModelsPosition);
 
+			this._projectedScenes.push(this.scene3);
 			this.group?.add(this.scene3.modelScene);
 		}
 
-		if (this.sceneContainer?.modelScene) {
-			const scene_2_container = this.sceneContainer.modelScene.clone();
-			const scene_3_container = this.sceneContainer.modelScene.clone();
-
-			scene_2_container.position.copy(
-				this.scene2?.modelScene?.position ?? new Vector3()
-			);
-
-			scene_3_container.position.copy(
-				this.scene3?.modelScene?.position ?? new Vector3()
-			);
-
-			this.group?.add(
-				this.sceneContainer.modelScene,
-				scene_2_container,
-				scene_3_container
-			);
-		}
-
 		this._experience.app.scene.add(this.group);
 		this.emit(CONSTRUCTED, this);
 	}