@benjos/create-boilerplate 1.0.0 → 1.0.1

package/template-vanilla/src/experiences/managers/LoaderManager.ts

@@ -0,0 +1,79 @@
+import Action from '../tools/Action';
+import ThreeAssetsManager from './threes/ThreeAssetsManager';
+
+export default class LoaderManager {
+    private static _TotalSize = 0;
+    private static _LoadedSize = 0;
+
+    public static readonly OnBeginLoad = new Action();
+    public static readonly OnProgress = new Action();
+    public static readonly OnFinishLoad = new Action();
+
+    public static Init(): void {
+        LoaderManager._AddCallbacks();
+    }
+
+    private static _AddCallbacks(): void {
+        LoaderManager._RemoveCallbacks();
+        ThreeAssetsManager.OnLoad.add(LoaderManager._OnLoad);
+        ThreeAssetsManager.OnProgress.add(LoaderManager._OnProgress);
+    }
+
+    private static _RemoveCallbacks(): void {
+        ThreeAssetsManager.OnLoad.remove(LoaderManager._OnLoad);
+        ThreeAssetsManager.OnProgress.remove(LoaderManager._OnProgress);
+    }
+
+    public static LoadAllAssets(): void {
+        if (LoaderManager._CheckIsFinished()) return;
+        else LoaderManager.OnBeginLoad.execute();
+    }
+
+    private static _OnLoad = (): void => {
+        LoaderManager._RefreshSizes();
+        if (LoaderManager._CheckIsFinished()) LoaderManager._OnFinishLoad();
+    };
+
+    private static _CheckIsFinished = (): boolean => {
+        if (!ThreeAssetsManager.IsLoaded) return false;
+        return true;
+    };
+
+    private static _OnProgress = (): void => {
+        LoaderManager._RefreshSizes();
+        LoaderManager.OnProgress.execute();
+    };
+
+    private static _RefreshSizes = (): void => {
+        LoaderManager._RefreshTotalSize();
+        LoaderManager._RefreshLoadedSize();
+    };
+
+    private static _RefreshTotalSize = (): void => {
+        LoaderManager._TotalSize = 0;
+        LoaderManager._TotalSize += ThreeAssetsManager.TotalSize;
+    };
+
+    private static _RefreshLoadedSize = (): void => {
+        LoaderManager._LoadedSize = 0;
+        LoaderManager._LoadedSize += ThreeAssetsManager.LoadedSize;
+    };
+
+    private static _OnFinishLoad = (): void => {
+        LoaderManager.OnFinishLoad.execute();
+    };
+
+    //#region Getters
+    //
+    public static get IsLoaded(): boolean {
+        return LoaderManager._CheckIsFinished();
+    }
+    public static get TotalSize(): number {
+        return LoaderManager._TotalSize;
+    }
+    public static get LoadedSize(): number {
+        return LoaderManager._LoadedSize;
+    }
+    //
+    //#endregion
+}

package/template-vanilla/src/experiences/managers/MouseManager.ts

