feat: use markers from scene components

src/common/blueprints/experience-based.blueprint.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from "events";
 
-// MODELS
+// BLUEPRINTS
 import type { ExperienceBlueprint } from "./experience.blueprint";
 
 // MODELS

src/components/pages/home/MarkersToggleButton.vue

@@ -2,28 +2,21 @@
 import { HomeExperience } from "~/experiences/home";
 
 const experience = new HomeExperience();
-const visible = ref(false);
-
+const isMarkersDisplayed = useState<boolean>("isMarkersDisplayed");
 const onPress = () => {
 	if (!experience?.ui) return;
 
-	if (experience.ui.isMarkersDisplayed) experience.ui.removeMarkers();
+	if (isMarkersDisplayed.value) experience.ui.removeMarkers();
 	else experience.ui.displayMarks();
-
-	visible.value = experience.ui.isMarkersDisplayed;
 };
-
-onMounted(() => {
-	if (!process.client) return;
-
-	if (!experience) return;
-	visible.value = !!experience.ui?.isMarkersDisplayed;
-});
 </script>
 
 <template>
-	<button @click="onPress" :title="`${visible ? 'Disable' : 'Enable'} Markers`">
-		<svg v-if="visible" fill="none" viewBox="0 0 32 32">
+	<button
+		@click="onPress"
+		:title="`${isMarkersDisplayed ? 'Disable' : 'Enable'} Markers`"
+	>
+		<svg v-if="isMarkersDisplayed" fill="none" viewBox="0 0 32 32">
 			<path
 				d="M18.8242 8.42676V3.97071C18.8242 3.18283 18.5112 2.42721 17.9541 1.8701C17.397 1.31298 16.6414 1 15.8535 1H3.97071C3.18283 1 2.42721 1.31298 1.8701 1.8701C1.31298 2.42721 1 3.18283 1 3.97071V12.8828C1 13.6707 1.31298 14.4263 1.8701 14.9834C2.42721 15.5405 3.18283 15.8535 3.97071 15.8535H5.35208C5.84104 15.8535 6.32245 15.9741 6.75361 16.2047C7.18477 16.4353 7.55234 16.7688 7.82371 17.1755L8.42676 18.0816M16.0001 20.3264C16.0001 20.3264 21.0001 19.3264 22.0001 20.8264C23.0001 22.3264 28.0001 20.3264 28.0001 20.3264M16.0001 17.3264C16.0001 17.3264 21.0001 16.3264 22.0001 17.8264C23.0001 19.3264 28.0001 17.3264 28.0001 17.3264M16.0001 23.3264C16.0001 23.3264 21.0001 22.3264 22.0001 23.8264C23.0001 25.3264 28.0001 23.3264 28.0001 23.3264M4.00012 7.32641C4.00012 7.32641 9.00013 6.32641 10.0001 7.82641C11.0001 9.32641 16.0001 7.32641 16.0001 7.32641M4.00012 4.32641C4.00012 4.32641 9.00013 3.32641 10.0001 4.82641C11.0001 6.32641 16.0001 4.32641 16.0001 4.32641M4.00012 10.3264C4.00012 10.3264 9.00013 9.32641 10.0001 10.8264C11.0001 12.3264 16.0001 10.3264 16.0001 10.3264M27.7363 12.8828H15.8535C15.0656 12.8828 14.31 13.1958 13.7529 13.7529C13.1958 14.31 12.8828 15.0656 12.8828 15.8535V24.7656C12.8828 25.5535 13.1958 26.3091 13.7529 26.8662C14.31 27.4234 15.0656 27.7363 15.8535 27.7363H17.2349C17.7239 27.7363 18.2053 27.8569 18.6364 28.0875C19.0676 28.3181 19.4352 28.6516 19.7065 29.0583L20.5591 30.3387C20.6948 30.5421 20.8785 30.7089 21.0941 30.8243C21.3097 30.9396 21.5504 31 21.7949 31C22.0394 31 22.2802 30.9396 22.4958 30.8243C22.7113 30.7089 22.8951 30.5421 23.0308 30.3387L23.8833 29.0598C24.1545 28.6528 24.522 28.319 24.9532 28.0882C25.3844 27.8573 25.8659 27.7364 26.355 27.7363H27.7363C28.5242 27.7363 29.2798 27.4234 29.837 26.8662C30.3941 26.3091 30.7071 25.5535 30.7071 24.7656V15.8535C30.7071 15.0656 30.3941 14.31 29.837 13.7529C29.2798 13.1958 28.5242 12.8828 27.7363 12.8828Z"
 				stroke="#F4F7F5"
