@benjos/create-boilerplate 1.0.0 → 1.0.3

package/template-vanilla/src/experiences/views/bases/ViewBase.ts

@@ -0,0 +1,25 @@
+import type { ViewId } from '../../constants/experiences/ViewId';
+
+export default class ViewBase {
+    private readonly _id: ViewId;
+
+    constructor(id: ViewId) {
+        this._id = id;
+    }
+
+    protected _show(): void {
+        //
+    }
+
+    protected _hide(): void {
+        //
+    }
+
+    //#region Getters
+    //
+    public get id(): ViewId {
+        return this._id;
+    }
+    //
+    //#endregion
+}

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

@@ -0,0 +1,41 @@
+import { DomEvent } from '../../../constants/doms/DomEvent';
+import type { ViewId } from '../../../constants/experiences/ViewId';
+import DomUtils from '../../../utils/DomUtils';
+import ViewBase from '../../bases/ViewBase';
+
+export default abstract class HTMLViewBase extends ViewBase {
+    private readonly _parentElement: HTMLElement;
+    protected readonly _htmlContainer: HTMLDivElement;
+
+    constructor(id: ViewId, parentElement: HTMLElement = DomUtils.GetApp()) {
+        super(id);
+        this._parentElement = parentElement;
+        this._htmlContainer = document.createElement('div');
+        this._htmlContainer.classList.add('view-html-container');
+
+        this._htmlContainer.addEventListener(DomEvent.ANIMATION_END, this._onAnimationEnd);
+    }
+
+    protected override _show(): void {
+        super._show();
+        this._parentElement.appendChild(this._htmlContainer);
+        this._htmlContainer.classList.remove('hide');
+        requestAnimationFrame(this._onShow);
+    }
+
+    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');
+    }
+
+    private readonly _onAnimationEnd = (event: AnimationEvent): void => {
+        if (event.animationName === 'hideView') {
+            this._parentElement.removeChild(this._htmlContainer);
+        }
+    };
+}

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

@@ -0,0 +1,34 @@
+import { ViewId } from '../../../constants/experiences/ViewId';
+import LoaderManager from '../../../managers/LoaderManager';
+import DomUtils from '../../../utils/DomUtils';
+import HTMLViewBase from '../bases/HTMLViewBase';
+import HTMLTemplateLoader from './components/HTMLTemplateLoader';
+
+export default class LoaderHTMLView extends HTMLViewBase {
+    declare private _htmlLoader: HTMLTemplateLoader;
+
+    constructor(id: ViewId) {
+        super(id, DomUtils.GetLoader());
+
+        this._generateLoader();
+
+        LoaderManager.OnBeginLoad.add(this._onBeginLoad);
+        LoaderManager.OnFinishLoad.add(this._onFinishLoad);
+    }
+
+    private _generateLoader(): void {
+        this._htmlLoader = new HTMLTemplateLoader();
+        this._htmlContainer.appendChild(this._htmlLoader.htmlElement);
+        DomUtils.GetLoader().appendChild(this._htmlContainer);
+    }
+
+    private readonly _onBeginLoad = (): void => {
+        this._show();
+        this._htmlLoader.show();
+    };
+
+    private readonly _onFinishLoad = (): void => {
+        this._htmlLoader.hide();
+        this._hide();
+    };
+}

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

