refactor: improve loading logic

package.json

@@ -47,7 +47,7 @@
 		"glsl-blend": "^1.0.3",
 		"gsap": "^3.11.4",
 		"normalize-wheel": "^1.0.1",
-		"quick-threejs": "^0.1.25",
+		"quick-threejs": "^0.1.27",
 		"three": "^0.159.0",
 		"threex.htmlmixer-continued": "^0.0.2"
 	},

src/blueprints/experiences/experience.blueprint.ts

@@ -28,7 +28,7 @@ export abstract class ExperienceBlueprint implements Experience {
 					withMiniCamera: _?.debug,
 					camera: "Perspective",
 				},
-				_?.domElementRef,
+				_?.domElementRef
 			);
 			this._onConstruct = _?.onConstruct;
 			this._onDestruct = _?.onDestruct;

src/components/HomeLandingLoader.vue → src/components/Home/HomeLoader.vue

@@ -1,29 +1,29 @@
 <script lang="ts" setup>
-import packageJson from "../../package.json";
+import packageJson from "~~/package.json";
 </script>
 
 <template>
 	<div
-		id="landing-view-wrapper"
+		id="home-loader-container"
 		class="fixed top-0 h-screen w-screen flex flex-col justify-center items-center text-light bg-dark px-[50px] py-[40px] overflow-hidden z-[1000]"
 	>
 		<div class="w-full">
 			<a href="/" class="text-lg uppercase">{{ packageJson.name }}</a>
 		</div>
 
-		<div class="flex-1 flex flex-col justify-center items-center w-full">
-			<div class="w-1/6 bg-black mb-3 progress-container">
+		<div class="flex flex-col items-center justify-center flex-1 w-full">
+			<div class="w-1/6 mb-3 bg-black progress-container">
 				<div
 					id="loaded-resources-progress-line"
-					class="h-full bg-light duration-700"
+					class="h-full duration-700 bg-light"
 					style="width: 0%"
 				/>
 			</div>
 
-			<p id="loaded-resources-progress" class="text-center text-sm">0%</p>
+			<p id="loaded-resources-progress" class="text-sm text-center">0%</p>
 		</div>
 
-		<div class="w-full flex justify-between items-center opacity-40 text-xs">
+		<div class="flex items-center justify-between w-full text-xs opacity-40">
 			<span
 				>v{{ packageJson.version }} | Made with ❤ by
 				<a

src/experiences/home/loader.ts

@@ -1,4 +1,9 @@
-import { Texture, LinearSRGBColorSpace, CubeTexture } from "three";
+import {
+	Texture,
+	LinearSRGBColorSpace,
+	CubeTexture,
+	VideoTexture,
+} from "three";
 
 // EXPERIENCE
 import { HomeExperience } from ".";
@@ -33,6 +38,9 @@ import scene_container_baked_texture from "~/assets/models/scene_container/baked
 import cloudAlphaMapTexture from "~/assets/textures/cloudAlphaMap.jpg?url";
 import rocksAlphaMapTexture from "~/assets/textures/rocksAlphaMap.jpg?url";
 import phoneScreenshotTexture from "~/assets/textures/phone_icons.png?url";
