@benjos/create-boilerplate 1.0.0 → 1.0.3

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

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

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

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

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

@@ -0,0 +1,48 @@
+import gsap from 'gsap';
+import { Color, ShaderMaterial } from 'three';
+import LoaderFragmentShader from '../../../shaders/threes/loaders/LoaderFragmentShader.glsl';
+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({
+            transparent: true,
+            uniforms: {
+                uAlpha: { value: LoaderMaterial._DEFAULT_UNIFORMS_ALPHA },
+                uColor: { value: new Color(LoaderMaterial._DEFAULT_UNIFORMS_COLOR) },
+            },
+            vertexShader: LoaderVertexShader,
+            fragmentShader: LoaderFragmentShader,
+        });
+    }
+
+    public show(): void {
+        gsap.killTweensOf(this.uniforms.uAlpha);
+        gsap.to(this.uniforms.uAlpha, {
+            value: 1,
+            duration: LoaderMaterial._GSAP_DURATION_FADE_IN,
+            ease: LoaderMaterial._GSAP_EASE_FADE_IN,
+        });
+    }
+
+    public hide(): void {
+        gsap.killTweensOf(this.uniforms.uAlpha);
+        this.uniforms.uAlpha.value = 1;
+        gsap.to(this.uniforms.uAlpha, {
+            value: 0,
+            duration: LoaderMaterial._GSAP_DURATION_FADE_OUT,
+            ease: LoaderMaterial._GSAP_EASE_FADE_OUT,
+        });
+    }
+}

package/template-vanilla/src/experiences/proxies/ViewProxy.ts

@@ -0,0 +1,30 @@
+import type { ViewId } from '../constants/experiences/ViewId';
+import type ViewBase from '../views/bases/ViewBase';
+
+type ViewConstructor<T extends ViewBase> = new (id: ViewId) => T;
+
+export default class ViewProxy {
+    private static _Views = new Map<ViewId, ViewBase>();
+
+    public static Init(): void {
+        //
+    }
+
+    public static Add(viewId: ViewId, ViewClass: ViewConstructor<ViewBase>): void {
+        if (ViewProxy._Views.has(viewId)) {
+            throw new Error(`ViewProxy: View with id "${viewId}" already exists.`);
+        }
+
+        ViewProxy._Views.set(viewId, new ViewClass(viewId));
+    }
+
+    public static GetById<T extends ViewBase = ViewBase>(viewId: ViewId): T {
+        const view = ViewProxy._Views.get(viewId);
+        if (!view) throw new Error(`ViewProxy: View with id "${viewId}" not found.`);
+        return view as T;
+    }
+
+    public static Has(viewId: ViewId): boolean {
+        return ViewProxy._Views.has(viewId);
+    }
+}

package/template-vanilla/src/experiences/proxies/bases/PoolProxyBase.ts

@@ -0,0 +1,61 @@
+type Constructor<T> = new () => T;
+
+export default abstract class PoolProxyBase<T = unknown> {
+    protected readonly _pool: Set<T> = new Set<T>();
+    private readonly _ctor: Constructor<T>;
+
+    //#region Constants
+    //
+    private static readonly _DEFAULT_INITIAL_SIZE: number = 0;
+    //
+    //#endregion
+
+    constructor(ctor: Constructor<T>, initialSize: number = PoolProxyBase._DEFAULT_INITIAL_SIZE) {
+        this._ctor = ctor;
+        this._prepopulate(initialSize);
+    }
+
+    private _prepopulate(number: number): void {
+        for (let i = 0; i < number; i++) {
+            this._pool.add(new this._ctor());
+        }
+    }
+
+    public get(): T {
+        if (this._pool.size > 0) {
+            const o = this._pool.values().next().value!;
+            this._pool.delete(o);
+            return o;
+        }
+
+        return new this._ctor();
+    }
+
+    public release(o: T): void {
+        this._pool.add(o);
+    }
+}
+
+//#region TEMPLATE USAGE
+//
+// class TemplatePoolProxy extends PoolProxyBase<TemplateObject> {
+//     constructor() {
+//         super(TemplateObject);
+//     }
+
+//     public override get(): TemplateObject {
+//         const o = super.get();
+//         // Do any additional initialization here if necessary
+//         return o;
+//     }
+
+//     public override release(o: TemplateObject): void {
+//         // Do any additional cleanup here if necessary
+//         super.release(o);
+//     }
+// }
+
+// const instance = new TemplatePoolProxy();
+// export { instance as TemplatePoolProxy };
+//
+//#endregion

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