@@ -0,0 +1,57 @@
+import LoaderManager from '../../../../managers/LoaderManager';
+
+export default class HTMLTemplateLoader {
+    declare private _htmlElement: HTMLDivElement;
+    declare private _loadingBar: HTMLDivElement;
+    declare private _loadingProgress: HTMLDivElement;
+    declare private _loadingNumber: HTMLSpanElement;
+
+    constructor() {
+        this._generateElement();
+
+        LoaderManager.OnProgress.add(this._onProgress);
+    }
+
+    private _generateElement(): void {
+        const wrapper = document.createElement('div');
+        wrapper.innerHTML = `
+            <div id="loading-screen" class="loading-screen">
+                <div class="loading-progress">
+                    <span class="loading-number">0</span><span>%</span>
+                </div>
+                <div class="loading-bar"></div>
+            </div>
+        `.trim();
+
+        this._htmlElement = wrapper.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 _onProgress = (): void => {
+        const progress = (LoaderManager.LoadedSize / LoaderManager.TotalSize) * 100;
+        this._loadingBar.style.transform = `translateY(-50%) scaleX(${progress / 100})`;
+        this._loadingNumber.textContent = Math.round(progress).toString();
+    };
+
+    public show(): void {
+        this._loadingNumber.textContent = '0';
+        this._loadingBar.style.transform = '';
+        this._loadingBar.classList.remove('ended');
+    }
+
+    public hide(): void {
+        this._loadingNumber.textContent = '100';
+        this._loadingBar.style.transform = '';
+        this._loadingBar.classList.add('ended');
+    }
+
+    //#region
+    //
+    public get htmlElement(): HTMLDivElement {
+        return this._htmlElement;
+    }
+    //
+    //#endregion
+}

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

@@ -0,0 +1,26 @@
+import { Object3D, Scene } from 'three';
+import type { ViewId } from '../../../constants/experiences/ViewId';
+import MainThree from '../../../engines/threes/MainThree';
+import ViewBase from '../../bases/ViewBase';
+
+export default abstract class ThreeViewBase extends ViewBase {
+    protected _scene: Scene;
+    protected _container: Object3D;
+
+    constructor(id: ViewId, scene: Scene = MainThree.Scene) {
+        super(id);
+
+        this._scene = scene;
+        this._container = new Object3D();
+    }
+
+    protected override _show(): void {
+        super._show();
+        this._scene.add(this._container);
+    }
+
+    protected override _hide(): void {
+        super._hide();
+        this._scene.remove(this._container);
+    }
+}

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

@@ -0,0 +1,41 @@
+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';
+
+export default class LoaderThreeView extends ThreeViewBase {
+    declare private _threeLoader: ThreeTemplateLoader;
+
+    constructor(id: ViewId) {
+        super(id, MainThree.LoaderScene);
+
+        this._generateLoader();
+
+        LoaderManager.OnBeginLoad.add(this._onBeginLoad);
+        LoaderManager.OnFinishLoad.add(this._onFinishLoad);
+    }
+
+    private _generateLoader(): void {
+        this._threeLoader = new ThreeTemplateLoader();
+
+        this._container.add(this._threeLoader);
+        this._scene.add(this._container);
+    }
+
+    protected override _show(): void {
+        this._threeLoader.material.show();
+    }
+
+    protected override _hide(): void {
+        this._threeLoader.material.hide();
+    }
+
+    private readonly _onBeginLoad = (): void => {
+        this._show();
+    };
+
+    private readonly _onFinishLoad = (): void => {
+        this._hide();
+    };
+}

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

@@ -0,0 +1,52 @@
+import { Mesh, Object3D, PlaneGeometry } from 'three';
+import LoaderMaterial from '../../../../materials/threes/loaders/LoaderMaterial';
+
+export default class ThreeTemplateLoader extends Object3D {
+    declare private _geometry: PlaneGeometry;
+    declare private _material: LoaderMaterial;
+    declare private _loader: Mesh;
+
+    //#region Constants
+    //
+    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
+
+    constructor() {
+        super();
+
+        this._generateGeometry();
+        this._generateMaterial();
+        this._generateMesh();
+
+        this.add(this._loader);
+    }
+
+    private _generateGeometry(): void {
+        this._geometry = new PlaneGeometry(
+            ThreeTemplateLoader._DEFAULT_SIZE_WIDTH,
+            ThreeTemplateLoader._DEFAULT_SIZE_HEIGHT,
+            ThreeTemplateLoader._DEFAULT_SEGMENTS_WIDTH,
+            ThreeTemplateLoader._DEFAULT_SEGMENTS_HEIGHT
+        );
+    }
+
+    private _generateMaterial(): void {
+        this._material = new LoaderMaterial();
+    }
+
+    private _generateMesh(): void {
+        this._loader = new Mesh(this._geometry, this._material);
+    }
+
+    //#region Getters
+    //
+    public get material(): LoaderMaterial {
+        return this._material;
+    }
+    //
+    //#endregion
+}

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

@@ -0,0 +1,51 @@
+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);
+    }
+
+    private readonly _onFinishLoad = (): void => {
+        this._generateEnvironment();
+        this._generateActors();
+
+        this._show();
+    };
+
+    private _generateEnvironment(): void {
+        if (this._environment) return;
+        this._environment = new Environment();
+
+        this._container.add(this._environment);
+    }
+
+    private _generateActors(): void {
+        if (this._actors.length > 0) return;
+        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);
+    }
+
+    public update(dt: number): void {
+        if (!this._environment) return;
+
+        this._environment.update(dt);
+        for (const actor of this._actors) actor.update(dt);
+    }
+}

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

