refactor: improve interactions

nuxt.config.ts

@@ -37,7 +37,13 @@ export default defineNuxtConfig({
 	srcDir: "./src",
 	runtimeConfig: {
 		public: {
-			env: process.env.MODE,
+			MODE: process.env.MODE,
+			GITHUB_LINK: process.env.GITHUB_LINK,
+			LINKEDIN_LINK: process.env.LINKEDIN_LINK,
+			DISCORD_LINK: process.env.DISCORD_LINK,
+			STACKOVERFLOW_LINK: process.env.STACKOVERFLOW_LINK,
+			TWITTER_LINK: process.env.TWITTER_LINK,
+			TELEGRAM_LINK: process.env.TELEGRAM_LINK,
 		},
 	},
 	vite: {

src/blueprints/experiences/scene-component.blueprint.ts

@@ -35,6 +35,7 @@ import type { NavigationView } from "~/common/experiences/navigation.model";
 
 // CONFIG
 import { Config } from "~/config";
+import type { SelectableObject } from "~/common/experiences/interaction.model";
 
 // TODO: Link with the names of assets in the `app.loader` assets names
 export interface SceneBlueprintProps {
@@ -65,10 +66,11 @@ export abstract class SceneComponentBlueprint extends ExperienceBasedBlueprint {
 		spherical: Exclude<NavigationView["spherical"], undefined>["limits"];
 		target: Exclude<NavigationView["target"], undefined>["limits"];
 	} = undefined;
+
 	public cameraPath = new CatmullRomCurve3();
 	public center = new Vector3();
-
 	public timeline?: gsap.core.Timeline;
+	public selectableObjects: SelectableObject[] = [];
 
 	constructor(_: SceneBlueprintProps) {
 		super();
@@ -167,5 +169,7 @@ export abstract class SceneComponentBlueprint extends ExperienceBasedBlueprint {
 		return this.timeline;
 	}
 
+	public initSelectableObjects(): void {}
+
 	public update(): void {}
 }

src/common/experiences/interaction.model.ts

@@ -3,6 +3,7 @@ import type { Object3D, Object3DEventMap, Vector3 } from "three";
 export interface SelectableObject {
 	object: Object3D<Object3DEventMap>;
 	link?: string;
+	externalLink?: string;
 	focusPoint?: Vector3;
 	focusTarget?: Vector3;
 	focusFov?: number;

src/common/experiences/navigation.model.ts

@@ -54,6 +54,7 @@ export interface NavigationView {
 	onTouchMove?: (event: TouchEvent) => unknown;
 	onContextMenu?: (event: MouseEvent) => unknown;
 	onWheel?: (event: Event) => unknown;
+	onLeave?: (event: Event) => unknown;
 }
 
 export interface ViewLimits {

src/config/common.config.ts

@@ -5,23 +5,68 @@ export abstract class CommonConfig {
 		"M0,0 C0.001,0.001 0.002,0.003 0.003,0.004 0.142,0.482 0.284,0.75 0.338,0.836 0.388,0.924 0.504,1 1,1";
 	static readonly DEBUG = (() => {
 		try {
-			return useRuntimeConfig().public.env === "development";
-		} catch (_) {
+			return useRuntimeConfig().public.MODE === "development";
+		} catch {
 			return false;
 		}
 	})();
 	static readonly FIXED_WINDOW_HEIGHT = (() => {
 		try {
 			return window.outerHeight;
-		} catch (_) {
+		} catch {
 			return 0;
 		}
 	})();
 	static readonly FIXED_WINDOW_WIDTH = (() => {
 		try {
 			return window.outerWidth;
-		} catch (_) {
+		} catch {
 			return 0;
 		}
 	})();
+
+	static readonly GITHUB_LINK: string = (() => {
+		try {
+			return useRuntimeConfig().public.GITHUB_LINK;
+		} catch {
+			return "https://google.com";
+		}
+	})();
+	static readonly LINKEDIN_LINK: string = (() => {
+		try {
+			return useRuntimeConfig().public.LINKEDIN_LINK;
+		} catch {
+			return "https://google.com";
+		}
+	})();
+	static readonly DISCORD_LINK: string = (() => {
+		try {
+			return useRuntimeConfig().public.DISCORD_LINK;
+		} catch {
+			return "https://google.com";
+		}
+	})();
+	static readonly STACKOVERFLOW_LINK: string = (() => {
+		try {
+			return useRuntimeConfig().public.STACKOVERFLOW_LINK;
+		} catch {
+			return "https://google.com";
+		}
+	})();
+
+	static readonly TWITTER_LINK: string = (() => {
+		try {
+			return useRuntimeConfig().public.TWITTER_LINK;
+		} catch {
+			return "https://google.com";
+		}
+	})();
+
+	static readonly TELEGRAM_LINK: string = (() => {
+		try {
+			return useRuntimeConfig().public.TELEGRAM_LINK;
+		} catch {
+			return "https://google.com";
+		}
+	})();
 }

src/experiences/home/interactions.ts

@@ -4,6 +4,7 @@ import {
 	Vector2,
 	type Object3DEventMap,
 	Vector3,
+	Color,
 } from "three";
 import { OutlinePass } from "three/examples/jsm/postprocessing/OutlinePass";
 import { gsap } from "gsap";
@@ -23,11 +24,13 @@ export class Interactions extends ExperienceBasedBlueprint {
 	protected _experience = new HomeExperience();
 
 	private readonly mouseCoordinate = new Vector2();
-	private readonly outlineDefault = {
-		strength: 12,
+	private readonly _outlineDefault = {
+		strength: 2,
 		glow: 1,
-		thickness: 2.5,
+		thickness: 2,
 		pulse: 4.5,
+		visibleColor: "#fff",
+		hiddenColor: "#fff",
 	};
 
 	private _appScene = this._experience.app.scene;
@@ -92,9 +95,9 @@ export class Interactions extends ExperienceBasedBlueprint {
 		selectables: SelectableObject[],
 		intersectable: Object3D<Object3DEventMap> = this._appScene
 	) {
-		if (!this._camera?.instance || this.outlinePass || !selectables.length)
+		if (!this._camera?.instance || this.outlinePass)
 			throw new Error("Wrong params");
-
+		if (!selectables.length) return;
 		if (this.timeline.isActive()) this.timeline.progress(1);
 
 		this.enabled = true;
@@ -118,6 +121,12 @@ export class Interactions extends ExperienceBasedBlueprint {
 			this._camera.instance,
 			selectableObjects
 		);
+		this.outlinePass.visibleEdgeColor = new Color(
+			this._outlineDefault.visibleColor
+		);
+		this.outlinePass.hiddenEdgeColor = new Color(
+			this._outlineDefault.hiddenColor
+		);
 
 		this.timeline
 			.fromTo(
@@ -126,7 +135,7 @@ export class Interactions extends ExperienceBasedBlueprint {
 					edgeStrength: 0,
 				},
 				{
-					edgeStrength: this.outlineDefault.strength + 4,
+					edgeStrength: this._outlineDefault.strength + 2,
 					repeat: 1,
 					repeatDelay: 1,
 					yoyo: true,
@@ -136,10 +145,10 @@ export class Interactions extends ExperienceBasedBlueprint {
 				if (!this.outlinePass) return;
 
 				this.outlinePass.selectedObjects = [];
-				this.outlinePass.edgeStrength = this.outlineDefault.strength;
-				this.outlinePass.edgeGlow = this.outlineDefault.glow;
-				this.outlinePass.edgeThickness = this.outlineDefault.thickness;
-				this.outlinePass.pulsePeriod = this.outlineDefault.pulse;
+				this.outlinePass.edgeStrength = this._outlineDefault.strength;
+				this.outlinePass.edgeGlow = this._outlineDefault.glow;
+				this.outlinePass.edgeThickness = this._outlineDefault.thickness;
+				this.outlinePass.pulsePeriod = this._outlineDefault.pulse;
 			});
 
 		this._composer?.addPass(`${Interactions.name}_pass`, this.outlinePass);
@@ -166,7 +175,7 @@ export class Interactions extends ExperienceBasedBlueprint {
 
 		if (this.outlinePass) {
 			this.outlinePass.selectedObjects = [];
-			this.outlinePass.edgeStrength = this.outlineDefault.strength;
+			this.outlinePass.edgeStrength = this._outlineDefault.strength;
 		}
 
 		if (this._ui?.targetElement)
@@ -189,17 +198,18 @@ export class Interactions extends ExperienceBasedBlueprint {
 			!e.isPrimary ||
 			!this.controls ||
 			!this.outlinePass?.selectedObjects.length ||
-			!this._camera?.instance
+			!this._camera?.instance ||
+			!this._selectedObject?.uuid
 		)
 			return;
 
-		const currentObject =
-			this._selectableObjects?.[this._selectedObject?.uuid ?? ""];
+		const router = useRouter();
+		const currentObject = this._selectableObjects?.[this._selectedObject.uuid];
 
 		if (
 			currentObject?.focusPoint &&
 			currentObject.focusTarget &&
-			!currentObject.link
+			!(currentObject.link || currentObject?.externalLink)
 		) {
 			const duration = Config.GSAP_ANIMATION_DURATION - 0.5;
 			this._lastCameraPosition = this._camera.instance.position.clone();
@@ -224,7 +234,10 @@ export class Interactions extends ExperienceBasedBlueprint {
 				});
 		}
 
-		if (currentObject?.link) return window.open(currentObject.link, "_blank");
+		if (currentObject?.link) return router?.push(currentObject.link);
+
+		if (currentObject?.externalLink)
+			return window.open(currentObject.externalLink, "_blank");
 	};
 
 	public construct() {

src/experiences/home/navigation.ts

@@ -173,7 +173,8 @@ export class Navigation extends ExperienceBasedBlueprint {
 					!this._view.drag ||
 					!this._view.down ||
 					!this._view.onMouseUp ||
-					!this._view.onMouseMove
+					!this._view.onMouseMove ||
+					this._experience.cameraAnimation?.enabled
 				)
 					return;
 
@@ -191,7 +192,7 @@ export class Navigation extends ExperienceBasedBlueprint {
 
 				this._view?.down(_event.clientX, _event.clientY);
 
-				this._ui?.targetElementParent?.addEventListener<"mouseup">(
+				this._ui?.targetElementParent?.addEventListener(
 					"mouseup",
 					this._view.onMouseUp
 				);
@@ -200,12 +201,14 @@ export class Navigation extends ExperienceBasedBlueprint {
 					this._view.onMouseMove
 				);
 			};
+
 			this._view.onMouseMove = (_event) => {
 				_event.preventDefault();
 				if (!this._view.move) return;
 
 				this._view.move(_event.clientX, _event.clientY);
 			};
+
 			this._view.onMouseUp = (_event) => {
 				_event.preventDefault();
 
@@ -223,13 +226,15 @@ export class Navigation extends ExperienceBasedBlueprint {
 					this._view.onMouseMove
 				);
 			};
+
 			this._view.onTouchStart = (_event) => {
 				_event.preventDefault();
 
 				if (
 					!this._view.down ||
 					!this._view.onTouchEnd ||
-					!this._view.onTouchMove
+					!this._view.onTouchMove ||
+					this._experience.cameraAnimation?.enabled
 				)
 					return;
 
@@ -245,6 +250,7 @@ export class Navigation extends ExperienceBasedBlueprint {
 					this._view.onTouchMove
 				);
 			};
+
 			this._view.onTouchMove = (_event) => {
 				_event.preventDefault();
 
@@ -269,9 +275,11 @@ export class Navigation extends ExperienceBasedBlueprint {
 					this._view.onTouchMove
 				);
 			};
+
 			this._view.onContextMenu = (_event) => {
 				_event.preventDefault();
 			};
+
 			this._view.onWheel = (_event) => {
 				_event.preventDefault();
 
@@ -287,6 +295,14 @@ export class Navigation extends ExperienceBasedBlueprint {
 				this._view.zooming(normalized.pixelY);
 			};
 
+			this._view.onLeave = (_event) => {
+				if (this._view.onMouseMove)
+					this._ui?.targetElement?.removeEventListener(
+						"mousemove",
+						this._view.onMouseMove
+					);
+			};
+
 			this._ui?.targetElementParent?.addEventListener(
 				"mousedown",
 				this._view.onMouseDown
@@ -302,15 +318,21 @@ export class Navigation extends ExperienceBasedBlueprint {
 			this._ui?.targetElementParent?.addEventListener(
 				"mousewheel",
 				this._view.onWheel,
-				{
-					passive: false,
-				}
+				{ passive: false }
 			);
 			this._ui?.targetElementParent?.addEventListener(
 				"wheel",
 				this._view.onWheel,
 				{ passive: false }
 			);
+			this._ui?.targetElementParent?.addEventListener(
+				"mouseleave",
+				this._view.onLeave
+			);
+			this._ui?.targetElementParent?.addEventListener(
+				"mouseenter",
+				this._view.onLeave
+			);
 		})();
 
 		this._appSizes.on("resize", () => this._setConfig());
@@ -362,6 +384,16 @@ export class Navigation extends ExperienceBasedBlueprint {
 				"wheel",
 				this._view.onWheel
 			);
+		this._view.onLeave &&
+			this._ui?.targetElementParent?.removeEventListener(
+				"mouseleave",
+				this._view.onLeave
+			);
+		this._view.onLeave &&
+			this._ui?.targetElementParent?.removeEventListener(
+				"mouseenter",
+				this._view.onLeave
+			);
 
 		this._appSizes.off("resize", () => this._setConfig());
 	}

src/experiences/home/router.ts

@@ -10,10 +10,11 @@ import { ExperienceBasedBlueprint } from "~/blueprints/experiences/experience-ba
 
 export class Router extends ExperienceBasedBlueprint {
 	protected _experience = new HomeExperience();
-	protected _router = useRouter();
-	protected _route = useRoute();
-	protected _availableRoutes: { [routeName: string]: RouteRecordRaw } = {};
-	protected _currentRouteName?: string;
+
+	private _router = useRouter();
+	private _route = useRoute();
+	private _availableRoutes: { [routeName: string]: RouteRecordRaw } = {};
+	private _currentRouteName?: string;
 
 	constructor() {
 		super();