@@ -0,0 +1,22 @@
+import { Camera, LinearSRGBColorSpace, NoToneMapping, Scene, type WebGLRendererParameters } from 'three';
+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);
+        this.toneMapping = LoaderRenderer._DEFAULT_TONE_MAPPING;
+        this.toneMappingExposure = LoaderRenderer._DEFAULT_TONE_MAPPING_EXPOSURE;
+        this.outputColorSpace = LoaderRenderer._DEFAULT_OUTPUT_COLOR_SPACE;
+        this.setClearColor(LoaderRenderer._DEFAULT_CLEAR_COLOR, LoaderRenderer._DEFAULT_CLEAR_ALPHA);
+    }
+}

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

@@ -0,0 +1,74 @@
+import {
+    ACESFilmicToneMapping,
+    AgXToneMapping,
+    Camera,
+    CineonToneMapping,
+    CustomToneMapping,
+    LinearSRGBColorSpace,
+    LinearToneMapping,
+    NeutralToneMapping,
+    NoToneMapping,
+    PCFSoftShadowMap,
+    ReinhardToneMapping,
+    Scene,
+    SRGBColorSpace,
+    type ColorSpace,
+    type ToneMapping,
+    type WebGLRendererParameters,
+} from 'three';
+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);
+        this.toneMapping = Renderer._DEFAULT_TONE_MAPPING;
+        this.toneMappingExposure = Renderer._DEFAULT_TONE_MAPPING_EXPOSURE;
+        this.outputColorSpace = Renderer._DEFAULT_OUTPUT_COLOR_SPACE;
+        this.shadowMap.enabled = true;
+        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');
+            rendererFolder
+                .add(this, 'toneMapping', {
+                    NoToneMapping,
+                    LinearToneMapping,
+                    ReinhardToneMapping,
+                    CineonToneMapping,
+                    ACESFilmicToneMapping,
+                    CustomToneMapping,
+                    AgXToneMapping,
+                    NeutralToneMapping,
+                })
+                .onChange((value: ToneMapping) => {
+                    this.toneMapping = value;
+                });
+            rendererFolder.add(this, 'toneMappingExposure', 0, 10, 0.001);
+            rendererFolder
+                .add(this, 'outputColorSpace', { SRGBColorSpace, LinearSRGBColorSpace })
+                .onChange((value: ColorSpace) => {
+                    this.outputColorSpace = value;
+                });
+        }
+    }
+
+    public override update(dt: number): void {
+        const isDebug = DebugManager.IsActive;
+        if (isDebug) DebugManager.BeginThreePerf();
+        super.update(dt);
+        if (isDebug) DebugManager.EndThreePerf();
+    }
+}

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

@@ -0,0 +1,29 @@
+import { Camera, Scene, WebGLRenderer, type WebGLRendererParameters } from 'three';
+import { ResizeManager } from '../../../managers/ResizeManager';
+
+export default abstract class WebGLRendererBase extends WebGLRenderer {
+    private readonly _scene: Scene;
+    private _camera: Camera;
+
+    constructor(scene: Scene, camera: Camera, parameters: WebGLRendererParameters = {}) {
+        super(parameters);
+
+        this._scene = scene;
+        this._camera = camera;
+
+        this.resize();
+    }
+
+    public setCamera(camera: Camera): void {
+        this._camera = camera;
+    }
+
+    public resize(): void {
+        this.setSize(ResizeManager.Width, ResizeManager.Height);
+        this.setPixelRatio(ResizeManager.PixelRatio);
+    }
+
+    public update(_dt: number): void {
+        this.render(this._scene, this._camera);
+    }
+}