@@ -0,0 +1,77 @@
+import { DataTexture, DirectionalLight, Object3D, Vector3 } from 'three';
+import { AssetId } from '../../../../constants/experiences/AssetId';
+import MainThree from '../../../../engines/threes/MainThree';
+import DebugManager from '../../../../managers/DebugManager';
+import ThreeAssetsManager from '../../../../managers/threes/ThreeAssetsManager';
+
+interface IEnvironmentMap {
+    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;
+    private static readonly _DEFAULT_SUN_SHADOW_CAMERA_FAR: number = 15;
+    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
+
+    constructor() {
+        super();
+
+        this._generateEnvironmentMap();
+        this._generateSunLight();
+    }
+
+    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.needsUpdate = true;
+
+        MainThree.Scene.environment = this._environmentMap.texture;
+        MainThree.Scene.environmentIntensity = this._environmentMap.intensity!;
+
+        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!;
+            });
+        }
+    };
+
+    private _generateSunLight(): void {
+        this._sunLight = new DirectionalLight(
+            Environment._DEFAULT_SUN_LIGHT_COLOR,
+            Environment._DEFAULT_SUN_LIGHT_INTENSITY
+        );
+        this._sunLight.castShadow = true;
+        this._sunLight.shadow.camera.far = Environment._DEFAULT_SUN_SHADOW_CAMERA_FAR;
+        this._sunLight.shadow.mapSize.set(
+            Environment._DEFAULT_SUN_SHADOW_MAP_SIZE,
+            Environment._DEFAULT_SUN_SHADOW_MAP_SIZE
+        );
+        this._sunLight.shadow.normalBias = Environment._DEFAULT_SUN_SHADOW_NORMAL_BIAS;
+        this._sunLight.position.copy(Environment._DEFAULT_SUN_POSITION);
+        this.add(this._sunLight);
+
+        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');
+            sunLightFolder.add(this._sunLight.position, 'z', -5, 5, 0.01).name('positionZ');
+        }
+    }
+
+    public update(_dt: number): void {}
+}

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

