@benjos/create-boilerplate 1.3.5 → 1.4.0

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

@@ -20,16 +20,12 @@ import DebugManager from '../../managers/DebugManager';
 import WebGLRendererBase from './bases/WebGLRendererBase';
 
 export default class Renderer extends WebGLRendererBase {
-    //#region Constants
-    //
     private static readonly _DEFAULT_TONE_MAPPING = CineonToneMapping;
     private static readonly _DEFAULT_OUTPUT_COLOR_SPACE = SRGBColorSpace;
     private static readonly _DEFAULT_SHADOW_MAP_TYPE = PCFSoftShadowMap;
     private static readonly _DEFAULT_TONE_MAPPING_EXPOSURE = 1;
     private static readonly _DEFAULT_CLEAR_COLOR = 0xfafafa;
     private static readonly _DEFAULT_CLEAR_ALPHA = 0;
-    //
-    //#endregion
 
     constructor(scene: Scene, camera: Camera, parameters: WebGLRendererParameters = {}) {
         super(scene, camera, parameters);
@@ -40,8 +36,8 @@ export default class Renderer extends WebGLRendererBase {
         this.shadowMap.type = Renderer._DEFAULT_SHADOW_MAP_TYPE;
         this.setClearColor(Renderer._DEFAULT_CLEAR_COLOR, Renderer._DEFAULT_CLEAR_ALPHA);
 
-        if (DebugManager.IsActive) {
-            const rendererFolder = DebugManager.Gui.addFolder('Renderer');
+        if (DebugManager.isActive) {
+            const rendererFolder = DebugManager.gui.addFolder('Renderer');
             rendererFolder
                 .add(this, 'toneMapping', {
                     NoToneMapping,
@@ -66,9 +62,9 @@ export default class Renderer extends WebGLRendererBase {
     }
 
     public override update(dt: number): void {
-        const isDebug = DebugManager.IsActive;
-        if (isDebug) DebugManager.BeginThreePerf();
+        const isDebug = DebugManager.isActive;
+        if (isDebug) DebugManager.beginThreePerf();
         super.update(dt);
-        if (isDebug) DebugManager.EndThreePerf();
+        if (isDebug) DebugManager.endThreePerf();
     }
 }

package/template-vanilla/src/experiences/renderers/threes/bases/WebGLRendererBase.ts

@@ -1,5 +1,5 @@
+import { DomResizeManager } from '@benjos/cookware';
 import { Camera, Scene, WebGLRenderer, type WebGLRendererParameters } from 'three';
-import { ResizeManager } from '../../../managers/ResizeManager';
 
 export default abstract class WebGLRendererBase extends WebGLRenderer {
     private readonly _scene: Scene;
@@ -19,8 +19,8 @@ export default abstract class WebGLRendererBase extends WebGLRenderer {
     }
 
     public resize(): void {
-        this.setSize(ResizeManager.Width, ResizeManager.Height);
-        this.setPixelRatio(ResizeManager.PixelRatio);
+        this.setSize(DomResizeManager.width, DomResizeManager.height);
+        this.setPixelRatio(DomResizeManager.pixelRatio);
     }
 
     public update(_dt: number): void {

package/template-vanilla/src/experiences/styles/commons/main.scss

@@ -16,13 +16,13 @@ body {
     padding: 0;
     overflow: hidden;
 
-    > #app,
-    > #root {
+    >#app,
+    >#root {
         position: relative;
         width: 100%;
         height: 100%;
 
-        > #loader {
+        >#loader {
             position: absolute;
             top: 0;
             left: 0;
@@ -37,7 +37,7 @@ body {
             height: 100%;
         }
 
-        .view-html-container {
+        .html-view {
             position: absolute;
             top: 0;
             left: 0;
@@ -60,7 +60,7 @@ body {
                 }
             }
 
-            &.hide {
+            &.hidden {
                 opacity: 1;
                 animation: hideView $viewTransition ease forwards;
 
@@ -81,4 +81,4 @@ body {
     #three-perf-ui {
         z-index: 999999;
     }
-}
+}

package/template-vanilla/src/experiences/styles/style.scss

@@ -4,4 +4,4 @@
 @use './commons/texts.scss';
 @use './commons/fonts.scss';
 
-@use './views/loader.scss';
+@use './views/loader.scss';

package/template-vanilla/src/experiences/styles/views/loader.scss

@@ -3,11 +3,12 @@
 $outroFadeOutDuration: 1.5s;
 
 body {
-    > #app,
-    > #root {
-        > #loader {
-            .view-html-container {
-                &.hide {
+
+    >#app,
+    >#root {
+        >#loader {
+            .html-view {
+                &.hidden {
                     animation-duration: $outroFadeOutDuration;
                 }
             }
@@ -69,4 +70,4 @@ body {
             }
         }
     }
-}
+}

package/template-vanilla/src/experiences/types/cameraTypes.ts

@@ -0,0 +1,37 @@
+//#region Three
+//
+export const ThreeCameraType = {
+    PERSPECTIVE: 'PERSPECTIVE',
+    ORTHOGRAPHIC: 'ORTHOGRAPHIC',
+} as const;
+
+export type ThreeCameraType = (typeof ThreeCameraType)[keyof typeof ThreeCameraType];
+
+interface CameraOptionsBase {
+    near?: number;
+    far?: number;
+}
+
+interface PerspectiveCameraOptions extends CameraOptionsBase {
+    type: typeof ThreeCameraType.PERSPECTIVE;
+    fov?: number;
+    aspect?: number;
+}
+
+interface OrthographicCameraOptions extends CameraOptionsBase {
+    type: typeof ThreeCameraType.ORTHOGRAPHIC;
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+}
+
+export type ThreeCameraOptions = PerspectiveCameraOptions | OrthographicCameraOptions;
+
+export interface ThreeControls {
+    enabled: boolean;
+    update(delta?: number): void;
+    dispose(): void;
+}
+//
+//#endregion

package/template-vanilla/src/experiences/types/global.d.ts

@@ -1,10 +1,9 @@
-import type Experience from '../Experience';
+import { MainThree } from '../engines/threes/MainThree';
 
 declare global {
     interface Window {
-        experience: Experience;
+        mainThree: MainThree;
     }
 }
 
-export { };
-
+export {};

package/template-vanilla/src/experiences/types/shaders.d.ts

@@ -0,0 +1,4 @@
+declare module '*.glsl' {
+    const value: string;
+    export default value;
+}

package/template-vanilla/src/experiences/views/htmls/bases/HTMLViewBase.ts

@@ -1,42 +1,22 @@
-import { DomUtils } from '@benjos/cookware';
-import { DomEvent } from '@benjos/spices';
-import type { ViewId } from '../../../constants/experiences/ViewId';
-import { ViewType } from '../../../constants/experiences/ViewType';
-import ViewBase from '../../bases/ViewBase';
 
-export default abstract class HTMLViewBase extends ViewBase {
-    private readonly _parentElement: HTMLElement;
-    protected readonly _htmlContainer: HTMLDivElement;
+export default abstract class HTMLViewBase {
+    declare protected _htmlElement: HTMLDivElement;
 
-    constructor(id: ViewId, parentElement: HTMLElement = DomUtils.getApp()) {
-        super(id, ViewType.HTML);
-        this._parentElement = parentElement;
-        this._htmlContainer = document.createElement('div');
-        this._htmlContainer.classList.add('view-html-container');
-
-        this._htmlContainer.addEventListener(DomEvent.ANIMATION_END, this._onAnimationEnd);
+    constructor() {
+        this._getElement();
     }
 
-    protected override _show(): void {
-        super._show();
-        this._parentElement.appendChild(this._htmlContainer);
-        this._htmlContainer.classList.remove('hide');
-        requestAnimationFrame(this._onShow);
+    protected _getElement(): void {
+        //
     }
 
-    private readonly _onShow = (): void => {
-        this._htmlContainer.classList.add('show');
-    };
-
-    protected override _hide(): void {
-        super._hide();
-        this._htmlContainer.classList.remove('show');
-        this._htmlContainer.classList.add('hide');
+    public show(): void {
+        this._htmlElement.classList.add('show');
+        this._htmlElement.classList.remove('hidden');
     }
 
-    private readonly _onAnimationEnd = (event: AnimationEvent): void => {
-        if (event.animationName === 'hideView') {
-            this._parentElement.removeChild(this._htmlContainer);
-        }
-    };
+    public hide(): void {
+        this._htmlElement.classList.add('hidden');
+        this._htmlElement.classList.remove('show');
+    }
 }

package/template-vanilla/src/experiences/views/htmls/loaders/LoaderHTMLView.ts

@@ -1,34 +1,43 @@
 import { DomUtils } from '@benjos/cookware';
-import { ViewId } from '../../../constants/experiences/ViewId';
 import LoaderManager from '../../../managers/LoaderManager';
 import HTMLViewBase from '../bases/HTMLViewBase';
-import HTMLTemplateLoader from './components/HTMLTemplateLoader';
 
 export default class LoaderHTMLView extends HTMLViewBase {
-    declare private _htmlLoader: HTMLTemplateLoader;
+    declare private _loadingBar: HTMLDivElement;
+    declare private _loadingProgress: HTMLDivElement;
+    declare private _loadingNumber: HTMLSpanElement;
 
-    constructor(id: ViewId) {
-        super(id, DomUtils.getLoader());
-
-        this._generateLoader();
-
-        LoaderManager.OnBeginLoad.add(this._onBeginLoad);
-        LoaderManager.OnFinishLoad.add(this._onFinishLoad);
+    constructor() {
+        super();
+        LoaderManager.onBeginLoad.add(this._onBeginLoad);
+        LoaderManager.onProgress.add(this._onProgress);
+        LoaderManager.onFinishLoad.add(this._onFinishLoad);
     }
 
-    private _generateLoader(): void {
-        this._htmlLoader = new HTMLTemplateLoader();
-        this._htmlContainer.appendChild(this._htmlLoader.htmlElement);
-        DomUtils.getLoader().appendChild(this._htmlContainer);
+    protected override _getElement(): void {
+        this._htmlElement = DomUtils.GetLoader().querySelector('#loading-screen')!;
+        this._loadingProgress = this._htmlElement.querySelector('.loading-progress')!;
+        this._loadingNumber = this._loadingProgress.querySelector('.loading-number')!;
+        this._loadingBar = this._htmlElement.querySelector('.loading-bar')!;
     }
 
     private readonly _onBeginLoad = (): void => {
-        this._show();
-        this._htmlLoader.show();
+        this._loadingNumber.textContent = '0';
+        this._loadingBar.style.transform = '';
+        this._loadingBar.classList.remove('ended');
+        this.show();
+    };
+
+    private _onProgress = (): void => {
+        const progress = Math.min(LoaderManager.loadedSize / LoaderManager.totalSize, 1) * 100;
+        this._loadingBar.style.transform = `translateY(-50%) scaleX(${progress / 100})`;
+        this._loadingNumber.textContent = Math.round(progress).toString();
     };
 
     private readonly _onFinishLoad = (): void => {
-        this._htmlLoader.hide();
-        this._hide();
+        this._loadingNumber.textContent = '100';
+        this._loadingBar.style.transform = '';
+        this._loadingBar.classList.add('ended');
+        this.hide();
     };
 }

package/template-vanilla/src/experiences/views/threes/bases/ThreeViewBase.ts

@@ -1,27 +1,26 @@
-import { Object3D, Scene } from 'three';
-import type { ViewId } from '../../../constants/experiences/ViewId';
-import { ViewType } from '../../../constants/experiences/ViewType';
-import MainThree from '../../../engines/threes/MainThree';
-import ViewBase from '../../bases/ViewBase';
+import { Object3D } from 'three';
+import ActorBase from '../worlds/components/actors/bases/ActorBase';
 
-export default abstract class ThreeViewBase extends ViewBase {
-    protected _scene: Scene;
-    protected _container: Object3D;
+export default abstract class ThreeViewBase extends Object3D {
+    protected readonly _actors: ActorBase[];
 
-    constructor(id: ViewId, scene: Scene = MainThree.Scene) {
-        super(id, ViewType.THREE);
+    constructor() {
+        super();
 
-        this._scene = scene;
-        this._container = new Object3D();
+        this._actors = [];
     }
 
-    protected override _show(): void {
-        super._show();
-        this._scene.add(this._container);
+    protected _generateActors(): void {
+        //
     }
 
-    protected override _hide(): void {
-        super._hide();
-        this._scene.remove(this._container);
+    public dispose(): void {
+        for (const actor of this._actors) {
+            actor.dispose();
+        }
+    }
+
+    public update(dt: number): void {
+        //
     }
 }

package/template-vanilla/src/experiences/views/threes/loaders/LoaderThreeView.ts

@@ -1,5 +1,3 @@
-import { ViewId } from '../../../constants/experiences/ViewId';
-import MainThree from '../../../engines/threes/MainThree';
 import LoaderManager from '../../../managers/LoaderManager';
 import ThreeViewBase from '../bases/ThreeViewBase';
 import ThreeTemplateLoader from './components/ThreeTemplateLoader';
@@ -7,28 +5,26 @@ import ThreeTemplateLoader from './components/ThreeTemplateLoader';
 export default class LoaderThreeView extends ThreeViewBase {
     declare private _threeLoader: ThreeTemplateLoader;
 
-    constructor(id: ViewId) {
-        super(id, MainThree.LoaderScene);
-
-        this._isVisible = true;
-        this._generateLoader();
-
-        LoaderManager.OnBeginLoad.add(this._onBeginLoad);
-        LoaderManager.OnFinishLoad.add(this._onFinishLoad);
+    constructor() {
+        super();
+        this._generateActors();
+        LoaderManager.onBeginLoad.add(this._onBeginLoad);
+        LoaderManager.onFinishLoad.add(this._onFinishLoad);
     }
 
-    private _generateLoader(): void {
+    protected override _generateActors(): void {
+        super._generateActors();
         this._threeLoader = new ThreeTemplateLoader();
+        this._actors.push(this._threeLoader);
 
-        this._container.add(this._threeLoader);
-        this._scene.add(this._container);
+        for (const actor of this._actors) this.add(actor);
     }
 
-    protected override _show(): void {
+    protected _show(): void {
         this._threeLoader.material.show();
     }
 
-    protected override _hide(): void {
+    protected _hide(): void {
         this._threeLoader.material.hide();
     }
 

package/template-vanilla/src/experiences/views/threes/loaders/components/ThreeTemplateLoader.ts

@@ -1,19 +1,16 @@
-import { Mesh, Object3D, PlaneGeometry } from 'three';
+import { Mesh, PlaneGeometry } from 'three';
 import LoaderMaterial from '../../../../materials/threes/loaders/LoaderMaterial';
+import ActorBase from '../../worlds/components/actors/bases/ActorBase';
 
-export default class ThreeTemplateLoader extends Object3D {
-    declare private _geometry: PlaneGeometry;
-    declare private _material: LoaderMaterial;
-    declare private _loader: Mesh;
-
-    //#region Constants
-    //
+export default class ThreeTemplateLoader extends ActorBase {
     private static readonly _DEFAULT_SIZE_WIDTH: number = 2;
     private static readonly _DEFAULT_SIZE_HEIGHT: number = 2;
     private static readonly _DEFAULT_SEGMENTS_WIDTH: number = 1;
     private static readonly _DEFAULT_SEGMENTS_HEIGHT: number = 1;
-    //
-    //#endregion
+
+    declare private _geometry: PlaneGeometry;
+    declare private _material: LoaderMaterial;
+    declare private _mesh: Mesh;
 
     constructor() {
         super();
@@ -22,7 +19,7 @@ export default class ThreeTemplateLoader extends Object3D {
         this._generateMaterial();
         this._generateMesh();
 
-        this.add(this._loader);
+        this.add(this._mesh);
     }
 
     private _generateGeometry(): void {
@@ -39,7 +36,13 @@ export default class ThreeTemplateLoader extends Object3D {
     }
 
     private _generateMesh(): void {
-        this._loader = new Mesh(this._geometry, this._material);
+        this._mesh = new Mesh(this._geometry, this._material);
+    }
+
+    public override dispose(): void {
+        super.dispose();
+        this._geometry.dispose();
+        this._material.dispose();
     }
 
     //#region Getters

package/template-vanilla/src/experiences/views/threes/worlds/WorldThreeView.ts

@@ -1,48 +1,40 @@
-import { ViewId } from '../../../constants/experiences/ViewId';
 import LoaderManager from '../../../managers/LoaderManager';
 import ThreeViewBase from '../bases/ThreeViewBase';
 import Environment from './components/Environment';
 import TemplateFont from './components/actors/TemplateFont';
 import TemplateMesh from './components/actors/TemplateMesh';
 import TemplateModel from './components/actors/TemplateModel';
-import type ActorBase from './components/actors/bases/ActorBase';
 
 export default class WorldThreeView extends ThreeViewBase {
     declare private _environment: Environment;
-    private readonly _actors: ActorBase[];
 
-    constructor(id: ViewId) {
-        super(id);
-
-        this._actors = [];
-
-        LoaderManager.OnFinishLoad.add(this._onFinishLoad);
+    constructor() {
+        super();
+        LoaderManager.onFinishLoad.add(this._onFinishLoad);
     }
 
     private readonly _onFinishLoad = (): void => {
         this._generateEnvironment();
         this._generateActors();
-
-        this._show();
+        LoaderManager.onFinishLoad.remove(this._onFinishLoad);
     };
 
     private _generateEnvironment(): void {
-        if (this._environment) return;
         this._environment = new Environment();
 
-        this._container.add(this._environment);
+        this.add(this._environment);
     }
 
-    private _generateActors(): void {
-        if (this._actors.length > 0) return;
+    protected override _generateActors(): void {
+        super._generateActors();
         this._actors.push(new TemplateMesh());
         this._actors.push(new TemplateModel());
         this._actors.push(new TemplateFont());
 
-        for (const actor of this._actors) this._container.add(actor);
+        for (const actor of this._actors) this.add(actor);
     }
 
-    public update(dt: number): void {
+    public override update(dt: number): void {
         if (!this._environment) return;
 
         this._environment.update(dt);

package/template-vanilla/src/experiences/views/threes/worlds/components/Environment.ts

@@ -4,17 +4,12 @@ import MainThree from '../../../../engines/threes/MainThree';
 import DebugManager from '../../../../managers/DebugManager';
 import ThreeAssetsManager from '../../../../managers/threes/ThreeAssetsManager';
 
-interface IEnvironmentMap {
+interface EnvironmentMap {
     intensity?: number;
     texture?: DataTexture;
 }
 
 export default class Environment extends Object3D {
-    declare private _environmentMap: IEnvironmentMap;
-    declare private _sunLight: DirectionalLight;
-
-    //#region Constants
-    //
     private static readonly _DEFAULT_ENVIRONMENT_MAP_INTENSITY: number = 1;
     private static readonly _DEFAULT_SUN_LIGHT_COLOR: number = 0xffffff;
     private static readonly _DEFAULT_SUN_LIGHT_INTENSITY: number = 10;
@@ -22,8 +17,9 @@ export default class Environment extends Object3D {
     private static readonly _DEFAULT_SUN_SHADOW_MAP_SIZE: number = 1024;
     private static readonly _DEFAULT_SUN_SHADOW_NORMAL_BIAS: number = 0.05;
     private static readonly _DEFAULT_SUN_POSITION: Vector3 = new Vector3(0, 2, 1);
-    //
-    //#endregion
+
+    declare private _environmentMap: EnvironmentMap;
+    declare private _sunLight: DirectionalLight;
 
     constructor() {
         super();
@@ -35,16 +31,16 @@ export default class Environment extends Object3D {
     private _generateEnvironmentMap = (): void => {
         this._environmentMap = {};
         this._environmentMap.intensity = Environment._DEFAULT_ENVIRONMENT_MAP_INTENSITY;
-        this._environmentMap.texture = ThreeAssetsManager.GetHDR(AssetId.THREE_HDR_TEMPLATE);
+        this._environmentMap.texture = ThreeAssetsManager.getHDR(AssetId.THREE_HDR_TEMPLATE);
         this._environmentMap.texture.needsUpdate = true;
 
-        MainThree.Scene.environment = this._environmentMap.texture;
-        MainThree.Scene.environmentIntensity = this._environmentMap.intensity!;
+        MainThree.scene.environment = this._environmentMap.texture;
+        MainThree.scene.environmentIntensity = this._environmentMap.intensity!;
 
-        if (DebugManager.IsActive) {
-            const environmentFolder = DebugManager.Gui.addFolder('Environment');
+        if (DebugManager.isActive) {
+            const environmentFolder = DebugManager.gui.addFolder('Environment');
             environmentFolder.add(this._environmentMap, 'intensity', 0, 10, 0.01).onChange(() => {
-                MainThree.Scene.environmentIntensity = this._environmentMap.intensity!;
+                MainThree.scene.environmentIntensity = this._environmentMap.intensity!;
             });
         }
     };
@@ -64,8 +60,8 @@ export default class Environment extends Object3D {
         this._sunLight.position.copy(Environment._DEFAULT_SUN_POSITION);
         this.add(this._sunLight);
 
-        if (DebugManager.IsActive) {
-            const sunLightFolder = DebugManager.Gui.addFolder('Sun Light');
+        if (DebugManager.isActive) {
+            const sunLightFolder = DebugManager.gui.addFolder('Sun Light');
             sunLightFolder.add(this._sunLight, 'intensity', 0, 10, 0.01).name('intensity');
             sunLightFolder.add(this._sunLight.position, 'x', -5, 5, 0.01).name('positionX');
             sunLightFolder.add(this._sunLight.position, 'y', -5, 5, 0.01).name('positionY');

package/template-vanilla/src/experiences/views/threes/worlds/components/actors/TemplateFont.ts

@@ -5,12 +5,6 @@ import ThreeAssetsManager from '../../../../../managers/threes/ThreeAssetsManage
 import ActorBase from './bases/ActorBase';
 
 export default class TemplateFont extends ActorBase {
-    declare private _geometry: TextGeometry;
-    declare private _material: MeshStandardMaterial;
-    declare private _mesh: Mesh;
-
-    //#region Constants
-    //
     private static readonly _DEFAULT_TEXT: string = 'Hello boilerplate!';
     private static readonly _DEFAULT_TEXT_OPTION: TextGeometryParameters = {
         font: null!,
@@ -30,8 +24,10 @@ export default class TemplateFont extends ActorBase {
         envMapIntensity: 0,
     };
     private static readonly _DEFAULT_MESH_POSITION_Y = 3;
-    //
-    //#endregion
+
+    declare private _geometry: TextGeometry;
+    declare private _material: MeshStandardMaterial;
+    declare private _mesh: Mesh;
 
     constructor() {
         super();
@@ -44,7 +40,7 @@ export default class TemplateFont extends ActorBase {
     private _generateGeometry(): void {
         this._geometry = new TextGeometry(TemplateFont._DEFAULT_TEXT, {
             ...TemplateFont._DEFAULT_TEXT_OPTION,
-            font: ThreeAssetsManager.GetFont(AssetId.THREE_FONT_TEMPLATE),
+            font: ThreeAssetsManager.getFont(AssetId.THREE_FONT_TEMPLATE),
         });
         this._geometry.center();
     }
@@ -59,4 +55,10 @@ export default class TemplateFont extends ActorBase {
 
         this.add(this._mesh);
     }
+
+    public override dispose(): void {
+        super.dispose();
+        this._geometry.dispose();
+        this._material.dispose();
+    }
 }