+import monitor_a_screen_record from "~/assets/videos/monitor_a_screen_record.webm?url";
+import monitor_b_screen_record from "~/assets/videos/monitor_b_screen_record.webm?url";
+import phone_screen_record from "~/assets/videos/phone_screen_record.webm?url";
 
 export class Loader extends ExperienceBasedBlueprint {
 	protected readonly _experience = new HomeExperience();
@@ -115,6 +123,23 @@ export class Loader extends ExperienceBasedBlueprint {
 				path: scene_container_baked_texture,
 			},
 
+			// VIDEO TEXTURES
+			{
+				name: "monitor_a_screen_record",
+				type: "video",
+				path: monitor_a_screen_record,
+			},
+			{
+				name: "monitor_b_screen_record",
+				type: "video",
+				path: monitor_b_screen_record,
+			},
+			{
+				name: "phone_screen_record",
+				type: "video",
+				path: phone_screen_record,
+			},
+
 			// OTHER TEXTURES
 			{
 				name: "cloudAlphaMap",
@@ -140,7 +165,7 @@ export class Loader extends ExperienceBasedBlueprint {
 		for (let i = 0; i < _KEYS.length; i++) {
 			const _ITEM = this._appResources.items[_KEYS[i]];
 			if (_ITEM instanceof Texture) {
-				_ITEM.flipY = false;
+				if (!(_ITEM instanceof VideoTexture)) _ITEM.flipY = false;
 				_ITEM.colorSpace = LinearSRGBColorSpace;
 			}
 		}
@@ -173,29 +198,28 @@ export class Loader extends ExperienceBasedBlueprint {
 	public construct() {
 		~(() => {
 			this._progress = 0;
-			this._appResources.loadingManager.onStart = () => {
+			this._appResources.on("start", () => {
 				this.emit(STARTED, this._progress);
-			};
+			});
 		})();
 
 		~(() => {
-			this._appResources.loadingManager.onProgress = (
-				itemUrl,
-				itemsLoaded,
-				itemsToLoad
-			) => {
-				this._progress = (itemsLoaded / itemsToLoad) * 100;
-				this.emit(PROGRESSED, this._progress, itemUrl);
-			};
+			this._appResources.on(
+				"progress",
+				(itemPath, itemsLoaded, itemsToLoad) => {
+					this._progress = (itemsLoaded / itemsToLoad) * 100;
+					this.emit(PROGRESSED, this._progress, itemPath);
+				}
+			);
 		})();
 
 		~(() => {
-			this._appResources.loadingManager.onLoad = () => {
+			this._appResources.on("load", () => {
 				this._correctTextures();
 				this._setAvailableTexture();
 
 				this.emit(LOADED, this._progress);
-			};
+			});
 		})();
 
 		this._appResources.startLoading();

src/experiences/home/ui.ts

@@ -1,4 +1,4 @@
-import GSAP from "gsap";
+import gsap from "gsap";
 
 // EXPERIENCE
 import { HomeExperience } from ".";
@@ -9,7 +9,7 @@ import { Config } from "~/config";
 // BLUEPRINTS
 import { ExperienceBasedBlueprint } from "~/blueprints/experiences/experience-based.blueprint";
 import { PerspectiveCamera, type Vector3 } from "three";
-import { errors } from "~/static";
+import { errors, events } from "~/static";
 
 /**
  * Class in charge of all the direct interactions with the DOM HTML elements.
@@ -22,12 +22,14 @@ export class UI extends ExperienceBasedBlueprint {
 	private _loadedResourcesProgressLineElements?: HTMLElement | null;
 	private _loadedResourcesProgressElements?: HTMLElement | null;
 	private _lastLoadedResourceElement?: HTMLElement | null;
+	private _loaderContainerElement?: HTMLElement | null;
 	private _activeMarkers: {
 		coordinates: Vector3;
 		element: HTMLElement;
 		position: Vector3;
 	}[] = [];
 
+	public readonly timeline = gsap.timeline();
 	public readonly targetElement = this._experience.app.canvas;
 	public readonly targetElementParent = this.targetElement?.parentElement;
 
@@ -42,24 +44,18 @@ export class UI extends ExperienceBasedBlueprint {
 	constructor() {
 		super();
 
-		const _LOADED_RESOURCES_PROGRESS_LINE_ELEMENT = document.getElementById(
+		this._loadedResourcesProgressLineElements = document.getElementById(
 			"loaded-resources-progress-line"
 		);
-		const _LOADED_RESOURCES_PROGRESS_ELEMENT = document.getElementById(
+		this._loadedResourcesProgressElements = document.getElementById(
 			"loaded-resources-progress"
 		);
-		const _LAST_LOADED_RESOURCE_ELEMENT = document.getElementById(
+		this._lastLoadedResourceElement = document.getElementById(
 			"last-loaded-resource"
 		);
-
-		if (_LOADED_RESOURCES_PROGRESS_LINE_ELEMENT)
-			this._loadedResourcesProgressLineElements =
-				_LOADED_RESOURCES_PROGRESS_LINE_ELEMENT;
-		if (_LOADED_RESOURCES_PROGRESS_ELEMENT)
-			this._loadedResourcesProgressElements =
-				_LOADED_RESOURCES_PROGRESS_ELEMENT;
-		if (_LAST_LOADED_RESOURCE_ELEMENT)
-			this._lastLoadedResourceElement = _LAST_LOADED_RESOURCE_ELEMENT;
+		this._loaderContainerElement = document.getElementById(
+			"home-loader-container"
+		);
 	}
 
 	public get isMarkersDisplayed() {
@@ -74,26 +70,29 @@ export class UI extends ExperienceBasedBlueprint {
 		);
 
 		// EVENTS
-		this._experience.loader?.on("start", () => {
+		this._experience.loader?.on(events.STARTED, () => {
 			this._lastLoadedResourceElement?.classList.remove("animate-pulse");
 			if (this._loadedResourcesProgressLineElements)
 				this._loadedResourcesProgressLineElements.style.width = "0%";
 			if (this._loadedResourcesProgressElements)
 				this._loadedResourcesProgressElements.innerHTML = "0%";
 		});
 
-		this._experience.loader?.on("progress", (progress: number, url: string) => {
-			if (this._loadedResourcesProgressLineElements)
-				this._loadedResourcesProgressLineElements.style.width = `${progress}%`;
-			if (this._loadedResourcesProgressElements)
-				this._loadedResourcesProgressElements.innerHTML = `${progress.toFixed(
-					0
-				)}%`;
-			if (this._lastLoadedResourceElement)
-				this._lastLoadedResourceElement.innerHTML = url.replace(/^.*\//, "");
-		});
+		this._experience.loader?.on(
+			events.PROGRESSED,
+			(progress: number, url: string) => {
+				if (this._loadedResourcesProgressLineElements)
+					this._loadedResourcesProgressLineElements.style.width = `${progress}%`;
+				if (this._loadedResourcesProgressElements)
+					this._loadedResourcesProgressElements.innerHTML = `${progress.toFixed(
+						0
+					)}%`;
+				if (this._lastLoadedResourceElement)
+					this._lastLoadedResourceElement.innerHTML = url.replace(/^.*\//, "");
+			}
+		);
 
-		this._experience.loader?.on("load", () => {
+		this._experience.loader?.on(events.LOADED, () => {
 			if (this._loadedResourcesProgressElements)
 				this._loadedResourcesProgressElements.innerHTML = "100%";
 			if (this._loadedResourcesProgressLineElements)
@@ -108,8 +107,6 @@ export class UI extends ExperienceBasedBlueprint {
 				this.emit("ready");
 			}, 1000);
 		});
-
-		this._experience.app.resources.startLoading();
 	}
 
 	destruct() {
@@ -119,19 +116,15 @@ export class UI extends ExperienceBasedBlueprint {
 	}
 
 	intro() {
-		const _TIMELINE = GSAP.timeline();
-		_TIMELINE.to("#landing-view-wrapper", {
+		if (!this._loaderContainerElement) return;
+		if (this.timeline.isActive()) this.timeline.progress(1);
+
+		this.timeline.to(this._loaderContainerElement, {
 			duration: Config.GSAP_ANIMATION_DURATION,
 			ease: Config.GSAP_ANIMATION_EASE,
 			opacity: 0,
-			delay: 2,
 			onComplete: () => {
-				const _LANDING_VIEW_WRAPPER = document.getElementById(
-					"landing-view-wrapper"
-				);
-
-				if (_LANDING_VIEW_WRAPPER?.style)
-					_LANDING_VIEW_WRAPPER.style.display = "none";
+				this._loaderContainerElement?.remove();
 			},
 		});
 	}

src/experiences/home/world/manager.ts

@@ -18,6 +18,7 @@ import { lerpPosition } from "~/utils/three-utils";
 import camTransitionFrag from "./shaders/glass-effect/fragment.glsl";
 import camTransitionVert from "./shaders/glass-effect/vertex.glsl";
 import { WRONG_PARAM } from "~/static/error.static";
+import { Config } from "~/config";
 
 export class WorldManager extends ExperienceBasedBlueprint {
 	protected readonly _experience = new HomeExperience();
@@ -173,7 +174,7 @@ export class WorldManager extends ExperienceBasedBlueprint {
 			current: 0,
 			target: 0,
 		};
-		this._cameraAnimation.enable(true)
+		this._cameraAnimation.enable(true);
 
 		if (IS_SWITCHING_MAIN || IS_SWITCHING_PROJECTED)
 			this._navigation.view.limits = false;
@@ -261,7 +262,8 @@ export class WorldManager extends ExperienceBasedBlueprint {
 		mainScene.intro();
 		await this._navigation?.updateCameraPosition(
 			mainScene.cameraPath?.getPoint(0),
-			mainScene.center
+			mainScene.center,
+			Config.GSAP_ANIMATION_DURATION + 1
 		);
 	}
 
@@ -317,6 +319,4 @@ export class WorldManager extends ExperienceBasedBlueprint {
 		if (this._onCameraAnimationEnd)
 			this._cameraAnimation?.off(events.ENDED, this._onCameraAnimationEnd);
 	}
-
-	public update() {}
 }