@@ -0,0 +1,100 @@
+import { DomEvent } from '../constants/doms/DomEvent';
+import Action from '../tools/Action';
+
+export default class MouseManager {
+    private static _X = 0;
+    private static _Y = 0;
+    private static _NormalizedX = 0;
+    private static _NormalizedY = 0;
+    private static _CentralX = 0;
+    private static _CentralY = 0;
+
+    public static readonly OnMouseDown = new Action();
+    public static readonly OnMouseUp = new Action();
+    public static readonly OnMouseMove = new Action();
+
+    public static Init(): void {
+        this._AddCallbacks();
+    }
+
+    private static _AddCallbacks(): void {
+        this._RemoveCallbacks();
+        window.addEventListener(DomEvent.TOUCH_START, this._OnMouseDown);
+        window.addEventListener(DomEvent.TOUCH_END, this._OnMouseUp);
+        window.addEventListener(DomEvent.TOUCH_MOVE, this._OnMouseMove);
+        window.addEventListener(DomEvent.MOUSE_DOWN, this._OnMouseDown);
+        window.addEventListener(DomEvent.MOUSE_UP, this._OnMouseUp);
+        window.addEventListener(DomEvent.MOUSE_MOVE, this._OnMouseMove);
+    }
+
+    private static _RemoveCallbacks(): void {
+        window.removeEventListener(DomEvent.TOUCH_START, this._OnMouseDown);
+        window.removeEventListener(DomEvent.TOUCH_END, this._OnMouseUp);
+        window.removeEventListener(DomEvent.TOUCH_MOVE, this._OnMouseMove);
+        window.removeEventListener(DomEvent.MOUSE_DOWN, this._OnMouseDown);
+        window.removeEventListener(DomEvent.MOUSE_UP, this._OnMouseUp);
+        window.removeEventListener(DomEvent.MOUSE_MOVE, this._OnMouseMove);
+    }
+
+    private static readonly _OnMouseDown = (event: MouseEvent | TouchEvent): void => {
+        this._OnMouseMove(event);
+        this.OnMouseDown.execute();
+    };
+
+    private static readonly _OnMouseUp = (_event: MouseEvent | TouchEvent): void => {
+        this.OnMouseUp.execute();
+    };
+
+    private static readonly _OnMouseMove = (event: MouseEvent | TouchEvent): void => {
+        this._UpdateMousePosition(event);
+        this.OnMouseMove.execute();
+    };
+
+    private static _UpdateMousePosition(event: Event): void {
+        const { x, y } = this._GetMousePosition(event);
+        this._X = x;
+        this._Y = y;
+        this._NormalizedX = this._X / window.innerWidth;
+        this._NormalizedY = 1 - this._Y / window.innerHeight;
+        this._CentralX = this._NormalizedX * 2 - 1;
+        this._CentralY = this._NormalizedY * 2 - 1;
+        this.OnMouseMove.execute();
+    }
+
+    private static _GetMousePosition(e: Event): { x: number; y: number } {
+        if (e instanceof MouseEvent) {
+            return { x: e.clientX, y: e.clientY };
+        }
+
+        if (window.TouchEvent && e instanceof TouchEvent) {
+            if (e.touches.length > 0) {
+                return { x: e.touches[0].clientX, y: e.touches[0].clientY };
+            }
+        }
+
+        return { x: 0, y: 0 };
+    }
+
+    //#region Getters
+    //
+    public static get X(): number {
+        return this._X;
+    }
+    public static get Y(): number {
+        return this._Y;
+    }
+    public static get NormalizedX(): number {
+        return this._NormalizedX;
+    }
+    public static get NormalizedY(): number {
+        return this._NormalizedY;
+    }
+    public static get CentralX(): number {
+        return this._CentralX;
+    }
+    public static get CentralY(): number {
+        return this._CentralY;
+    }
+    //
+    //#endregion
+}

package/template-vanilla/src/experiences/managers/ResizeManager.ts

@@ -0,0 +1,53 @@
+import Action from '../tools/Action';
+import TickerManager from './TickerManager';
+
+export class ResizeManager {
+    private static _Width: number;
+    private static _Height: number;
+    private static _PixelRatio: number;
+
+    public static readonly OnResize = new Action();
+
+    //#region Constants
+    //
+    private static readonly _MAX_PIXEL_RATIO: number = 2;
+    //
+    //#endregion
+
+    public static Init(): void {
+        ResizeManager.Reset();
+        ResizeManager._Resize();
+        TickerManager.Add(ResizeManager.Update);
+    }
+
+    public static Reset(): void {
+        TickerManager.Remove(ResizeManager.Update);
+    }
+
+    private static readonly _Resize = (): void => {
+        ResizeManager._Width = window.innerWidth;
+        ResizeManager._Height = window.innerHeight;
+        ResizeManager._PixelRatio = Math.min(window.devicePixelRatio, ResizeManager._MAX_PIXEL_RATIO);
+
+        ResizeManager.OnResize.execute();
+    };
+
+    public static readonly Update = (_dt: number): void => {
+        if (ResizeManager._Width !== window.innerWidth || ResizeManager._Height !== window.innerHeight)
+            ResizeManager._Resize();
+    };
+
+    //#region Getters
+    //
+    public static get Width(): number {
+        return ResizeManager._Width;
+    }
+    public static get Height(): number {
+        return ResizeManager._Height;
+    }
+    public static get PixelRatio(): number {
+        return ResizeManager._PixelRatio;
+    }
+    //
+    //#endregion
+}

