@benjos/create-boilerplate 1.3.5 → 1.4.1

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

@@ -1,79 +1,87 @@
 import { Action } from '@benjos/cookware';
 import ThreeAssetsManager from './threes/ThreeAssetsManager';
 
-export default class LoaderManager {
-    private static _TotalSize = 0;
-    private static _LoadedSize = 0;
+class LoaderManager {
+    private _totalSize = 0;
+    private _loadedSize = 0;
 
-    public static readonly OnBeginLoad = new Action();
-    public static readonly OnProgress = new Action();
-    public static readonly OnFinishLoad = new Action();
+    public readonly onBeginLoad = new Action();
+    public readonly onProgress = new Action();
+    public readonly onFinishLoad = new Action();
 
-    public static Init(): void {
-        LoaderManager._AddCallbacks();
+    public init(): void {
+        this._addCallbacks();
     }
 
-    private static _AddCallbacks(): void {
-        LoaderManager._RemoveCallbacks();
-        ThreeAssetsManager.OnLoad.add(LoaderManager._OnLoad);
-        ThreeAssetsManager.OnProgress.add(LoaderManager._OnProgress);
+    private _addCallbacks(): void {
+        this._removeCallbacks();
+        ThreeAssetsManager.onLoad.add(this._onLoad);
+        ThreeAssetsManager.onProgress.add(this._onProgress);
     }
 
-    private static _RemoveCallbacks(): void {
-        ThreeAssetsManager.OnLoad.remove(LoaderManager._OnLoad);
-        ThreeAssetsManager.OnProgress.remove(LoaderManager._OnProgress);
+    private _removeCallbacks(): void {
+        ThreeAssetsManager.onLoad.remove(this._onLoad);
+        ThreeAssetsManager.onProgress.remove(this._onProgress);
     }
 
-    public static LoadAllAssets(): void {
-        if (LoaderManager._CheckIsFinished()) return;
-        else LoaderManager.OnBeginLoad.execute();
-    }
+    private _beginLoad = (): void => {
+        ThreeAssetsManager.beginLoad();
+        this.onBeginLoad.execute();
+    };
 
-    private static _OnLoad = (): void => {
-        LoaderManager._RefreshSizes();
-        if (LoaderManager._CheckIsFinished()) LoaderManager._OnFinishLoad();
+    private _finishLoad = (): void => {
+        ThreeAssetsManager.finishLoad();
+        this.onFinishLoad.execute();
     };
 
-    private static _CheckIsFinished = (): boolean => {
-        if (!ThreeAssetsManager.IsLoaded) return false;
-        return true;
+    public loadAllAssets(): void {
+        if (this._checkIsFinished()) return;
+        this._beginLoad();
+    }
+
+    private _onLoad = (): void => {
+        this._refreshSizes();
+        if (this._checkIsFinished()) this._finishLoad();
     };
 
-    private static _OnProgress = (): void => {
-        LoaderManager._RefreshSizes();
-        LoaderManager.OnProgress.execute();
+    private _checkIsFinished = (): boolean => {
+        if (!ThreeAssetsManager.isLoaded) return false;
+        return true;
     };
 
-    private static _RefreshSizes = (): void => {
-        LoaderManager._RefreshTotalSize();
-        LoaderManager._RefreshLoadedSize();
+    private _onProgress = (): void => {
+        this._refreshSizes();
+        this.onProgress.execute();
     };
 
-    private static _RefreshTotalSize = (): void => {
-        LoaderManager._TotalSize = 0;
-        LoaderManager._TotalSize += ThreeAssetsManager.TotalSize;
+    private _refreshSizes = (): void => {
+        this._refreshTotalSize();
+        this._refreshLoadedSize();
     };
 
-    private static _RefreshLoadedSize = (): void => {
-        LoaderManager._LoadedSize = 0;
-        LoaderManager._LoadedSize += ThreeAssetsManager.LoadedSize;
+    private _refreshTotalSize = (): void => {
+        this._totalSize = 0;
+        this._totalSize += ThreeAssetsManager.totalSize;
     };
 
-    private static _OnFinishLoad = (): void => {
-        LoaderManager.OnFinishLoad.execute();
+    private _refreshLoadedSize = (): void => {
+        this._loadedSize = 0;
+        this._loadedSize += ThreeAssetsManager.loadedSize;
     };
 
     //#region Getters
     //
-    public static get IsLoaded(): boolean {
-        return LoaderManager._CheckIsFinished();
+    public get isLoaded(): boolean {
+        return this._checkIsFinished();
     }
-    public static get TotalSize(): number {
-        return LoaderManager._TotalSize;
+    public get totalSize(): number {
+        return this._totalSize;
     }
-    public static get LoadedSize(): number {
-        return LoaderManager._LoadedSize;
+    public get loadedSize(): number {
+        return this._loadedSize;
     }
     //
     //#endregion
 }
+
+export default new LoaderManager();

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

@@ -12,21 +12,20 @@ import {
 } 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 LoaderManager from '../LoaderManager';
+import { AssetType } from '../../types/assetTypes';
 
-export interface IThreeAssetToLoad {
+export interface ThreeAssetToLoad {
     id: AssetId;
     type: AssetType;
     path: string;
-    option?: IThreeAssetOption;
+    option?: ThreeAssetOption;
     loadedSize: number;
     totalSize: number;
 }
 
-export interface IThreeAssetOption { }
+export interface ThreeAssetOption {}
 
-export interface IThreeTextureOption extends IThreeAssetOption {
+export interface ThreeTextureOption extends ThreeAssetOption {
     colorSpace?: ColorSpace;
     wrapping?: Wrapping;
     repeatX?: number;
@@ -35,34 +34,16 @@ export interface IThreeTextureOption extends IThreeAssetOption {
     centerY?: number;
 }
 
-export interface IThreeHDROption extends IThreeAssetOption {
+export interface ThreeHDROption extends ThreeAssetOption {
     mapping?: Mapping;
     colorSpace?: ColorSpace;
 }
 
-export interface IThreeModelOption extends IThreeAssetOption { }
+export interface ThreeModelOption extends ThreeAssetOption {}
 
-export interface IThreeFontOption extends IThreeAssetOption { }
+export interface ThreeFontOption extends ThreeAssetOption {}
 
-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
-    //
+class ThreeAssetsManager {
     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;
@@ -75,28 +56,30 @@ export default class ThreeAssetsManager {
     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 readonly _assets: Map<string, Texture | DataTexture | GLTF | Font> = new Map<
+        string,
+        Texture | GLTF | Font
+    >();
+    private readonly _toLoadList: ThreeAssetToLoad[] = [];
+    private _expectedAssetsCount = 0;
 
-    private static _AddCallbacks(): void {
-        ThreeAssetsManager._RemoveCallbacks();
-        LoaderManager.OnBeginLoad.add(ThreeAssetsManager._OnBeginLoad);
-        LoaderManager.OnFinishLoad.add(ThreeAssetsManager._OnFinishLoad);
-    }
+    private readonly _textureLoader = new TextureLoader();
+    private readonly _hdrLoader = new HDRLoader();
+    private readonly _gltfLoader = new GLTFLoader();
+    private readonly _dracoLoader = new DRACOLoader();
+    private readonly _fontLoader = new FontLoader();
 
-    private static _RemoveCallbacks(): void {
-        LoaderManager.OnBeginLoad.remove(ThreeAssetsManager._OnBeginLoad);
-        LoaderManager.OnFinishLoad.remove(ThreeAssetsManager._OnFinishLoad);
+    public readonly onLoad = new Action();
+    public readonly onProgress = new Action();
+
+    public init(): void {
+        this._dracoLoader.setDecoderPath(AssetUtils.GetPath(ThreeAssetsManager._DRACO_LOADER_PATH));
+        this._gltfLoader.setDRACOLoader(this._dracoLoader);
     }
 
-    public static AddTexture(id: AssetId, path: string, textureOption?: IThreeTextureOption): void {
-        ThreeAssetsManager._ToLoadList.push({
+    public addTexture(id: AssetId, path: string, textureOption?: ThreeTextureOption): void {
+        this._toLoadList.push({
             id,
             type: AssetType.TEXTURE,
             path,
@@ -104,11 +87,11 @@ export default class ThreeAssetsManager {
             loadedSize: ThreeAssetsManager._DEFAULT_LOADED_SIZE,
             totalSize: ThreeAssetsManager._DEFAULT_TEXTURE_TOTAL_SIZE,
         });
-        ThreeAssetsManager._ExpectedAssetsCount++;
+        this._expectedAssetsCount++;
     }
 
-    public static AddHDR(id: AssetId, path: string, hdrOption?: IThreeHDROption): void {
-        ThreeAssetsManager._ToLoadList.push({
+    public addHDR(id: AssetId, path: string, hdrOption?: ThreeHDROption): void {
+        this._toLoadList.push({
             id,
             type: AssetType.HDR,
             path,
@@ -116,11 +99,11 @@ export default class ThreeAssetsManager {
             loadedSize: ThreeAssetsManager._DEFAULT_LOADED_SIZE,
             totalSize: ThreeAssetsManager._DEFAULT_TOTAL_SIZE,
         });
-        ThreeAssetsManager._ExpectedAssetsCount++;
+        this._expectedAssetsCount++;
     }
 
-    public static AddModel(id: AssetId, path: string, modelOption?: IThreeModelOption): void {
-        ThreeAssetsManager._ToLoadList.push({
+    public addModel(id: AssetId, path: string, modelOption?: ThreeModelOption): void {
+        this._toLoadList.push({
             id,
             type: AssetType.MODEL,
             path,
@@ -128,11 +111,11 @@ export default class ThreeAssetsManager {
             loadedSize: ThreeAssetsManager._DEFAULT_LOADED_SIZE,
             totalSize: ThreeAssetsManager._DEFAULT_TOTAL_SIZE,
         });
-        ThreeAssetsManager._ExpectedAssetsCount++;
+        this._expectedAssetsCount++;
     }
 
-    public static AddFont(id: AssetId, path: string, fontOption?: IThreeFontOption): void {
-        ThreeAssetsManager._ToLoadList.push({
+    public addFont(id: AssetId, path: string, fontOption?: ThreeFontOption): void {
+        this._toLoadList.push({
             id,
             type: AssetType.FONT,
             path,
@@ -140,29 +123,29 @@ export default class ThreeAssetsManager {
             loadedSize: ThreeAssetsManager._DEFAULT_LOADED_SIZE,
             totalSize: ThreeAssetsManager._DEFAULT_TOTAL_SIZE,
         });
-        ThreeAssetsManager._ExpectedAssetsCount++;
+        this._expectedAssetsCount++;
     }
 
-    private static _OnBeginLoad = (): void => {
-        if (ThreeAssetsManager._ToLoadList.length === 0) {
-            ThreeAssetsManager.OnLoad.execute();
+    public beginLoad(): void {
+        if (this._toLoadList.length === 0) {
+            this.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);
+        for (const asset of this._toLoadList) {
+            if (asset.type === AssetType.TEXTURE) this._loadTexture(asset);
+            else if (asset.type === AssetType.HDR) this._loadHDR(asset);
+            else if (asset.type === AssetType.MODEL) this._loadModel(asset);
+            else if (asset.type === AssetType.FONT) this._loadFont(asset);
         }
-    };
+    }
 
-    private static readonly _OnFinishLoad = (): void => {
-        ThreeAssetsManager._ToLoadList.length = 0;
-    };
+    public finishLoad(): void {
+        this._toLoadList.length = 0;
+    }
 
-    private static _LoadTexture(asset: IThreeAssetToLoad): void {
-        const option = asset.option as IThreeTextureOption | undefined;
-        ThreeAssetsManager._TextureLoader.load(
+    private _loadTexture(asset: ThreeAssetToLoad): void {
+        const option = asset.option as ThreeTextureOption | undefined;
+        this._textureLoader.load(
             asset.path,
             (texture) => {
                 texture.colorSpace = option?.colorSpace ?? ThreeAssetsManager._DEFAULT_TEXTURE_OPTION_COLOR_SPACE;
@@ -176,99 +159,99 @@ export default class ThreeAssetsManager {
                     option?.centerY ?? ThreeAssetsManager._DEFAULT_TEXTURE_OPTION_CENTER_Y
                 );
                 asset.loadedSize = asset.totalSize;
-                ThreeAssetsManager._OnLoad(asset.id, texture);
+                this._onLoad(asset.id, texture);
             },
-            (event: ProgressEvent) => ThreeAssetsManager._OnProgress(asset, event),
-            () => ThreeAssetsManager._OnError(AssetType.TEXTURE, asset.id, asset.path)
+            (event: ProgressEvent) => this._onProgress(asset, event),
+            () => this._onError(AssetType.TEXTURE, asset.id, asset.path)
         );
     }
 
-    private static _LoadHDR(asset: IThreeAssetToLoad): void {
-        const option = asset.option as IThreeHDROption | undefined;
-        ThreeAssetsManager._HDRLoader.load(
+    private _loadHDR(asset: ThreeAssetToLoad): void {
+        const option = asset.option as ThreeHDROption | undefined;
+        this._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);
+                this._onLoad(asset.id, dataTexture);
             },
-            (event: ProgressEvent) => ThreeAssetsManager._OnProgress(asset, event),
-            () => ThreeAssetsManager._OnError(AssetType.HDR, asset.id, asset.path)
+            (event: ProgressEvent) => this._onProgress(asset, event),
+            () => this._onError(AssetType.HDR, asset.id, asset.path)
         );
     }
 
-    private static _LoadModel(asset: IThreeAssetToLoad): void {
-        ThreeAssetsManager._GltfLoader.load(
+    private _loadModel(asset: ThreeAssetToLoad): void {
+        this._gltfLoader.load(
             asset.path,
-            (model) => ThreeAssetsManager._OnLoad(asset.id, model),
-            (event: ProgressEvent) => ThreeAssetsManager._OnProgress(asset, event),
-            () => ThreeAssetsManager._OnError(AssetType.MODEL, asset.id, asset.path)
+            (model) => this._onLoad(asset.id, model),
+            (event: ProgressEvent) => this._onProgress(asset, event),
+            () => this._onError(AssetType.MODEL, asset.id, asset.path)
         );
     }
 
-    private static _LoadFont(asset: IThreeAssetToLoad): void {
-        ThreeAssetsManager._FontLoader.load(
+    private _loadFont(asset: ThreeAssetToLoad): void {
+        this._fontLoader.load(
             asset.path,
-            (font) => ThreeAssetsManager._OnLoad(asset.id, font),
-            (event: ProgressEvent) => ThreeAssetsManager._OnProgress(asset, event),
-            () => ThreeAssetsManager._OnError(AssetType.FONT, asset.id, asset.path)
+            (font) => this._onLoad(asset.id, font),
+            (event: ProgressEvent) => this._onProgress(asset, event),
+            () => this._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 _onLoad(id: AssetId, asset: Texture | GLTF | Font): void {
+        this._assets.set(id, asset);
+        this.onLoad.execute();
     }
 
-    private static _OnProgress(asset: IThreeAssetToLoad, event: ProgressEvent): void {
+    private _onProgress(asset: ThreeAssetToLoad, event: ProgressEvent): void {
         if (asset.totalSize === ThreeAssetsManager._DEFAULT_TOTAL_SIZE) asset.totalSize = event.total;
         asset.loadedSize = event.loaded;
-        ThreeAssetsManager.OnProgress.execute();
+        this.onProgress.execute();
     }
 
-    private static _OnError(type: AssetType, id: AssetId, path: string): void {
+    private _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);
+    public getTexture(id: AssetId): Texture {
+        const asset = this._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);
+    public getHDR(id: AssetId): DataTexture {
+        const asset = this._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);
+    public getModel(id: AssetId): GLTF {
+        const asset = this._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);
+    public getFont(id: AssetId): Font {
+        const asset = this._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 get isLoaded(): boolean {
+        return this._assets.size === this._expectedAssetsCount;
     }
-    public static get TotalSize(): number {
+    public get totalSize(): number {
         let totalSize = 0;
-        for (const asset of ThreeAssetsManager._ToLoadList) {
+        for (const asset of this._toLoadList) {
             totalSize += asset.totalSize;
         }
         return totalSize;
     }
-    public static get LoadedSize(): number {
+    public get loadedSize(): number {
         let loadedSize = 0;
-        for (const asset of ThreeAssetsManager._ToLoadList) {
+        for (const asset of this._toLoadList) {
             loadedSize += asset.loadedSize;
         }
         return loadedSize;
@@ -276,3 +259,5 @@ export default class ThreeAssetsManager {
     //
     //#endregion
 }
+
+export default new ThreeAssetsManager();

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

@@ -2,42 +2,45 @@ import { Action } from '@benjos/cookware';
 import type ThreeCameraControllerBase from '../../cameras/threes/bases/ThreeCameraControllerBase';
 import type { CameraId } from '../../constants/experiences/CameraId';
 
-export default class ThreeCameraControllerManager {
-    private static readonly _ThreeCameraControllers = new Map<CameraId, ThreeCameraControllerBase>();
-    private static _ActiveThreeCameraController: ThreeCameraControllerBase;
+class ThreeCameraControllerManager {
+    declare private _threeCameraControllers: Map<CameraId, ThreeCameraControllerBase>;
+    declare private _activeThreeCameraController: ThreeCameraControllerBase;
 
-    public static readonly OnActiveThreeCameraControllerChange = new Action();
+    public readonly onActiveThreeCameraControllerChange = new Action();
 
-    public static Init(): void {
-        ThreeCameraControllerManager._ThreeCameraControllers.clear();
+    public init(): void {
+        this._threeCameraControllers = new Map();
+        this._threeCameraControllers.clear();
     }
 
-    public static Add(threeCameraController: ThreeCameraControllerBase, isActive = false): void {
-        ThreeCameraControllerManager._ThreeCameraControllers.set(threeCameraController.cameraId, threeCameraController);
-        if (isActive) ThreeCameraControllerManager.SetActiveCamera(threeCameraController.cameraId);
+    public add(threeCameraController: ThreeCameraControllerBase, isActive = false): void {
+        this._threeCameraControllers.set(threeCameraController.cameraId, threeCameraController);
+        if (isActive) this.setActiveCamera(threeCameraController.cameraId);
     }
 
-    public static Get(cameraId: CameraId): ThreeCameraControllerBase {
-        const threeCameraController = ThreeCameraControllerManager._ThreeCameraControllers.get(cameraId);
+    public get(cameraId: CameraId): ThreeCameraControllerBase {
+        const threeCameraController = this._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();
+    public setActiveCamera(cameraId: CameraId): void {
+        const threeCameraController = this.get(cameraId);
+        this._activeThreeCameraController?.disable();
+        this._activeThreeCameraController = threeCameraController;
+        this._activeThreeCameraController.enable();
+        this.onActiveThreeCameraControllerChange.execute();
     }
 
     //#region Getters
     //
-    public static get ActiveThreeCameraController(): ThreeCameraControllerBase {
-        return ThreeCameraControllerManager._ActiveThreeCameraController;
+    public get activeThreeCameraController(): ThreeCameraControllerBase {
+        return this._activeThreeCameraController;
     }
     //
     //#endregion
 }
+
+export default new ThreeCameraControllerManager();

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

@@ -1,23 +1,21 @@
+import { DomPointerManager } from '@benjos/cookware';
 import { Object3D, Raycaster, Vector2, type Intersection, type Object3DEventMap } from 'three';
-import MainThree from '../../engines/threes/MainThree';
-import MouseManager from '../MouseManager';
+import MainThreeApp from '../../engines/threes/app/MainThreeApp';
 
-export default class ThreeRaycasterManager {
-    private static readonly _Raycaster = new Raycaster();
+class ThreeRaycasterManager {
+    private readonly _raycaster = new Raycaster();
+    private readonly _pointerPosition = new Vector2();
 
-    public static Init(): void {
+    public 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);
+    public castFromCameraToPointer(objects: Object3D[], recursive = true): Intersection<Object3D<Object3DEventMap>>[] {
+        this._pointerPosition.set(DomPointerManager.ndcX, DomPointerManager.ndcY);
+        this._raycaster.setFromCamera(this._pointerPosition, MainThreeApp.cameraController.camera);
+        const intersects = this._raycaster.intersectObjects(objects, recursive);
         return intersects;
     }
 }
+
+export default new ThreeRaycasterManager();

package/template-vanilla/src/experiences/materials/threes/loaders/LoaderMaterial.ts

@@ -4,16 +4,12 @@ import LoaderFragmentShader from '../../../shaders/threes/loaders/LoaderFragment
 import LoaderVertexShader from '../../../shaders/threes/loaders/LoaderVertexShader.glsl';
 
 export default class LoaderMaterial extends ShaderMaterial {
-    //#region Constants
-    //
     private static readonly _DEFAULT_UNIFORMS_ALPHA: number = 1;
     private static readonly _DEFAULT_UNIFORMS_COLOR: number = 0x3f79f3;
     private static readonly _GSAP_DURATION_FADE_IN: number = 0.5;
     private static readonly _GSAP_EASE_FADE_IN: string = 'power2.out';
     private static readonly _GSAP_DURATION_FADE_OUT: number = 1.5;
     private static readonly _GSAP_EASE_FADE_OUT: string = 'power2.in';
-    //
-    //#endregion
 
     constructor() {
         super({

package/template-vanilla/src/experiences/renderers/threes/LoaderRenderer.ts

@@ -2,15 +2,11 @@ import { Camera, LinearSRGBColorSpace, NoToneMapping, Scene, type WebGLRendererP
 import WebGLRendererBase from './bases/WebGLRendererBase';
 
 export default class LoaderRenderer extends WebGLRendererBase {
-    //#region Constants
-    //
     private static readonly _DEFAULT_TONE_MAPPING = NoToneMapping;
     private static readonly _DEFAULT_OUTPUT_COLOR_SPACE = LinearSRGBColorSpace;
     private static readonly _DEFAULT_TONE_MAPPING_EXPOSURE = 1;
     private static readonly _DEFAULT_CLEAR_COLOR = 0x000000;
     private static readonly _DEFAULT_CLEAR_ALPHA = 0;
-    //
-    //#endregion
 
     constructor(scene: Scene, camera: Camera, parameters: WebGLRendererParameters = {}) {
         super(scene, camera, parameters);