package/template-vanilla/src/experiences/shaders/threes/loaders/LoaderFragmentShader.glsl

@@ -0,0 +1,6 @@
+uniform vec3 uColor;
+uniform float uAlpha;
+
+void main() {
+    gl_FragColor = vec4(uColor, uAlpha);
+}

package/template-vanilla/src/experiences/shaders/threes/loaders/LoaderVertexShader.glsl

@@ -0,0 +1,3 @@
+void main() {
+    gl_Position = vec4(position, 1.0);
+}

package/template-vanilla/src/experiences/styles/abstracts/_import.scss

@@ -0,0 +1,5 @@
+@forward 'variables';
+@forward 'mixins';
+@forward 'functions';
+
+// @use 'path/to/_import.scss' as *;

package/template-vanilla/src/experiences/styles/abstracts/functions.scss

@@ -0,0 +1,3 @@
+@function getAssetUrl($url) {
+    @return url('/assets/#{$url}');
+}

package/template-vanilla/src/experiences/styles/abstracts/variables.scss

@@ -0,0 +1,7 @@
+$white: #fafafa;
+$whiteAntiFlashs: #ededed;
+$darkGrey: #666666;
+$black: #050505;
+$jet: #333333;
+$silverGrey: #aaaaaa;
+$blue: #3f79f3;

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

@@ -0,0 +1,10 @@
+@use '../abstracts/import.scss' as *;
+
+// @font-face {
+//     font-family: 'din-condensed';
+//     src: getAssetUrl('fonts/din_bold_c.woff') format('woff'),
+//         getAssetUrl('fonts/din_bold_c.woff2') format('woff2');
+//     font-weight: bold;
+//     font-style: normal;
+//     font-display: swap;
+// }

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

@@ -0,0 +1,84 @@
+@use '../abstracts/import.scss' as *;
+
+$viewTransition: 0.5s;
+
+* {
+    box-sizing: border-box;
+    user-select: none;
+    overscroll-behavior: none;
+}
+
+body {
+    position: relative;
+    width: 100dvw;
+    height: 100dvh;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+
+    > #app,
+    > #root {
+        position: relative;
+        width: 100%;
+        height: 100%;
+
+        > #loader {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+        }
+
+        canvas,
+        #webgl {
+            width: 100%;
+            height: 100%;
+        }
+
+        .view-html-container {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+
+            &.show {
+                opacity: 0;
+                animation: showView $viewTransition ease forwards;
+
+                @keyframes showView {
+                    0% {
+                        opacity: 0;
+                    }
+
+                    100% {
+                        opacity: 1;
+                    }
+                }
+            }
+
+            &.hide {
+                opacity: 1;
+                animation: hideView $viewTransition ease forwards;
+
+                @keyframes hideView {
+                    0% {
+                        opacity: 1;
+                    }
+
+                    100% {
+                        opacity: 0;
+                    }
+                }
+            }
+        }
+    }
+
+    .lil-gui,
+    #three-perf-ui {
+        z-index: 999999;
+    }
+}

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

@@ -0,0 +1 @@
+@use '../abstracts/import.scss' as *;

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

@@ -0,0 +1,7 @@
+@use './abstracts/import.scss' as *;
+
+@use './commons/main.scss';
+@use './commons/texts.scss';
+@use './commons/fonts.scss';
+
+@use './views/loader.scss';

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

