@benjos/create-boilerplate 1.5.1 → 1.5.6

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

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

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

@@ -0,0 +1,21 @@
+import { DomPointerManager } from '@benjos/cookware';
+import { Object3D, Raycaster, Vector2, type Intersection, type Object3DEventMap } from 'three';
+import MainThreeApp from '../../engines/threes/app/MainThreeApp';
+
+class ThreeRaycasterManager {
+    private readonly _raycaster = new Raycaster();
+    private readonly _pointerPosition = new Vector2();
+
+    public init(): void {
+        //
+    }
+
+    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-vue/src/experiences/materials/threes/loaders/LoaderMaterial.ts

@@ -0,0 +1,47 @@
+import gsap from 'gsap';
+import { Color, ShaderMaterial, Uniform } from 'three';
+import LoaderFragmentShader from '../../../shaders/threes/loaders/LoaderFragmentShader.glsl';
+import LoaderVertexShader from '../../../shaders/threes/loaders/LoaderVertexShader.glsl';
+
+export default class LoaderMaterial extends ShaderMaterial {
+    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';
+
+    private _isFirstLoad: boolean = true;
+
+    constructor() {
+        super({
+            transparent: true,
+            uniforms: {
+                uAlpha: new Uniform(1),
+                uColor: new Uniform(new Color(LoaderMaterial._DEFAULT_UNIFORMS_COLOR)),
+            },
+            vertexShader: LoaderVertexShader,
+            fragmentShader: LoaderFragmentShader,
+        });
+    }
+
+    public async show(): Promise<void> {
+        gsap.killTweensOf(this.uniforms.uAlpha);
+        this.uniforms.uAlpha.value = this._isFirstLoad ? 1 : 0;
+        await gsap.to(this.uniforms.uAlpha, {
+            value: 1,
+            duration: this._isFirstLoad ? 0 : LoaderMaterial._GSAP_DURATION_FADE_IN,
+            ease: LoaderMaterial._GSAP_EASE_FADE_IN,
+        });
+        this._isFirstLoad = false;
+    }
+
+    public async hide(): Promise<void> {
+        gsap.killTweensOf(this.uniforms.uAlpha);
+        this.uniforms.uAlpha.value = 1;
+        await gsap.to(this.uniforms.uAlpha, {
+            value: 0,
+            duration: LoaderMaterial._GSAP_DURATION_FADE_OUT,
+            ease: LoaderMaterial._GSAP_EASE_FADE_OUT,
+        });
+    }
+}

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

@@ -0,0 +1,18 @@
+import { Camera, NoToneMapping, Scene, SRGBColorSpace, type WebGLRendererParameters } from 'three';
+import WebGLRendererBase from './bases/WebGLRendererBase';
+
+export default class LoaderRenderer extends WebGLRendererBase {
+    private static readonly _DEFAULT_TONE_MAPPING = NoToneMapping;
+    private static readonly _DEFAULT_OUTPUT_COLOR_SPACE = SRGBColorSpace;
+    private static readonly _DEFAULT_TONE_MAPPING_EXPOSURE = 1;
+    private static readonly _DEFAULT_CLEAR_COLOR = 0x000000;
+    private static readonly _DEFAULT_CLEAR_ALPHA = 0;
+
+    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-vue/src/experiences/renderers/threes/Renderer.ts

@@ -0,0 +1,71 @@
+import {
+    ACESFilmicToneMapping,
+    AgXToneMapping,
+    Camera,
+    CineonToneMapping,
+    CustomToneMapping,
+    LinearSRGBColorSpace,
+    LinearToneMapping,
+    NeutralToneMapping,
+    NoToneMapping,
+    PCFSoftShadowMap,
+    ReinhardToneMapping,
+    Scene,
+    SRGBColorSpace,
+    type ColorSpace,
+    type ToneMapping,
+    type WebGLRendererParameters,
+} from 'three';
+import { DebugGuiTitle } from '../../constants/experiences/DebugGuiTitle';
+import DebugManager from '../../managers/DebugManager';
+import WebGLRendererBase from './bases/WebGLRendererBase';
+
+export default class Renderer extends WebGLRendererBase {
+    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;
+
+    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.getGuiFolder(DebugGuiTitle.THREE_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-vue/src/experiences/renderers/threes/bases/WebGLRendererBase.ts

@@ -0,0 +1,29 @@
+import { DomResizeManager } from '@benjos/cookware';
+import { Camera, Scene, WebGLRenderer, type WebGLRendererParameters } from 'three';
+
+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(DomResizeManager.width, DomResizeManager.height);
+        this.setPixelRatio(DomResizeManager.pixelRatio);
+    }
+
+    public update(_dt: number): void {
+        this.render(this._scene, this._camera);
+    }
+}

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

@@ -0,0 +1,8 @@
+uniform vec3 uColor;
+uniform float uAlpha;
+
+void main() {
+    gl_FragColor = vec4(uColor, uAlpha);
+    #include <tonemapping_fragment>
+    #include <colorspace_fragment>
+}

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

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

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

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

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

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

package/template-vue/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-vue/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-vue/src/experiences/styles/commons/main.scss

@@ -0,0 +1,59 @@
+@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%;
+        }
+
+        .html-view {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+            transition: opacity $viewTransition ease;
+
+            &.show {
+                opacity: 1;
+            }
+        }
+    }
+
+    .lil-gui,
+    #three-perf-ui {
+        z-index: 999999;
+    }
+}

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

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

