From 46e35ccf77fee030f16c4d2971c72a01968ee497 Mon Sep 17 00:00:00 2001 From: MNAth_ Date: Tue, 26 Dec 2023 19:17:56 +0300 Subject: [PATCH] refactor: correct commons and other minor imports --- src/{experiences => }/common/Event.model.ts | 0 src/{experiences => }/common/error.model.ts | 0 src/common/page.model.ts | 5 + .../blueprints/ExperienceBased.blueprint.ts | 2 +- src/experiences/blueprints/Scene.blueprint.ts | 18 ++-- src/experiences/pages/Home/Camera.ts | 13 +-- src/experiences/pages/Home/Composer.ts | 4 +- src/experiences/pages/Home/Debug.ts | 12 ++- src/experiences/pages/Home/Loader.ts | 6 +- src/experiences/pages/Home/Navigation.ts | 11 +-- src/experiences/pages/Home/Renderer.ts | 4 +- src/experiences/pages/Home/UI.ts | 5 +- src/experiences/pages/Home/World/Scene_1.ts | 6 +- src/experiences/pages/Home/World/index.ts | 91 ++++++++++--------- .../pages/Home/World/world.manager.ts | 8 +- src/experiences/pages/Home/index.ts | 10 +- src/pages/index.vue | 30 +++--- src/pages/index/contact.vue | 4 +- src/pages/index/index.vue | 4 +- src/pages/index/skills.vue | 5 +- 20 files changed, 124 insertions(+), 114 deletions(-) rename src/{experiences => }/common/Event.model.ts (100%) rename src/{experiences => }/common/error.model.ts (100%) create mode 100644 src/common/page.model.ts diff --git a/src/experiences/common/Event.model.ts b/src/common/Event.model.ts similarity index 100% rename from src/experiences/common/Event.model.ts rename to src/common/Event.model.ts diff --git a/src/experiences/common/error.model.ts b/src/common/error.model.ts similarity index 100% rename from src/experiences/common/error.model.ts rename to src/common/error.model.ts diff --git a/src/common/page.model.ts b/src/common/page.model.ts new file mode 100644 index 0000000..757b753 --- /dev/null +++ b/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"; diff --git a/src/experiences/blueprints/ExperienceBased.blueprint.ts b/src/experiences/blueprints/ExperienceBased.blueprint.ts index 649a9a3..a3c4a87 100644 --- a/src/experiences/blueprints/ExperienceBased.blueprint.ts +++ b/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 diff --git a/src/experiences/blueprints/Scene.blueprint.ts b/src/experiences/blueprints/Scene.blueprint.ts index e47bca4..11128f4 100644 --- a/src/experiences/blueprints/Scene.blueprint.ts +++ b/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) => unknown; } -export abstract class SceneBlueprint - extends EventEmitter - implements ExperienceBase -{ +export abstract class SceneBlueprint extends ExperienceBasedBlueprint { /** * Called each time the model scene is traversed. * diff --git a/src/experiences/pages/Home/Camera.ts b/src/experiences/pages/Home/Camera.ts index e8d4262..5a49a85 100644 --- a/src/experiences/pages/Home/Camera.ts +++ b/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"; diff --git a/src/experiences/pages/Home/Composer.ts b/src/experiences/pages/Home/Composer.ts index bec2938..3f2834a 100644 --- a/src/experiences/pages/Home/Composer.ts +++ b/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(); diff --git a/src/experiences/pages/Home/Debug.ts b/src/experiences/pages/Home/Debug.ts index 15e4199..66c4b34 100644 --- a/src/experiences/pages/Home/Debug.ts +++ b/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; diff --git a/src/experiences/pages/Home/Loader.ts b/src/experiences/pages/Home/Loader.ts index fa473fc..2d59c20 100644 --- a/src/experiences/pages/Home/Loader.ts +++ b/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(); diff --git a/src/experiences/pages/Home/Navigation.ts b/src/experiences/pages/Home/Navigation.ts index a822dae..13b86c9 100644 --- a/src/experiences/pages/Home/Navigation.ts +++ b/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(); diff --git a/src/experiences/pages/Home/Renderer.ts b/src/experiences/pages/Home/Renderer.ts index 089490b..ce08fe2 100644 --- a/src/experiences/pages/Home/Renderer.ts +++ b/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; diff --git a/src/experiences/pages/Home/UI.ts b/src/experiences/pages/Home/UI.ts index 01b4b48..4376371 100644 --- a/src/experiences/pages/Home/UI.ts +++ b/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"; /** diff --git a/src/experiences/pages/Home/World/Scene_1.ts b/src/experiences/pages/Home/World/Scene_1.ts index 119668c..ef1ae27 100644 --- a/src/experiences/pages/Home/World/Scene_1.ts +++ b/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"; diff --git a/src/experiences/pages/Home/World/index.ts b/src/experiences/pages/Home/World/index.ts index c36e6ea..196c152 100644 --- a/src/experiences/pages/Home/World/index.ts +++ b/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); } diff --git a/src/experiences/pages/Home/World/world.manager.ts b/src/experiences/pages/Home/World/world.manager.ts index fb9cb1c..160e5a3 100644 --- a/src/experiences/pages/Home/World/world.manager.ts +++ b/src/experiences/pages/Home/World/world.manager.ts @@ -3,13 +3,13 @@ import { ShaderPass } from "three/examples/jsm/postprocessing/ShaderPass"; import GSAP, { Power0 } from "gsap"; // EXPERIENCES -import Experience from ".."; +import { HomeExperience } from ".."; // BLUEPRINTS import { ExperienceBasedBlueprint } from "@/experiences/blueprints/ExperienceBased.blueprint"; // EVENTS -import { CHANGED, CONSTRUCTED } from "@/experiences/common/Event.model"; +import { CHANGED, CONSTRUCTED } from "~/common/event.model"; // UTILS import { lerpPosition } from "~/utils/three-utils"; @@ -19,7 +19,7 @@ import camTransitionFrag from "./shaders/cameraTransition/fragment.glsl"; import camTransitionVert from "./shaders/cameraTransition/vertex.glsl"; export default class WorldManager extends ExperienceBasedBlueprint { - protected readonly _experience = new Experience(); + protected readonly _experience = new HomeExperience(); protected readonly _appCamera = this._experience.app.camera; protected readonly _appResources = this._experience.app.resources; protected readonly _camera = this._experience.camera; @@ -27,8 +27,8 @@ export default class WorldManager extends ExperienceBasedBlueprint { protected readonly _composer = this._experience.composer; protected readonly _renderer = this._experience.renderer; protected readonly _timeline = GSAP.timeline(); - public cameraTransitionShaderPass?: ShaderPass; + public cameraTransitionShaderPass?: ShaderPass; // TODO: Reorder properties public rayCaster = new Raycaster(); public normalizedCursorPosition = { x: 0, y: 0 }; diff --git a/src/experiences/pages/Home/index.ts b/src/experiences/pages/Home/index.ts index bb0a9b6..ebb955d 100644 --- a/src/experiences/pages/Home/index.ts +++ b/src/experiences/pages/Home/index.ts @@ -12,11 +12,13 @@ import Debug from "./Debug"; import { ExperienceBlueprint, type ExperienceProps, -} from "@/experiences/blueprints/Experience.blueprint"; +} from "~/experiences/blueprints/Experience.blueprint"; // MODELS -import { LOADED } from "@/experiences/common/Event.model"; -import { ErrorFactory } from "@/experiences/errors/Error.factory"; +import { LOADED } from "~/common/event.model"; + +// ERRORS +import { ErrorFactory } from "~/experiences/errors/Error.factory"; export class HomeExperience extends ExperienceBlueprint { ui?: UI; @@ -108,5 +110,3 @@ export class HomeExperience extends ExperienceBlueprint { } } } - -export default HomeExperience; diff --git a/src/pages/index.vue b/src/pages/index.vue index 1086195..333a810 100644 --- a/src/pages/index.vue +++ b/src/pages/index.vue @@ -1,12 +1,24 @@ + + - - diff --git a/src/pages/index/contact.vue b/src/pages/index/contact.vue index 1dd8c82..fa2044b 100644 --- a/src/pages/index/contact.vue +++ b/src/pages/index/contact.vue @@ -5,7 +5,9 @@ diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue index c241c7d..bf74ce9 100644 --- a/src/pages/index/index.vue +++ b/src/pages/index/index.vue @@ -5,7 +5,9 @@ diff --git a/src/pages/index/skills.vue b/src/pages/index/skills.vue index 5443d60..0eb8bca 100644 --- a/src/pages/index/skills.vue +++ b/src/pages/index/skills.vue @@ -5,8 +5,9 @@ -