package/template-vanilla/src/experiences/managers/TickerManager.ts

@@ -0,0 +1,86 @@
+export type Tickable = (dt: number) => void;
+
+export default class TickerManager {
+    private static _IsRunning = false;
+    private static readonly _Tickables = new Set<Tickable>();
+    private static _StartTime: number = performance.now();
+    private static _CurrentTime: number = TickerManager._StartTime;
+    private static _ElapsedTime: number;
+    private static _DeltaTime: number;
+
+    //#region Constants
+    //
+    private static readonly _TIME_SCALE: number = 0.001;
+    private static readonly _MAX_DELTA: number = 0.1;
+    //
+    //#endregion
+
+    public static Init(): void {
+        TickerManager.Start();
+        TickerManager._ElapsedTime = 0;
+        TickerManager._DeltaTime = 0.016;
+        TickerManager._Update();
+    }
+
+    public static Start(): void {
+        TickerManager.Stop();
+        TickerManager._IsRunning = true;
+        TickerManager._StartTime = performance.now();
+        TickerManager._CurrentTime = TickerManager._StartTime;
+    }
+
+    public static Stop(): void {
+        TickerManager._IsRunning = false;
+    }
+
+    public static Play(): void {
+        TickerManager.Pause();
+        TickerManager._IsRunning = true;
+        TickerManager._CurrentTime = performance.now();
+    }
+
+    public static Pause(): void {
+        TickerManager._IsRunning = false;
+    }
+
+    public static Add(tickable: Tickable): void {
+        TickerManager._Tickables.add(tickable);
+    }
+
+    public static Remove(tickable: Tickable): void {
+        TickerManager._Tickables.delete(tickable);
+    }
+
+    private static readonly _Update = (): void => {
+        if (TickerManager._IsRunning) {
+            const now = performance.now();
+            TickerManager._DeltaTime = Math.min(
+                (now - TickerManager._CurrentTime) * TickerManager._TIME_SCALE,
+                TickerManager._MAX_DELTA
+            );
+            TickerManager._ElapsedTime += TickerManager._DeltaTime;
+            TickerManager._CurrentTime = now;
+
+            for (const tickable of TickerManager._Tickables) tickable(TickerManager._DeltaTime);
+        }
+
+        requestAnimationFrame(TickerManager._Update);
+    };
+
+    //#region Getters
+    //
+    public static get StartTime(): number {
+        return this._StartTime;
+    }
+    public static get CurrentTime(): number {
+        return this._CurrentTime;
+    }
+    public static get ElapsedTime(): number {
+        return this._ElapsedTime;
+    }
+    public static get DeltaTime(): number {
+        return this._DeltaTime;
+    }
+    //
+    //#endregion
+}

package/template-vanilla/src/experiences/managers/threes/ThreeAssetsManager.ts

