feat: manage intro & outro world logic

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

@@ -1,5 +1,14 @@
-import { Group, Mesh, Object3D, type Object3DEventMap, Material } from "three";
+import {
+	Group,
+	Mesh,
+	Object3D,
+	type Object3DEventMap,
+	Material,
+	CatmullRomCurve3,
+	Vector3,
+} from "three";
 import type { GLTF } from "three/examples/jsm/loaders/GLTFLoader";
+import type { gsap } from "gsap";
 
 // BLUEPRINTS
 import { ExperienceBasedBlueprint } from "./experience-based.blueprint";
@@ -45,10 +54,14 @@ export abstract class SceneComponentBlueprint extends ExperienceBasedBlueprint {
 	protected _modelScene?: Group;
 	protected _availableMaterials: Materials = {};
 
-	public abstract readonly navigationLimits?: {
+	public readonly navigationLimits?: {
 		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;
 
 	constructor(_: SceneBlueprintProps) {
 		super();
@@ -118,10 +131,7 @@ export abstract class SceneComponentBlueprint extends ExperienceBasedBlueprint {
 
 		if (typeof callback === "function") callback();
 
-		this._availableMaterials = {
-			...this._world?.commonMaterials,
-			...this._getAvailableMaterials(),
-		};
+		this._availableMaterials = this._getAvailableMaterials();
 		this._initModelMaterials();
 		this.emit(events.CONSTRUCTED);
 	}
@@ -132,9 +142,13 @@ export abstract class SceneComponentBlueprint extends ExperienceBasedBlueprint {
 		this.emit(events.DESTRUCTED);
 	}
 
-	public intro(): void {}
+	public intro(): gsap.core.Timeline | undefined {
+		return this.timeline;
+	}
 
-	public outro(): void {}
+	public outro(): gsap.core.Timeline | undefined {
+		return this.timeline;
+	}
 
 	public update(): void {}
 }

src/common/experiences/navigation.model.ts

@@ -1,10 +1,16 @@
 import type { Spherical, Vector3 } from "three";
 
 export interface NavigationView {
-	enabled?: boolean;
-	controls?: boolean;
-	center?: Vector3;
-	spherical?: {
+	/** Enable navigation update and controls interactions. */
+	enabled: boolean;
+	/** Enable controls interactions. */
+	controls: boolean;
+	/** Enable navigation limits. */
+	limits: boolean;
+	/** Define the center of the scene. used to correctly set the limits. */
+	center: Vector3;
+	/** Spherical space for navigation */
+	spherical: {
 		smoothed: Spherical;
 		smoothing: number;
 		limits: {
@@ -17,7 +23,8 @@ export interface NavigationView {
 		};
 		value: Spherical;
 	};
-	target?: {
+	/** Camera target */
+	target: {
 		value: Vector3;
 		smoothed: Vector3;
 		smoothing: number;
@@ -28,13 +35,13 @@ export interface NavigationView {
 			enabled: boolean;
 		};
 	};
-	drag?: {
+	drag: {
 		delta: { x: number; y: number };
 		previous: { x: number; y: number };
 		sensitivity: number;
 		alternative: boolean;
 	};
-	zoom?: { sensitivity: number; delta: number };
+	zoom: { sensitivity: number; delta: number };
 	down?: (x: number, y: number) => unknown;
 	move?: (x: number, y: number) => unknown;
 	up?: () => unknown;

src/config/common.config.ts

@@ -5,7 +5,7 @@ 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";
+			return useRuntimeConfig().public.env === "development";
 		} catch (_) {
 			return false;
 		}

src/experiences/home/camera-aninmation.ts

@@ -15,19 +15,17 @@ export const defaultCameraPath = new CatmullRomCurve3([
 	new Vector3(12, 3.7, 12),
 	new Vector3(0, 5.5, 21),
 ]);
-export const defaultCameraTarget = new Vector3(0, 2, 0);
 
 export class CameraAnimation extends ExperienceBasedBlueprint {
 	protected readonly _experience = new HomeExperience();
 
 	private readonly _appSizes = this._experience.app.sizes;
-	private readonly _appCamera = this._experience.app.camera;
 	private readonly _camera = this._experience.camera;
+	private readonly _world = this._experience.world;
 	private readonly _navigation = this._experience.navigation;
 
 	public enabled = false;
 	public cameraPath = defaultCameraPath;
-	public cameraTarget = defaultCameraTarget;
 	public progress = {
 		current: 0,
 		target: 0,
@@ -117,13 +115,14 @@ export class CameraAnimation extends ExperienceBasedBlueprint {
 		if (this.enabled) return;
 		if (this._navigation?.view) this._navigation.view.controls = false;
 
-		const toPosition = this.cameraPath.getPointAt(
-			this.progress.current,
-			this.positionInCurve
-		);
+		this.cameraPath.getPointAt(this.progress.current, this.positionInCurve);
 
 		this._navigation
-			?.updateCameraPosition(toPosition, this.cameraTarget)
+			?.updateCameraPosition(
+				this.positionInCurve,
+				this._navigation.view.center,
+				Config.GSAP_ANIMATION_DURATION * 0.8
+			)
 			.then(() => {
 				this.enabled = true;
 			});
@@ -137,17 +136,25 @@ export class CameraAnimation extends ExperienceBasedBlueprint {
 
 		this._navigation
 			?.updateCameraPosition(
-				this.positionInCurve.setY(2),
-				this.cameraTarget,
+				this.positionInCurve.setY(this._camera?.lookAtPosition.y ?? 0),
+				this._navigation.view.center,
 				Config.GSAP_ANIMATION_DURATION * 0.5
 			)
 			.then(() => {
-				if (this._navigation?.view) this._navigation.view.controls = true;
+				if (this._navigation?.view) {
+					this._navigation.view.controls = true;
+				}
 			});
 	}
 
 	public update(): void {
-		if (!this.enabled || this.timeline.isActive()) return;
+		if (
+			!this.enabled ||
+			this.timeline.isActive() ||
+			this._navigation?.timeline.isActive() ||
+			this._world?.manager?.timeline.isActive()
+		)
+			return;
 
 		this.progress.current = gsap.utils.interpolate(
 			this.progress.current,

src/experiences/home/camera.ts

@@ -38,6 +38,7 @@ export class Camera extends ExperienceBasedBlueprint {
 	};
 
 	public readonly initialCameraFov = 45;
+	public readonly initialCameraPosition = new Vector3(0, 10, 20);
 	public readonly cameras = [
 		(() =>
 			this._appCameraInstance instanceof PerspectiveCamera
@@ -70,6 +71,13 @@ export class Camera extends ExperienceBasedBlueprint {
 		return this.cameras[this.currentCameraIndex];
 	}
 
+	public get instance(): PerspectiveCamera {
+		if (this._appCamera.instance instanceof PerspectiveCamera)
+			return this._appCamera.instance;
+
+		return new PerspectiveCamera();
+	}
+
 	public construct() {
 		if (!Config.DEBUG && this._appDebug?.cameraHelper) {
 			this._experience.app.scene.remove(this._appDebug?.cameraHelper);
@@ -81,6 +89,7 @@ export class Camera extends ExperienceBasedBlueprint {
 
 		this.correctAspect();
 		this._appCamera.miniCamera?.position.set(10, 8, 30);
+		this._appCameraInstance.position.copy(this.initialCameraPosition);
 		this._prevCameraProps = {
 			fov: this._appCameraInstance.fov,
 			aspect: this._appCameraInstance.aspect,