@@ -0,0 +1,72 @@
+@use '../abstracts/import.scss' as *;
+
+$outroFadeOutDuration: 1.5s;
+
+body {
+    > #app,
+    > #root {
+        > #loader {
+            .view-html-container {
+                &.hide {
+                    animation-duration: $outroFadeOutDuration;
+                }
+            }
+        }
+    }
+}
+
+#loader {
+    z-index: 999999;
+
+    .loading-screen {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100dvw;
+        height: 100dvh;
+
+        .loading-progress {
+            z-index: 2;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            padding-bottom: 2.5rem;
+            opacity: 1;
+            font-size: 2rem;
+            color: $white;
+            display: flex;
+            align-items: center;
+            gap: 0.25rem;
+            color: $white;
+        }
+
+        .loading-bar {
+            z-index: 1;
+            width: 100dvw;
+            height: 0.25rem;
+            position: absolute;
+            top: 50%;
+            left: 0;
+            opacity: 1;
+            background-color: $white;
+            transform-origin: top left;
+            transform: translateY(-50%) scaleX(0);
+
+            &.ended {
+                transform-origin: top right;
+                animation: outBar $outroFadeOutDuration cubic-bezier(0.77, 0, 0.175, 1) forwards;
+
+                @keyframes outBar {
+                    0% {
+                        transform: translateY(-50%) scaleX(1);
+                    }
+
+                    100% {
+                        transform: translateY(-50%) scaleX(0);
+                    }
+                }
+            }
+        }
+    }
+}

package/template-vanilla/src/experiences/tools/Action.ts

@@ -0,0 +1,23 @@
+type Listener<TParams extends unknown[]> = (...params: TParams) => unknown;
+
+export default class Action<T extends unknown[] = []> {
+    private _listeners = new Set<Listener<T>>();
+
+    public add(listener: Listener<T>): void {
+        this._listeners.add(listener);
+    }
+
+    public remove(listener: Listener<T>): void {
+        this._listeners.delete(listener);
+    }
+
+    public removeAll(): void {
+        this._listeners.clear();
+    }
+
+    public execute(...params: T): void {
+        for (const listener of this._listeners) {
+            listener(...params);
+        }
+    }
+}

package/template-vanilla/src/experiences/tools/Point.ts

@@ -0,0 +1,56 @@
+export default class Point {
+    private _x: number;
+    private _y: number;
+    private _z: number;
+
+    constructor(x = 0, y = 0, z = 0) {
+        this._x = x;
+        this._y = y;
+        this._z = z;
+    }
+
+    public set(x: number, y: number, z: number = this._z): void {
+        this._x = x;
+        this._y = y;
+        this._z = z;
+    }
+
+    public clear(): void {
+        this._x = 0;
+        this._y = 0;
+        this._z = 0;
+    }
+
+    public copy(p: Point): void {
+        this._x = p.x;
+        this._y = p.y;
+        this._z = p.z;
+    }
+
+    public clone(): Point {
+        return new Point(this._x, this._y, this._z);
+    }
+
+    //#region getter setter
+    //
+    public get x(): number {
+        return this._x;
+    }
+    public set x(x: number) {
+        this._x = x;
+    }
+    public get y(): number {
+        return this._y;
+    }
+    public set y(y: number) {
+        this._y = y;
+    }
+    public get z(): number {
+        return this._z;
+    }
+    public set z(z: number) {
+        this._z = z;
+    }
+    //
+    //#endregion
+}

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

@@ -0,0 +1,9 @@
+import type { Experience } from './experience';
+
+declare global {
+    interface Window {
+        experience: Experience;
+    }
+}
+
+export {};

package/template-vanilla/src/experiences/utils/AssetUtils.ts

@@ -0,0 +1,6 @@
+export default class AssetUtils {
+    public static GetPath(path: string): string {
+        path = path.trim();
+        return `./assets/${path}`;
+    }
+}

package/template-vanilla/src/experiences/utils/DomUtils.ts

@@ -0,0 +1,28 @@
+export default class DomUtils {
+    public static GetApp(): HTMLDivElement {
+        const app = (document.querySelector('#app') ?? document.querySelector('#root'))!;
+
+        if (!app) {
+            const newApp = document.createElement('div');
+            newApp.id = 'app';
+            document.body.appendChild(newApp);
+            return newApp;
+        }
+
+        return app as HTMLDivElement;
+    }
+
+    public static GetLoader(): HTMLDivElement {
+        const loader = document.querySelector('#loader')!;
+
+        if (!loader) {
+            const app = DomUtils.GetApp();
+            const newLoader = document.createElement('div');
+            newLoader.id = 'loader';
+            app.appendChild(newLoader);
+            return newLoader;
+        }
+
+        return loader as HTMLDivElement;
+    }
+}