@@ -0,0 +1,279 @@
+import {
+    DataTexture,
+    EquirectangularRefractionMapping,
+    LinearSRGBColorSpace,
+    RepeatWrapping,
+    Texture,
+    TextureLoader,
+    type ColorSpace,
+    type Mapping,
+    type Wrapping,
+} from 'three';
+import { DRACOLoader, Font, FontLoader, GLTFLoader, HDRLoader, type GLTF } from 'three/examples/jsm/Addons.js';
+import type { AssetId } from '../../constants/experiences/AssetId';
+import { AssetType } from '../../constants/experiences/AssetType';
+import Action from '../../tools/Action';
+import AssetUtils from '../../utils/AssetUtils';
+import LoaderManager from '../LoaderManager';
+
+export interface IThreeAssetToLoad {
+    id: AssetId;
+    type: AssetType;
+    path: string;
+    option?: IThreeAssetOption;
+    loadedSize: number;
+    totalSize: number;
+}
+
+export interface IThreeAssetOption {}
+
+export interface IThreeTextureOption extends IThreeAssetOption {
+    colorSpace?: ColorSpace;
+    wrapping?: Wrapping;
+    repeatX?: number;
+    repeatY?: number;
+    centerX?: number;
+    centerY?: number;
+}
+
+export interface IThreeHDROption extends IThreeAssetOption {
+    mapping?: Mapping;
+    colorSpace?: ColorSpace;
+}
+
+export interface IThreeModelOption extends IThreeAssetOption {}
+
+export interface IThreeFontOption extends IThreeAssetOption {}
+
+export default class ThreeAssetsManager {
+    private static readonly _Assets: Map<string, Texture | DataTexture | GLTF | Font> = new Map<
+        string,
+        Texture | GLTF | Font
+    >();
+    private static readonly _ToLoadList: IThreeAssetToLoad[] = [];
+    private static _ExpectedAssetsCount = 0;
+
+    private static readonly _TextureLoader = new TextureLoader();
+    private static readonly _HDRLoader = new HDRLoader();
+    private static readonly _GltfLoader = new GLTFLoader();
+    private static readonly _DracoLoader = new DRACOLoader();
+    private static readonly _FontLoader = new FontLoader();
+
+    public static readonly OnLoad = new Action();
+    public static readonly OnProgress = new Action();
+
+    //#region Constants
+    //
+    private static readonly _DRACO_LOADER_PATH: string = 'loaders/draco/';
+    private static readonly _DEFAULT_TEXTURE_OPTION_COLOR_SPACE: ColorSpace = LinearSRGBColorSpace;
+    private static readonly _DEFAULT_TEXTURE_OPTION_WRAPPING: Wrapping = RepeatWrapping;
+    private static readonly _DEFAULT_TEXTURE_OPTION_REPEAT_X: number = 1;
+    private static readonly _DEFAULT_TEXTURE_OPTION_REPEAT_Y: number = 1;
+    private static readonly _DEFAULT_TEXTURE_OPTION_CENTER_X: number = 0.5;
+    private static readonly _DEFAULT_TEXTURE_OPTION_CENTER_Y: number = 0.5;
+    private static readonly _DEFAULT_HDR_MAPPING: Mapping = EquirectangularRefractionMapping;
+    private static readonly _DEFAULT_HDR_COLOR_SPACE: ColorSpace = LinearSRGBColorSpace;
+    private static readonly _DEFAULT_LOADED_SIZE: number = 0;
+    private static readonly _DEFAULT_TOTAL_SIZE: number = -1;
+    private static readonly _DEFAULT_TEXTURE_TOTAL_SIZE: number = 1;
+    //
+    //#endregion
+
+    public static Init(): void {
+        ThreeAssetsManager._DracoLoader.setDecoderPath(AssetUtils.GetPath(ThreeAssetsManager._DRACO_LOADER_PATH));
+        ThreeAssetsManager._GltfLoader.setDRACOLoader(ThreeAssetsManager._DracoLoader);
+        ThreeAssetsManager._AddCallbacks();
+    }
+
+    private static _AddCallbacks(): void {
+        ThreeAssetsManager._RemoveCallbacks();
+        LoaderManager.OnBeginLoad.add(ThreeAssetsManager._OnBeginLoad);
+        LoaderManager.OnFinishLoad.add(ThreeAssetsManager._OnFinishLoad);
+    }
+
+    private static _RemoveCallbacks(): void {
+        LoaderManager.OnBeginLoad.remove(ThreeAssetsManager._OnBeginLoad);
+        LoaderManager.OnFinishLoad.remove(ThreeAssetsManager._OnFinishLoad);
+    }
+
+    public static AddTexture(id: AssetId, path: string, textureOption?: IThreeTextureOption): void {
+        ThreeAssetsManager._ToLoadList.push({
+            id,
+            type: AssetType.TEXTURE,
+            path,
+            option: textureOption,
+            loadedSize: ThreeAssetsManager._DEFAULT_LOADED_SIZE,
+            totalSize: ThreeAssetsManager._DEFAULT_TEXTURE_TOTAL_SIZE,
+        });
+        ThreeAssetsManager._ExpectedAssetsCount++;
+    }
+
+    public static AddHDR(id: AssetId, path: string, hdrOption?: IThreeHDROption): void {
+        ThreeAssetsManager._ToLoadList.push({
+            id,
+            type: AssetType.HDR,
+            path,
+            option: hdrOption,
+            loadedSize: ThreeAssetsManager._DEFAULT_LOADED_SIZE,
+            totalSize: ThreeAssetsManager._DEFAULT_TOTAL_SIZE,
+        });
+        ThreeAssetsManager._ExpectedAssetsCount++;
+    }
+
+    public static AddModel(id: AssetId, path: string, modelOption?: IThreeModelOption): void {
+        ThreeAssetsManager._ToLoadList.push({
+            id,
+            type: AssetType.MODEL,
+            path,
+            option: modelOption,
+            loadedSize: ThreeAssetsManager._DEFAULT_LOADED_SIZE,
+            totalSize: ThreeAssetsManager._DEFAULT_TOTAL_SIZE,
+        });
+        ThreeAssetsManager._ExpectedAssetsCount++;
+    }
+
+    public static AddFont(id: AssetId, path: string, fontOption?: IThreeFontOption): void {
+        ThreeAssetsManager._ToLoadList.push({
+            id,
+            type: AssetType.FONT,
+            path,
+            option: fontOption,
+            loadedSize: ThreeAssetsManager._DEFAULT_LOADED_SIZE,
+            totalSize: ThreeAssetsManager._DEFAULT_TOTAL_SIZE,
+        });
+        ThreeAssetsManager._ExpectedAssetsCount++;
+    }
+
+    private static _OnBeginLoad = (): void => {
+        if (ThreeAssetsManager._ToLoadList.length === 0) {
+            ThreeAssetsManager.OnLoad.execute();
+            return;
+        }
+        for (const asset of ThreeAssetsManager._ToLoadList) {
+            if (asset.type === AssetType.TEXTURE) ThreeAssetsManager._LoadTexture(asset);
+            else if (asset.type === AssetType.HDR) ThreeAssetsManager._LoadHDR(asset);
+            else if (asset.type === AssetType.MODEL) ThreeAssetsManager._LoadModel(asset);
+            else if (asset.type === AssetType.FONT) ThreeAssetsManager._LoadFont(asset);
+        }
+    };
+
+    private static readonly _OnFinishLoad = (): void => {
+        ThreeAssetsManager._ToLoadList.length = 0;
+    };
+
+    private static _LoadTexture(asset: IThreeAssetToLoad): void {
+        const option = asset.option as IThreeTextureOption | undefined;
+        ThreeAssetsManager._TextureLoader.load(
+            asset.path,
+            (texture) => {
+                texture.colorSpace = option?.colorSpace ?? ThreeAssetsManager._DEFAULT_TEXTURE_OPTION_COLOR_SPACE;
+                texture.wrapS = texture.wrapT = option?.wrapping ?? ThreeAssetsManager._DEFAULT_TEXTURE_OPTION_WRAPPING;
+                texture.repeat.set(
+                    option?.repeatX ?? ThreeAssetsManager._DEFAULT_TEXTURE_OPTION_REPEAT_X,
+                    option?.repeatY ?? ThreeAssetsManager._DEFAULT_TEXTURE_OPTION_REPEAT_Y
+                );
+                texture.center.set(
+                    option?.centerX ?? ThreeAssetsManager._DEFAULT_TEXTURE_OPTION_CENTER_X,
+                    option?.centerY ?? ThreeAssetsManager._DEFAULT_TEXTURE_OPTION_CENTER_Y
+                );
+                asset.loadedSize = asset.totalSize;
+                ThreeAssetsManager._OnLoad(asset.id, texture);
+            },
+            (event: ProgressEvent) => ThreeAssetsManager._OnProgress(asset, event),
+            () => ThreeAssetsManager._OnError(AssetType.TEXTURE, asset.id, asset.path)
+        );
+    }
+
+    private static _LoadHDR(asset: IThreeAssetToLoad): void {
+        const option = asset.option as IThreeHDROption | undefined;
+        ThreeAssetsManager._HDRLoader.load(
+            asset.path,
+            (dataTexture) => {
+                dataTexture.mapping = option?.mapping ?? ThreeAssetsManager._DEFAULT_HDR_MAPPING;
+                dataTexture.colorSpace = option?.colorSpace ?? ThreeAssetsManager._DEFAULT_HDR_COLOR_SPACE;
+                ThreeAssetsManager._OnLoad(asset.id, dataTexture);
+            },
+            (event: ProgressEvent) => ThreeAssetsManager._OnProgress(asset, event),
+            () => ThreeAssetsManager._OnError(AssetType.HDR, asset.id, asset.path)
+        );
+    }
+
+    private static _LoadModel(asset: IThreeAssetToLoad): void {
+        ThreeAssetsManager._GltfLoader.load(
+            asset.path,
+            (model) => ThreeAssetsManager._OnLoad(asset.id, model),
+            (event: ProgressEvent) => ThreeAssetsManager._OnProgress(asset, event),
+            () => ThreeAssetsManager._OnError(AssetType.MODEL, asset.id, asset.path)
+        );
+    }
+
+    private static _LoadFont(asset: IThreeAssetToLoad): void {
+        ThreeAssetsManager._FontLoader.load(
+            asset.path,
+            (font) => ThreeAssetsManager._OnLoad(asset.id, font),
+            (event: ProgressEvent) => ThreeAssetsManager._OnProgress(asset, event),
+            () => ThreeAssetsManager._OnError(AssetType.FONT, asset.id, asset.path)
+        );
+    }
+
+    private static _OnLoad(id: AssetId, asset: Texture | GLTF | Font): void {
+        ThreeAssetsManager._Assets.set(id, asset);
+        ThreeAssetsManager.OnLoad.execute();
+    }
+
+    private static _OnProgress(asset: IThreeAssetToLoad, event: ProgressEvent): void {
+        if (asset.totalSize === ThreeAssetsManager._DEFAULT_TOTAL_SIZE) asset.totalSize = event.total;
+        asset.loadedSize = event.loaded;
+        ThreeAssetsManager.OnProgress.execute();
+    }
+
+    private static _OnError(type: AssetType, id: AssetId, path: string): void {
+        throw new Error(`ThreeAssetsManager: Failed to load ${type} with id '${id}' from path '${path}'`);
+    }
+
+    public static GetTexture(id: AssetId): Texture {
+        const asset = ThreeAssetsManager._Assets.get(id);
+        if (!asset) throw new Error(`Texture with id '${id}' not found!`);
+        return asset as Texture;
+    }
+
+    public static GetHDR(id: AssetId): DataTexture {
+        const asset = ThreeAssetsManager._Assets.get(id);
+        if (!asset) throw new Error(`HDR with id '${id}' not found!`);
+        return asset as DataTexture;
+    }
+
+    public static GetModel(id: AssetId): GLTF {
+        const asset = ThreeAssetsManager._Assets.get(id);
+        if (!asset) throw new Error(`Model with id '${id}' not found!`);
+        return asset as GLTF;
+    }
+
+    public static GetFont(id: AssetId): Font {
+        const asset = ThreeAssetsManager._Assets.get(id);
+        if (!asset) throw new Error(`Font with id '${id}' not found!`);
+        return asset as Font;
+    }
+
+    //#region Getters
+    //
+    public static get IsLoaded(): boolean {
+        return ThreeAssetsManager._Assets.size === ThreeAssetsManager._ExpectedAssetsCount;
+    }
+    public static get TotalSize(): number {
+        let totalSize = 0;
+        for (const asset of ThreeAssetsManager._ToLoadList) {
+            totalSize += asset.totalSize;
+        }
+        return totalSize;
+    }
+    public static get LoadedSize(): number {
+        let loadedSize = 0;
+        for (const asset of ThreeAssetsManager._ToLoadList) {
+            loadedSize += asset.loadedSize;
+        }
+        return loadedSize;
+    }
+    //
+    //#endregion
+}