package/template-vue/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-vue/src/experiences/styles/views/loader.scss

@@ -0,0 +1,70 @@
+@use '../abstracts/import.scss' as *;
+
+$outroFadeOutDuration: 1.5s;
+
+body {
+
+    >#app,
+    >#root {
+        >#loader {
+            .html-view {
+                transition: opacity $outroFadeOutDuration ease;
+            }
+        }
+    }
+}
+
+#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;
+        }
+
+        .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-vue/src/experiences/types/assetTypes.ts

@@ -0,0 +1,8 @@
+export const AssetType = {
+    TEXTURE: 'TEXTURE',
+    HDR: 'HDR',
+    MODEL: 'MODEL',
+    FONT: 'FONT',
+} as const;
+
+export type AssetType = (typeof AssetType)[keyof typeof AssetType];

package/template-vue/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-vue/src/experiences/types/global.d.ts

@@ -0,0 +1,9 @@
+import { MainThreeApp } from '../engines/threes/app/MainThreeApp';
+
+declare global {
+    interface Window {
+        mainThreeApp: MainThreeApp;
+    }
+}
+
+export {};

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

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

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

@@ -0,0 +1,49 @@
+import { Object3D } from 'three';
+import { ViewId } from '../../../constants/experiences/ViewId';
+import type ThreeActorBase from './components/ThreeActorBase';
+
+export default abstract class ThreeViewBase extends Object3D {
+    private readonly _id: ViewId;
+    protected readonly _actors: ThreeActorBase[];
+    private _areActorsGenerated = false;
+
+    constructor(id: ViewId) {
+        super();
+        this._id = id;
+        this._actors = [];
+    }
+
+    public declareAssets(): void {
+        //
+    }
+
+    public init(): void {
+        if (!this._areActorsGenerated) this._generateActors();
+        this.reset();
+        for (const actor of this._actors) actor.init();
+    }
+
+    public reset(): void {
+        for (const actor of this._actors) actor.reset();
+    }
+
+    protected _generateActors(): void {
+        this._areActorsGenerated = true;
+    }
+
+    public dispose(): void {
+        for (const actor of this._actors) {
+            actor.dispose();
+        }
+    }
+
+    public update(_dt: number): void {
+        //
+    }
+
+    //#region Getters
+    //
+    public get viewId(): ViewId { return this._id; }
+    //
+    //#endregion
+}

package/template-vue/src/experiences/views/threes/bases/components/ThreeActorBase.ts

@@ -0,0 +1,44 @@
+import { BufferGeometry, Material, Mesh, Object3D, Texture } from 'three';
+
+export default abstract class ThreeActorBase extends Object3D {
+    constructor() {
+        super();
+    }
+
+    public init(): void {
+        this.reset();
+    }
+
+    public reset(): void {
+        //
+    }
+
+    public dispose(): void {
+        const geometries = new Set<BufferGeometry>();
+        const materials = new Set<Material>();
+        const textures = new Set<Texture>();
+
+        this.traverse((child) => {
+            if (child instanceof Mesh) {
+                if (child.geometry instanceof BufferGeometry) geometries.add(child.geometry as BufferGeometry);
+
+                const mats = Array.isArray(child.material) ? child.material : [child.material];
+                mats.forEach((mat) => {
+                    if (mat instanceof Material) {
+                        materials.add(mat);
+
+                        Object.values(mat).forEach((value) => {
+                            if (value instanceof Texture) textures.add(value);
+                        });
+                    }
+                });
+            }
+        });
+
+        textures.forEach((tex) => tex.dispose());
+        materials.forEach((mat) => mat.dispose());
+        geometries.forEach((geo) => geo.dispose());
+    }
+
+    public update(_dt: number): void { }
+}

package/template-vue/src/experiences/views/threes/bases/components/ThreeAnimatedModelBase.ts

@@ -0,0 +1,63 @@
+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 ThreeModelBase, { type ModelBaseParams } from './ThreeModelBase';
+
+export default abstract class ThreeAnimatedModelBase extends ThreeModelBase {
+    private static readonly _DEFAULT_ANIMATION_FADE_DURATION: number = 1;
+
+    declare private _mixer: AnimationMixer;
+    declare private _actions: AnimationAction[];
+    declare private _currentAction: AnimationAction | null;
+
+    constructor(assetId: AssetId, params: ModelBaseParams = {}) {
+        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 = ThreeAnimatedModelBase._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);
+    }
+}