@@ -0,0 +1,62 @@
+import { Mesh, MeshStandardMaterial, type MeshStandardMaterialParameters } from 'three';
+import { TextGeometry, type TextGeometryParameters } from 'three/examples/jsm/Addons.js';
+import { AssetId } from '../../../../../constants/experiences/AssetId';
+import ThreeAssetsManager from '../../../../../managers/threes/ThreeAssetsManager';
+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!,
+        size: 0.25,
+        depth: 0.01,
+        curveSegments: 5,
+        bevelEnabled: true,
+        bevelThickness: 0.03,
+        bevelSize: 0.02,
+        bevelOffset: 0,
+        bevelSegments: 4,
+    };
+    private static readonly _DEFAULT_MATERIAL_OPTION: MeshStandardMaterialParameters = {
+        color: 0xffffff,
+        metalness: 0.7,
+        roughness: 0.2,
+        envMapIntensity: 0,
+    };
+    private static readonly _DEFAULT_MESH_POSITION_Y = 3;
+    //
+    //#endregion
+
+    constructor() {
+        super();
+
+        this._generateGeometry();
+        this._generateMaterial();
+        this._generateMesh();
+    }
+
+    private _generateGeometry(): void {
+        this._geometry = new TextGeometry(TemplateFont._DEFAULT_TEXT, {
+            ...TemplateFont._DEFAULT_TEXT_OPTION,
+            font: ThreeAssetsManager.GetFont(AssetId.THREE_FONT_TEMPLATE),
+        });
+        this._geometry.center();
+    }
+
+    private _generateMaterial(): void {
+        this._material = new MeshStandardMaterial(TemplateFont._DEFAULT_MATERIAL_OPTION);
+    }
+
+    private _generateMesh(): void {
+        this._mesh = new Mesh(this._geometry, this._material);
+        this._mesh.position.y = TemplateFont._DEFAULT_MESH_POSITION_Y;
+
+        this.add(this._mesh);
+    }
+}

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

@@ -0,0 +1,65 @@
+import { Mesh, MeshStandardMaterial, RepeatWrapping, SphereGeometry, type MeshStandardMaterialParameters } from 'three';
+import { AssetId } from '../../../../../constants/experiences/AssetId';
+import ThreeAssetsManager from '../../../../../managers/threes/ThreeAssetsManager';
+import ActorBase from './bases/ActorBase';
+
+export default class TemplateMesh extends ActorBase {
+    declare private _geometry: SphereGeometry;
+    declare private _material: MeshStandardMaterial;
+    declare private _mesh: Mesh;
+
+    //#region Constants
+    //
+    private static readonly _DEFAULT_GEOMETRY_RADIUS = 1;
+    private static readonly _DEFAULT_GEOMETRY_WIDTH_SEGMENTS = 64;
+    private static readonly _DEFAULT_GEOMETRY_HEIGHT_SEGMENTS = 64;
+    private static readonly _DEFAULT_MATERIAL_REPEAT = 1.5;
+    private static readonly _DEFAULT_MATERIAL_OPTIONS: MeshStandardMaterialParameters = {
+        color: 0xffffff,
+        metalness: 0.7,
+        roughness: 0.2,
+        envMapIntensity: 0,
+    };
+    private static readonly _MESH_ROTATION_Y = 0.25;
+    //
+    //#endregion
+
+    constructor() {
+        super();
+
+        this._generateGeometry();
+        this._generateMaterial();
+        this._generateMesh();
+    }
+
+    private _generateGeometry(): void {
+        this._geometry = new SphereGeometry(
+            TemplateMesh._DEFAULT_GEOMETRY_RADIUS,
+            TemplateMesh._DEFAULT_GEOMETRY_WIDTH_SEGMENTS,
+            TemplateMesh._DEFAULT_GEOMETRY_HEIGHT_SEGMENTS
+        );
+    }
+
+    private _generateMaterial(): void {
+        const normalMat = ThreeAssetsManager.GetTexture(AssetId.THREE_TEXTURE_TEMPLATE);
+        normalMat.repeat.set(TemplateMesh._DEFAULT_MATERIAL_REPEAT, TemplateMesh._DEFAULT_MATERIAL_REPEAT);
+        normalMat.wrapS = normalMat.wrapT = RepeatWrapping;
+
+        this._material = new MeshStandardMaterial({
+            ...TemplateMesh._DEFAULT_MATERIAL_OPTIONS,
+            normalMap: normalMat,
+        });
+    }
+
+    private _generateMesh(): void {
+        this._mesh = new Mesh(this._geometry, this._material);
+        this._mesh.castShadow = true;
+        this._mesh.receiveShadow = true;
+        this.add(this._mesh);
+    }
+
+    public update(dt: number): void {
+        super.update(dt);
+        this._mesh.rotation.y += dt * TemplateMesh._MESH_ROTATION_Y;
+    }
+}

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

