@benjos/create-boilerplate 1.3.5 → 1.4.0

package/template-vanilla/src/experiences/commands/InitCommand.ts

@@ -1,53 +1,50 @@
-import { AssetUtils } from '@benjos/cookware';
+import { AssetUtils, DomKeyboardManager, DomPointerManager, DomResizeManager, TickerManager } from '@benjos/cookware';
 import { AssetId } from '../constants/experiences/AssetId';
 import DebugManager from '../managers/DebugManager';
-import { KeyboardManager } from '../managers/KeyboardManager';
 import LoaderManager from '../managers/LoaderManager';
-import MouseManager from '../managers/MouseManager';
-import { ResizeManager } from '../managers/ResizeManager';
 import ThreeAssetsManager from '../managers/threes/ThreeAssetsManager';
 import ThreeCameraControllerManager from '../managers/threes/ThreeCameraControllerManager';
 import ThreeRaycasterManager from '../managers/threes/ThreeRaycasterManager';
-import TickerManager from '../managers/TickerManager';
-import ViewProxy from '../proxies/ViewProxy';
 
-export default class InitCommand {
-    public static Init(): void {
-        InitCommand._InitUtils();
-        InitCommand._InitProxies();
-        InitCommand._InitManagers();
-        InitCommand._InitCommon();
-        InitCommand._InitThree();
+class InitCommand {
+    public init(): void {
+        this._initUtils();
+        this._initProxies();
+        this._initManagers();
+        this._initCommon();
+        this._initThree();
     }
 
-    private static _InitUtils(): void {
-        AssetUtils.init();
+    private _initUtils(): void {
+        AssetUtils.Init();
     }
 
-    private static _InitProxies(): void {
-        ViewProxy.Init();
+    private _initProxies(): void {
+        //
     }
 
-    private static _InitManagers(): void {
-        TickerManager.Init();
-        KeyboardManager.Init();
-        MouseManager.Init();
-        ThreeAssetsManager.Init();
-        ThreeCameraControllerManager.Init();
-        ResizeManager.Init();
-        DebugManager.Init();
-        ThreeRaycasterManager.Init();
-        LoaderManager.Init();
+    private _initManagers(): void {
+        TickerManager.init();
+        DomKeyboardManager.init();
+        DomPointerManager.init();
+        ThreeAssetsManager.init();
+        ThreeCameraControllerManager.init();
+        DomResizeManager.init();
+        DebugManager.init();
+        ThreeRaycasterManager.init();
+        LoaderManager.init();
     }
 
-    private static _InitCommon(): void {
+    private _initCommon(): void {
         //
     }
 
-    private static _InitThree(): void {
-        ThreeAssetsManager.AddHDR(AssetId.THREE_HDR_TEMPLATE, AssetUtils.getPath('hdrs/template.hdr'));
-        ThreeAssetsManager.AddModel(AssetId.THREE_GLTF_TEMPLATE, AssetUtils.getPath('models/template.glb'));
-        ThreeAssetsManager.AddTexture(AssetId.THREE_TEXTURE_TEMPLATE, AssetUtils.getPath('textures/template.jpg'));
-        ThreeAssetsManager.AddFont(AssetId.THREE_FONT_TEMPLATE, AssetUtils.getPath('fonts/template.typeface.json'));
+    private _initThree(): void {
+        ThreeAssetsManager.addHDR(AssetId.THREE_HDR_TEMPLATE, AssetUtils.GetPath('hdrs/template.hdr'));
+        ThreeAssetsManager.addModel(AssetId.THREE_GLTF_TEMPLATE, AssetUtils.GetPath('models/template.glb'));
+        ThreeAssetsManager.addTexture(AssetId.THREE_TEXTURE_TEMPLATE, AssetUtils.GetPath('textures/template.jpg'));
+        ThreeAssetsManager.addFont(AssetId.THREE_FONT_TEMPLATE, AssetUtils.GetPath('fonts/template.typeface.json'));
     }
 }
+
+export default new InitCommand();

package/template-vanilla/src/experiences/engines/htmls/MainHTML.ts

@@ -1,13 +1,16 @@
-import { ViewId } from '../../constants/experiences/ViewId';
-import ViewProxy from '../../proxies/ViewProxy';
+import HTMLViewBase from '../../views/htmls/bases/HTMLViewBase';
 import LoaderHTMLView from '../../views/htmls/loaders/LoaderHTMLView';
 
-export default class MainHTML {
-    public static Init(): void {
-        MainHTML._GenerateViews();
+class MainHTML {
+    private _views: HTMLViewBase[] = [];
+
+    public init(): void {
+        this._generateViews();
     }
 
-    private static _GenerateViews(): void {
-        ViewProxy.Add(ViewId.HTML_LOADER, LoaderHTMLView);
+    private _generateViews(): void {
+        this._views.push(new LoaderHTMLView());
     }
 }
+
+export default new MainHTML();

package/template-vanilla/src/experiences/engines/threes/LoaderThree.ts

@@ -0,0 +1,39 @@
+import { DomUtils } from '@benjos/cookware';
+import { Scene } from 'three';
+import LoaderThreeCameraController from '../../cameras/threes/LoaderThreeCameraController';
+import { CameraId } from '../../constants/experiences/CameraId';
+import ThreeCameraControllerManager from '../../managers/threes/ThreeCameraControllerManager';
+import LoaderRenderer from '../../renderers/threes/LoaderRenderer';
+import LoaderThreeView from '../../views/threes/loaders/LoaderThreeView';
+import ThreeBase from './bases/ThreeBase';
+
+class LoaderThree extends ThreeBase {
+    constructor() {
+        super(DomUtils.GetLoader());
+    }
+
+    protected override _generateScenes(): void {
+        this._scene = new Scene();
+    }
+
+    protected override _generateCameras(): void {
+        ThreeCameraControllerManager.add(new LoaderThreeCameraController());
+        this._cameraController = ThreeCameraControllerManager.get(CameraId.THREE_LOADER);
+    }
+
+    protected override _generateRenderers(): void {
+        this._renderer = new LoaderRenderer(
+            this._scene,
+            ThreeCameraControllerManager.get(CameraId.THREE_LOADER).camera
+        );
+        this._domElementContainer.appendChild(this._renderer.domElement);
+    }
+
+    protected override _generateViews(): void {
+        const loaderThreeView = new LoaderThreeView();
+        this._views.push(loaderThreeView);
+        this._setCurrentView(loaderThreeView);
+    }
+}
+
+export default new LoaderThree();

package/template-vanilla/src/experiences/engines/threes/MainThree.ts

@@ -1,36 +1,16 @@
-import { DomUtils } from '@benjos/cookware';
+import { DomKeyboardManager, DomUtils } from '@benjos/cookware';
 import { KeyboardConstant } from '@benjos/spices';
 import { MeshStandardMaterial, Scene } from 'three';
-import type ThreeCameraControllerBase from '../../cameras/threes/bases/ThreeCameraControllerBase';
 import DebugThreeCameraController from '../../cameras/threes/DebugThreeCameraController';
-import LoaderThreeCameraController from '../../cameras/threes/LoaderThreeCameraController';
 import MainThreeCameraController from '../../cameras/threes/MainThreeCameraController';
 import { CameraId } from '../../constants/experiences/CameraId';
-import { ViewId } from '../../constants/experiences/ViewId';
 import DebugManager from '../../managers/DebugManager';
-import { KeyboardManager } from '../../managers/KeyboardManager';
-import { ResizeManager } from '../../managers/ResizeManager';
 import ThreeCameraControllerManager from '../../managers/threes/ThreeCameraControllerManager';
-import TickerManager from '../../managers/TickerManager';
-import ViewProxy from '../../proxies/ViewProxy';
-import WebGLRendererBase from '../../renderers/threes/bases/WebGLRendererBase';
-import LoaderRenderer from '../../renderers/threes/LoaderRenderer';
 import Renderer from '../../renderers/threes/Renderer';
-import LoaderThreeView from '../../views/threes/loaders/LoaderThreeView';
 import WorldThreeView from '../../views/threes/worlds/WorldThreeView';
+import ThreeBase from './bases/ThreeBase';
 
-export default class MainThree {
-    private static _DomElementContainer: HTMLElement;
-    private static _LoaderDomElementContainer: HTMLElement;
-    private static _Scene: Scene;
-    private static _LoaderScene: Scene;
-    private static _CameraController: ThreeCameraControllerBase;
-    private static _Renderer: Renderer;
-    private static _LoaderRenderer: WebGLRendererBase;
-    private static _DebugWireframeMaterial: MeshStandardMaterial;
-
-    //#region Constants
-    //
+class MainThree extends ThreeBase {
     private static readonly _DEBUG_WIREFRAME_MATERIAL_COLOR: number = 0x3f79f3;
     private static readonly _TOGGLE_SWITCH_TO_DEBUG_CAMERA_KEYS: string[] = [
         KeyboardConstant.CODES.SHIFT_LEFT,
@@ -40,132 +20,77 @@ export default class MainThree {
         KeyboardConstant.CODES.SHIFT_LEFT,
         KeyboardConstant.CODES.KEY_W,
     ];
-    //
-    //#endregion
-
-    public static Init(): void {
-        TickerManager.Add(MainThree.Update);
-
-        MainThree._DomElementContainer = DomUtils.getApp();
-        MainThree._LoaderDomElementContainer = DomUtils.getLoader();
 
-        MainThree._GenerateScenes();
-        MainThree._GenerateCameras();
-        MainThree._GenerateRenderers();
+    declare private _debugWireframeMaterial: MeshStandardMaterial;
 
-        MainThree._OnResize();
-        ResizeManager.OnResize.add(MainThree._OnResize);
+    constructor() {
+        super(DomUtils.GetApp());
+    }
 
-        MainThree._GenerateViews();
+    public override init(): void {
+        super.init();
 
-        if (DebugManager.IsActive) {
-            window.experience = MainThree;
-            KeyboardManager.OnKeyUp.add(MainThree._OnKeyUp);
+        if (DebugManager.isActive) {
+            window.mainThree = this;
+            DomKeyboardManager.onKeyDown.add(this._onKeyDown);
         }
     }
 
-    private static _GenerateScenes(): void {
-        MainThree._Scene = new Scene();
-        MainThree._LoaderScene = new Scene();
+    protected override _generateScenes(): void {
+        this._scene = new Scene();
 
-        if (DebugManager.IsActive) {
-            MainThree._DebugWireframeMaterial = new MeshStandardMaterial({
+        if (DebugManager.isActive) {
+            this._debugWireframeMaterial = new MeshStandardMaterial({
                 wireframe: true,
                 color: MainThree._DEBUG_WIREFRAME_MATERIAL_COLOR,
             });
         }
     }
 
-    private static _GenerateViews(): void {
-        ViewProxy.Add(ViewId.THREE_LOADER, LoaderThreeView);
-        ViewProxy.Add(ViewId.THREE_WORLD, WorldThreeView);
-    }
-
-    private static _GenerateCameras(): void {
-        ThreeCameraControllerManager.Add(new MainThreeCameraController(), true);
-        ThreeCameraControllerManager.Add(new LoaderThreeCameraController());
-        MainThree._CameraController = ThreeCameraControllerManager.Get(CameraId.THREE_MAIN);
+    protected override _generateCameras(): void {
+        ThreeCameraControllerManager.add(new MainThreeCameraController(), true);
+        this._cameraController = ThreeCameraControllerManager.get(CameraId.THREE_MAIN);
 
-        if (DebugManager.IsActive) {
-            ThreeCameraControllerManager.Add(new DebugThreeCameraController());
+        if (DebugManager.isActive) {
+            ThreeCameraControllerManager.add(new DebugThreeCameraController());
         }
 
-        ThreeCameraControllerManager.OnActiveThreeCameraControllerChange.add(MainThree._OnActiveCameraControllerChange);
+        ThreeCameraControllerManager.onActiveThreeCameraControllerChange.add(this._onActiveCameraControllerChange);
     }
 
-    private static _GenerateRenderers(): void {
-        MainThree._Renderer = new Renderer(MainThree.Scene, MainThree._CameraController.camera, { antialias: true });
-        MainThree._DomElementContainer.appendChild(MainThree._Renderer.domElement);
+    protected override _generateRenderers(): void {
+        this._renderer = new Renderer(this._scene, this._cameraController.camera, { antialias: true });
+        this._domElementContainer.appendChild(this._renderer.domElement);
+    }
 
-        MainThree._LoaderRenderer = new LoaderRenderer(
-            MainThree.LoaderScene,
-            ThreeCameraControllerManager.Get(CameraId.THREE_LOADER).camera
-        );
-        MainThree._LoaderDomElementContainer.appendChild(MainThree._LoaderRenderer.domElement);
+    protected override _generateViews(): void {
+        const worldThreeView = new WorldThreeView();
+        this._views.push(worldThreeView);
+        this._setCurrentView(worldThreeView);
     }
 
-    private static _OnActiveCameraControllerChange = (): void => {
-        MainThree._CameraController = ThreeCameraControllerManager.ActiveThreeCameraController;
-        MainThree._Renderer.setCamera(MainThree._CameraController.camera);
-        MainThree._OnResize();
+    private _onActiveCameraControllerChange = (): void => {
+        this._cameraController = ThreeCameraControllerManager.activeThreeCameraController;
+        this._renderer.setCamera(this._cameraController.camera);
+        this._onResize();
     };
 
-    private static readonly _OnKeyUp = (_e: KeyboardEvent): void => {
-        if (DebugManager.IsActive) {
-            if (KeyboardManager.AreAllKeysDown(MainThree._TOGGLE_SWITCH_TO_DEBUG_CAMERA_KEYS)) {
-                ThreeCameraControllerManager.SetActiveCamera(
-                    MainThree._CameraController.cameraId === CameraId.THREE_MAIN
-                        ? CameraId.THREE_DEBUG
-                        : CameraId.THREE_MAIN
+    private readonly _onKeyDown = (_e: KeyboardEvent): void => {
+        if (DebugManager.isActive) {
+            if (DomKeyboardManager.areAllKeysDown(MainThree._TOGGLE_SWITCH_TO_DEBUG_CAMERA_KEYS)) {
+                ThreeCameraControllerManager.setActiveCamera(
+                    this._cameraController.cameraId === CameraId.THREE_MAIN ? CameraId.THREE_DEBUG : CameraId.THREE_MAIN
                 );
-            } else if (KeyboardManager.AreAllKeysDown(MainThree._TOGGLE_WIREFRAME_KEYS)) {
-                if (MainThree._Scene.overrideMaterial === null) {
-                    MainThree._Scene.overrideMaterial = MainThree._DebugWireframeMaterial;
-                    MainThree._LoaderScene.overrideMaterial = MainThree._DebugWireframeMaterial;
+            } else if (DomKeyboardManager.areAllKeysDown(MainThree._TOGGLE_WIREFRAME_KEYS)) {
+                if (this._scene.overrideMaterial === null) {
+                    this._scene.overrideMaterial = this._debugWireframeMaterial;
                 } else {
-                    MainThree._Scene.overrideMaterial = null;
-                    MainThree._LoaderScene.overrideMaterial = null;
+                    this._scene.overrideMaterial = null;
                 }
             }
         }
     };
-
-    private static _OnResize = (): void => {
-        MainThree._Renderer.domElement.width = window.innerWidth;
-        MainThree._Renderer.domElement.height = window.innerHeight;
-
-        MainThree._LoaderRenderer.domElement.width = window.innerWidth;
-        MainThree._LoaderRenderer.domElement.height = window.innerHeight;
-
-        MainThree._CameraController.resize();
-        MainThree._Renderer.resize();
-        MainThree._LoaderRenderer.resize();
-    };
-
-    public static Update = (dt: number): void => {
-        MainThree._CameraController.update(dt);
-        if (ViewProxy.Has(ViewId.THREE_WORLD)) ViewProxy.GetById<WorldThreeView>(ViewId.THREE_WORLD).update(dt);
-        MainThree._Renderer.update(dt);
-        MainThree._LoaderRenderer.update(dt);
-    };
-
-    //#region Getters
-    //
-    public static get DomElementContainer(): HTMLElement {
-        return this._DomElementContainer;
-    }
-    public static get Scene(): Scene {
-        return this._Scene;
-    }
-    public static get LoaderScene(): Scene {
-        return this._LoaderScene;
-    }
-    public static get Renderer(): WebGLRendererBase {
-        return this._Renderer;
-    }
-    public static get CameraController(): ThreeCameraControllerBase {
-        return this._CameraController;
-    }
-    //
-    //#endregion
 }
+
+export type { MainThree };
+export default new MainThree();

package/template-vanilla/src/experiences/engines/threes/bases/ThreeBase.ts

@@ -0,0 +1,90 @@
+import { DomResizeManager, TickerManager } from '@benjos/cookware';
+import { Scene } from 'three';
+import ThreeCameraControllerBase from '../../../cameras/threes/bases/ThreeCameraControllerBase';
+import WebGLRendererBase from '../../../renderers/threes/bases/WebGLRendererBase';
+import ThreeViewBase from '../../../views/threes/bases/ThreeViewBase';
+
+export default abstract class ThreeBase {
+    declare protected _domElementContainer: HTMLElement;
+    declare protected _scene: Scene;
+    declare protected _cameraController: ThreeCameraControllerBase;
+    declare protected _renderer: WebGLRendererBase;
+    protected readonly _views: ThreeViewBase[];
+    declare protected _currentView: ThreeViewBase;
+
+    constructor(domElementContainer: HTMLElement) {
+        this._domElementContainer = domElementContainer;
+        this._views = [];
+    }
+
+    public init(): void {
+        TickerManager.add(this._update);
+
+        this._generateScenes();
+        this._generateCameras();
+        this._generateRenderers();
+        this._generateViews();
+
+        this._onResize();
+        DomResizeManager.onResize.add(this._onResize);
+    }
+
+    protected _generateScenes(): void {
+        //
+    }
+
+    protected _generateCameras(): void {
+        //
+    }
+
+    protected _generateRenderers(): void {
+        //
+    }
+
+    protected _generateViews(): void {
+        //
+    }
+
+    protected _setCurrentView(view: ThreeViewBase): void {
+        if (this._currentView === view) return;
+        if (this._currentView) this._removeOldView(this._currentView);
+        this._currentView = view;
+        this.scene.add(this._currentView);
+    }
+
+    private _removeOldView(view: ThreeViewBase): void {
+        this.scene.remove(view);
+        view.dispose();
+    }
+
+    protected _onResize = (): void => {
+        this._renderer.domElement.width = window.innerWidth;
+        this._renderer.domElement.height = window.innerHeight;
+
+        this._cameraController.resize();
+        this._renderer.resize();
+    };
+
+    private _update = (dt: number): void => {
+        this._cameraController.update(dt);
+        this._currentView.update(dt);
+        this._renderer.update(dt);
+    };
+
+    //#region Getters
+    //
+    public get domElementContainer(): HTMLElement {
+        return this._domElementContainer;
+    }
+    public get scene(): Scene {
+        return this._scene;
+    }
+    public get renderer(): WebGLRendererBase {
+        return this._renderer;
+    }
+    public get cameraController(): ThreeCameraControllerBase {
+        return this._cameraController;
+    }
+    //
+    //#endregion
+}

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

@@ -1,15 +1,10 @@
+import { DomKeyboardManager } from '@benjos/cookware';
 import { KeyboardConstant } from '@benjos/spices';
 import GUI from 'lil-gui';
 import { ThreePerf } from 'three-perf';
 import MainThree from '../engines/threes/MainThree';
-import { KeyboardManager } from './KeyboardManager';
 
-export default class DebugManager {
-    private static _Gui: GUI;
-    private static _ThreePerf: ThreePerf;
-
-    //#region Constants
-    //
+class DebugManager {
     private static readonly _IS_ACTIVE_STRING: string = '#debug';
     private static readonly _GUI_WIDTH: number = 300;
     private static readonly _GUI_TITLE: string = 'Debug Panel';
@@ -19,60 +14,63 @@ export default class DebugManager {
         KeyboardConstant.CODES.SHIFT_LEFT,
         KeyboardConstant.CODES.KEY_H,
     ];
-    //
-    //#endregion
 
-    public static Init(): void {
-        if (DebugManager.IsActive) {
-            DebugManager._InitGui();
+    declare private _gui: GUI;
+    declare private _threePerf: ThreePerf;
+
+    public init(): void {
+        if (this.isActive) {
+            this._initGui();
         }
     }
 
-    private static _InitGui(): void {
-        DebugManager._Gui = new GUI({
+    private _initGui(): void {
+        this._gui = new GUI({
             width: DebugManager._GUI_WIDTH,
             title: DebugManager._GUI_TITLE,
             closeFolders: true,
         });
-        DebugManager._Gui.close();
-        KeyboardManager.OnKeyUp.remove(DebugManager._OnKeyUp);
-        KeyboardManager.OnKeyUp.add(DebugManager._OnKeyUp);
+        this._gui.close();
+        DomKeyboardManager.onKeyDown.remove(this._onKeyDown);
+        DomKeyboardManager.onKeyDown.add(this._onKeyDown);
     }
 
-    private static _InitThreePerf = (): void => {
-        DebugManager._ThreePerf = new ThreePerf({
+    private _initThreePerf = (): void => {
+        this._threePerf = new ThreePerf({
             anchorX: DebugManager._THREE_PERF_ANCHOR_X,
             anchorY: DebugManager._THREE_PERF_ANCHOR_Y,
             domElement: document.body,
-            renderer: MainThree.Renderer,
+            renderer: MainThree.renderer,
             showGraph: false,
         });
     };
 
-    public static BeginThreePerf(): void {
-        if (!DebugManager._ThreePerf) DebugManager._InitThreePerf();
-        DebugManager._ThreePerf.begin();
+    public beginThreePerf(): void {
+        if (!this._threePerf) this._initThreePerf();
+        this._threePerf.begin();
     }
 
-    public static EndThreePerf(): void {
-        DebugManager._ThreePerf.end();
+    public endThreePerf(): void {
+        this._threePerf.end();
     }
 
-    private static readonly _OnKeyUp = (_e: KeyboardEvent): void => {
-        if (KeyboardManager.AreAllKeysDown(DebugManager._TOGGLE_HIDDEN_KEYS)) {
-            DebugManager._Gui.show(DebugManager._Gui._hidden);
-            DebugManager._ThreePerf.visible = !DebugManager._ThreePerf.visible;
+    private readonly _onKeyDown = (_e: KeyboardEvent): void => {
+        if (DomKeyboardManager.areAllKeysDown(DebugManager._TOGGLE_HIDDEN_KEYS)) {
+            this._gui.show(this._gui._hidden);
+            this._threePerf.visible = !this._threePerf.visible;
         }
     };
 
     //#region Getters
     //
-    public static get IsActive(): boolean {
+    public get isActive(): boolean {
         return window.location.hash === DebugManager._IS_ACTIVE_STRING;
     }
-    public static get Gui(): GUI {
-        return DebugManager._Gui;
+    public get gui(): GUI {
+        return this._gui;
     }
     //
     //#endregion
 }
+
+export default new DebugManager();