@@ -33,7 +26,7 @@ onMounted(() => {
 			/>
 		</svg>
 
-		<svg v-if="!visible" viewBox="0 0 32 32" fill="none">
+		<svg v-if="!isMarkersDisplayed" viewBox="0 0 32 32" fill="none">
 			<path
 				fill-rule="evenodd"
 				clip-rule="evenodd"

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

@@ -12,7 +12,7 @@ import {
 } from "three";
 import type { GLTF } from "three/examples/jsm/loaders/GLTFLoader";
 
-// MODELS
+// BLUEPRINTS
 import { ExperienceBasedBlueprint } from "~/common/blueprints/experience-based.blueprint";
 
 // EXPERIENCES
@@ -40,6 +40,11 @@ export interface SceneBlueprintProps {
 	modelName: string;
 	childrenMaterials: ModelChildrenMaterials;
 	onTraverseModelScene?: (child: Object3D<Object3DEventMap>) => unknown;
+	markers?: {
+		position: Vector3;
+		title: string;
+		content: string;
+	}[];
 }
 
 export abstract class SceneComponentBlueprint extends ExperienceBasedBlueprint {
@@ -64,6 +69,7 @@ export abstract class SceneComponentBlueprint extends ExperienceBasedBlueprint {
 		spherical: Exclude<NavigationView["spherical"], undefined>["limits"];
 		target: Exclude<NavigationView["target"], undefined>["limits"];
 	} = undefined;
+	public readonly markers: Exclude<SceneBlueprintProps["markers"], undefined>;
 
 	public cameraPath = new CatmullRomCurve3();
 	public center = new Vector3();
@@ -83,6 +89,8 @@ export abstract class SceneComponentBlueprint extends ExperienceBasedBlueprint {
 		});
 
 		this._onTraverseModelScene = _.onTraverseModelScene;
+
+		this.markers = _.markers ?? [];
 	}
 
 	public get modelScene() {

src/experiences/home/ui.ts

@@ -22,6 +22,8 @@ export class UI extends ExperienceBasedBlueprint {
 		element: HTMLElement;
 		position: Vector3;
 	}[] = [];
+	private _onRouteChange?: () => unknown;
+
 	public _markersContainer?: HTMLDivElement;
 	public _markers: {
 		position: Vector3;
@@ -119,10 +121,16 @@ export class UI extends ExperienceBasedBlueprint {
 				this.targetElement
 			);
 		}
+		this._onRouteChange = () => {
+			this.removeMarkers();
+		};
+		this._experience.router?.on(events.CHANGED, this._onRouteChange);
 		this.emit(events.CONSTRUCTED);
 	}
 
 	public destruct() {
+		this._onRouteChange &&
+			this._experience.router?.off(events.CHANGED, this._onRouteChange);
 		this.emit(events.DESTRUCTED);
 		this.removeAllListeners();
 	}

src/experiences/home/world/manager.ts

@@ -175,7 +175,7 @@ export class WorldManager extends ExperienceBasedBlueprint {
 		this._cameraAnimation.progressTarget = 0;
 		this._cameraAnimation.enable(true);
 
-		if (this._experience.ui) this._experience.ui.markers = [];
+		if (this._experience.ui) this._experience.ui.markers = currentScene.markers;
 
 		if (isSwitchingMain || isSwitchingProjected)
 			this._navigation.view.limits = false;
@@ -225,8 +225,7 @@ export class WorldManager extends ExperienceBasedBlueprint {
 						});
 				}, "<87%");
 
-		if (!isSwitchingMain && !isSwitchingProjected)
-			updateCameraToCurrentScene();
+		if (!isSwitchingMain && !isSwitchingProjected) updateCameraToCurrentScene();
 
 		if (this._prevProjectedSceneKey === this._router?.currentRouteKey)
 			this._prevProjectedSceneKey = undefined;

src/experiences/home/world/scene-1.component.ts

@@ -125,6 +125,7 @@ export class Scene1Component extends SceneComponentBlueprint {
 				this._setPhoneScreen(child);
 				this._setTreeOutSide(child);
 			},
+			markers: [{ title: "One", content: "two", position: new Vector3() }],
 		});
 	}
 

src/pages/index.vue

@@ -12,6 +12,7 @@ const availableRoutes = ref<{ name: string; path: string; key: string }[]>([]);
 const isExperienceReady = useState<boolean>("isExperienceReady", () => false);
 const isFreeCamera = useState<boolean>("isFreeCamera", () => false);
 const isFocusMode = useState<boolean>("isFocusMode", () => false);
+const isMarkersDisplayed = useState<boolean>("isMarkersDisplayed", () => false);
 
 // EVENTS
 const onUiReady = () => {
@@ -25,6 +26,8 @@ const onCameraAnimationChange = () => {
 };
 const onInteractionFocusStarted = () => (isFocusMode.value = true);
 const onInteractionFocusEnded = () => (isFocusMode.value = false);
+const onMarkersDisplayed = () => (isMarkersDisplayed.value = true);
+const onMarkersRemoved = () => (isMarkersDisplayed.value = false);
 
 const init = () => {
 	if (!process.client || experience.value) return;
@@ -49,6 +52,8 @@ const init = () => {
 		});
 
 	_exp.ui?.on(events.READY, onUiReady);
+	_exp.ui?.on(events.MARKERS_DISPLAYED, onMarkersDisplayed);
+	_exp.ui?.on(events.MARKERS_REMOVED, onMarkersRemoved);
 	_exp.cameraAnimation?.on(events.CHANGED, onCameraAnimationChange);
 	_exp.interactions?.on(
 		events.INTERACTION_FOCUS_STARTED,