@@ -0,0 +1,31 @@
+import { Vector3 } from 'three';
+import { AssetId } from '../../../../../constants/experiences/AssetId';
+import DebugManager from '../../../../../managers/DebugManager';
+import ModelBase from './bases/ModelBase';
+
+export default class TemplateModel extends ModelBase {
+    //#region Constants
+    //
+    private static readonly _DEFAULT_POSITION: Vector3 = new Vector3(0, 1, 0);
+    private static readonly _ROTATION_Y = 0.25;
+    //
+    //#endregion
+
+    constructor() {
+        super(AssetId.THREE_GLTF_TEMPLATE, {
+            castShadow: true,
+            receiveShadow: true,
+        });
+        this.position.copy(TemplateModel._DEFAULT_POSITION);
+
+        if (DebugManager.IsActive) {
+            const templateModelFolder = DebugManager.Gui.addFolder('Template Model');
+            templateModelFolder.add(this.position, 'y', -1, 1, 0.01);
+        }
+    }
+
+    public update(dt: number): void {
+        super.update(dt);
+        this.rotation.y += dt * TemplateModel._ROTATION_Y;
+    }
+}

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

@@ -0,0 +1,9 @@
+import { Object3D } from 'three';
+
+export default abstract class ActorBase extends Object3D {
+    constructor() {
+        super();
+    }
+
+    public update(_dt: number): void {}
+}

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

@@ -0,0 +1,67 @@
+import { AnimationAction, AnimationMixer } from 'three';
+import type { AnimationId } from '../../../../../../constants/experiences/AnimationId';
+import type { AssetId } from '../../../../../../constants/experiences/AssetId';
+import ThreeAssetsManager from '../../../../../../managers/threes/ThreeAssetsManager';
+import ModelBase, { type IModelBaseParams } from './ModelBase';
+
+export default abstract class AnimatedModelBase extends ModelBase {
+    declare private _mixer: AnimationMixer;
+    declare private _actions: AnimationAction[];
+    declare private _currentAction: AnimationAction | null;
+
+    //#region Constants
+    //
+    private static readonly _DEFAULT_ANIMATION_FADE_DURATION: number = 1;
+    //
+    //#endregion
+
+    constructor(assetId: AssetId, params: IModelBaseParams = {}) {
+        super(assetId, params);
+
+        this._generateAnimations();
+    }
+
+    protected _generateAnimations(): void {
+        const animations = ThreeAssetsManager.GetModel(this._assetId).animations;
+        this._mixer = new AnimationMixer(this._model);
+        this._actions = [];
+        this._currentAction = null;
+
+        for (const clip of animations) {
+            const action = this._mixer.clipAction(clip);
+            this._addAnimationAction(action);
+        }
+    }
+
+    private _addAnimationAction(action: AnimationAction): void {
+        this._actions.push(action);
+    }
+
+    protected _playAnimation = (
+        animationId: AnimationId,
+        fadeDuration: number = AnimatedModelBase._DEFAULT_ANIMATION_FADE_DURATION
+    ): void => {
+        if (!this._actions) return;
+        const newAction = this._getAnimationAction(animationId);
+        const oldAction = this._currentAction ?? null;
+
+        newAction.reset();
+        newAction.play();
+        if (oldAction) newAction.crossFadeFrom(oldAction, fadeDuration);
+        this._currentAction = newAction;
+    };
+
+    private _getAnimationAction = (animationId: AnimationId): AnimationAction => {
+        for (const action of this._actions) {
+            if (action.getClip().name === animationId) {
+                return action;
+            }
+        }
+        throw new Error(`Animation action not found for animationId: ${animationId}`);
+    };
+
+    public update(dt: number): void {
+        super.update(dt);
+        if (this._mixer) this._mixer.update(dt);
+    }
+}