package/template-vanilla/src/experiences/managers/threes/ThreeCameraControllerManager.ts

@@ -0,0 +1,43 @@
+import type ThreeCameraControllerBase from '../../cameras/threes/bases/ThreeCameraControllerBase';
+import type { CameraId } from '../../constants/experiences/CameraId';
+import Action from '../../tools/Action';
+
+export default class ThreeCameraControllerManager {
+    private static readonly _ThreeCameraControllers = new Map<CameraId, ThreeCameraControllerBase>();
+    private static _ActiveThreeCameraController: ThreeCameraControllerBase;
+
+    public static readonly OnActiveThreeCameraControllerChange = new Action();
+
+    public static Init(): void {
+        ThreeCameraControllerManager._ThreeCameraControllers.clear();
+    }
+
+    public static Add(threeCameraController: ThreeCameraControllerBase, isActive = false): void {
+        ThreeCameraControllerManager._ThreeCameraControllers.set(threeCameraController.cameraId, threeCameraController);
+        if (isActive) ThreeCameraControllerManager.SetActiveCamera(threeCameraController.cameraId);
+    }
+
+    public static Get(cameraId: CameraId): ThreeCameraControllerBase {
+        const threeCameraController = ThreeCameraControllerManager._ThreeCameraControllers.get(cameraId);
+        if (!threeCameraController) {
+            throw new Error(`CameraControllerManager: No camera found with id ${cameraId}`);
+        }
+        return threeCameraController;
+    }
+
+    public static SetActiveCamera(cameraId: CameraId): void {
+        const threeCameraController = ThreeCameraControllerManager.Get(cameraId);
+        ThreeCameraControllerManager._ActiveThreeCameraController?.disable();
+        ThreeCameraControllerManager._ActiveThreeCameraController = threeCameraController;
+        ThreeCameraControllerManager._ActiveThreeCameraController.enable();
+        ThreeCameraControllerManager.OnActiveThreeCameraControllerChange.execute();
+    }
+
+    //#region Getters
+    //
+    public static get ActiveThreeCameraController(): ThreeCameraControllerBase {
+        return ThreeCameraControllerManager._ActiveThreeCameraController;
+    }
+    //
+    //#endregion
+}

package/template-vanilla/src/experiences/managers/threes/ThreeRaycasterManager.ts

@@ -0,0 +1,23 @@
+import { Object3D, Raycaster, Vector2, type Intersection, type Object3DEventMap } from 'three';
+import MainThree from '../../engines/threes/MainThree';
+import MouseManager from '../MouseManager';
+
+export default class ThreeRaycasterManager {
+    private static readonly _Raycaster = new Raycaster();
+
+    public static Init(): void {
+        //
+    }
+
+    public static CastFromCameraToMouse(
+        objects: Object3D[],
+        recursive = true
+    ): Intersection<Object3D<Object3DEventMap>>[] {
+        ThreeRaycasterManager._Raycaster.setFromCamera(
+            new Vector2(MouseManager.CentralX, MouseManager.CentralY),
+            MainThree.CameraController.camera
+        );
+        const intersects = ThreeRaycasterManager._Raycaster.intersectObjects(objects, recursive);
+        return intersects;
+    }
+}